/* Extracted from game-studio.html. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@300;400;700&display=block');

    :root {
      --site-bg: #F8FAFF;
      --site-surface: #EAF0FF;
      --site-text: #0F1119;
      --site-muted: #343A4B;
      --site-border: #D6DEF0;
      --site-primary: #6988E0;
      --site-on-primary: #000000;
      --site-secondary: #C78D68;
      --site-on-secondary: #000000;
      --site-accent: #A1A97F;
      --site-on-accent: #000000;
      --site-success: #22C55E;
      --site-warning: #F59E0B;
      --site-error: #EF4444;
      --site-info: #3B82F6;
      --color-bg: var(--site-bg);
      --color-surface: var(--site-surface);
      --color-text: var(--site-text);
      --color-muted: var(--site-muted);
      --color-border: var(--site-border);
      --color-primary: var(--site-primary);
      --color-on-primary: var(--site-on-primary);
      --color-secondary: var(--site-secondary);
      --color-on-secondary: var(--site-on-secondary);
      --color-accent: var(--site-accent);
      --color-on-accent: var(--site-on-accent);
      --color-success: var(--site-success);
      --color-warning: var(--site-warning);
      --color-error: var(--site-error);
      --color-info: var(--site-info);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --site-bg: #060C20;
        --site-surface: #0F1830;
        --site-text: #E3E4E8;
        --site-muted: #ACB1BE;
        --site-border: #262D40;
        --site-primary: #8EA5DD;
        --site-on-primary: #000000;
        --site-secondary: #DCB69F;
        --site-on-secondary: #000000;
        --site-accent: #C2C9A2;
        --site-on-accent: #000000;
        --site-success: #22C55E;
        --site-warning: #F59E0B;
        --site-error: #EF4444;
        --site-info: #3B82F6;
      }
    }

/* Extracted from game-studio.html. */
:root {
    --bs-primary: var(--site-primary);
    --bs-secondary: var(--site-secondary);
    --bs-success: var(--site-success);
    --bs-info: var(--site-info);
    --bs-warning: var(--site-warning);
    --bs-danger: var(--site-error);
    --bs-body-bg: var(--site-bg);
    --bs-body-color: var(--site-text);
    --bs-border-color: var(--site-border);
    --bs-secondary-color: var(--site-muted);
    --bs-tertiary-bg: var(--site-surface);
  }

/* Extracted from game-studio.html. */
* { box-sizing: border-box }

    html { scroll-behavior: smooth }

    body {
      margin: 0;
      background-color: var(--site-bg);
      color: var(--site-text);
      font-family: 'Roboto', system-ui, -apple-system, sans-serif;
      font-weight: 300;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4 {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      color: var(--site-text);
      line-height: 1.2;
      margin: 0 0 .5rem;
    }

    p { margin: 0 0 1rem }
    button { font-family: inherit }

    .top {
      position: sticky;
      top: 0;
      height: 72px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32px;
      z-index: 10;
      background-color: var(--site-bg);
      border-bottom: 1px solid var(--site-border);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      color: var(--site-text);
      text-decoration: none;
    }

    .logoMark {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: .95rem;
      color: var(--site-on-primary);
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    }

    .logoText {
      display: flex;
      flex-direction: column;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1rem;
      line-height: 1.05;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .logoTail {
      margin-top: 3px;
      font-family: 'Roboto', sans-serif;
      font-size: .66rem;
      font-weight: 400;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--site-muted);
    }

    .navPanel {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .top nav {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .top nav a {
      font-size: .95rem;
      background: none;
      border: 0;
      padding: 8px 12px;
      border-radius: 8px;
      color: var(--site-text);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .top nav a:hover {
      background-color: var(--site-surface);
      color: var(--site-primary);
    }

    .topCta {
      display: inline-flex;
      align-items: center;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      white-space: nowrap;
      font-size: .9rem;
      font-weight: 700;
      text-decoration: none;
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-primary), var(--site-secondary));
      transition: background .2s ease;
    }

    .topCta:hover {
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-secondary), var(--site-accent));
    }

    .navToggle {
      display: none;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-surface);
      color: var(--site-text);
      font-size: 1rem;
      cursor: pointer;
    }

    .intro {
      max-width: 1100px;
      margin: 48px auto 32px;
      padding: 0 24px;
    }

    .lib {
      max-width: 1100px;
      margin: 0 auto 80px;
      padding: 0 24px;
    }

    .tabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .tabs button {
      padding: 14px 24px;
      border: 2px solid var(--site-border);
      border-bottom: 0;
      border-radius: 12px 12px 0 0;
      white-space: nowrap;
      opacity: .65;
      cursor: pointer;
      font-weight: 700;
      color: var(--site-text);
      background-color: var(--site-surface);
    }

    .tabs button[aria-selected=true] {
      opacity: 1;
      margin-bottom: -2px;
      padding-bottom: 16px;
      position: relative;
      z-index: 2;
      background-color: var(--site-bg);
    }

    .drawer {
      border: 2px solid var(--site-border);
      border-radius: 0 12px 12px 12px;
      padding: 40px;
      min-height: 420px;
      height: auto;
      background-color: var(--site-bg);
    }

    [role=tabpanel][hidden] { display: none !important }

    .grid-a {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-auto-rows: minmax(160px, auto);
      gap: 20px;
    }

    .grid-a .tall { grid-row: span 2 }

    .tileCard {
      padding: 20px;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-surface);
      transition: background-color .2s ease;
    }

    .tileCard:hover { background-color: var(--site-bg) }

    @media (max-width: 880px) {
      .top { padding: 0 18px }
      .navToggle { display: inline-flex }
      .navPanel {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 18px 20px;
        background-color: var(--site-bg);
        border-bottom: 1px solid var(--site-border);
      }
      .navPanel.isOpen { display: flex }
      .top nav { flex-direction: column; align-items: stretch }
      .top nav a { padding: 11px 12px }
      .topCta { justify-content: center }
    }

    @media (max-width: 720px) {
      .intro { margin: 32px auto 24px }
      .drawer { padding: 24px; border-radius: 0 0 12px 12px }
      .grid-a { grid-template-columns: 1fr }
      .grid-a .tall { grid-row: auto }
    }

/* Extracted from game-studio.html. */
.studioPage {
      color: var(--color-text);
      background: var(--color-bg);
    }

    .studioPage .intro {
      max-width: 1100px;
      margin: 36px auto 28px;
      padding: 0 24px;
    }

    .studioPage .introGrid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(230px, 310px);
      align-items: end;
      gap: 24px;
    }

    .studioPage .eyebrow {
      margin: 0 0 8px;
      color: var(--color-muted);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .studioPage h1,
    .studioPage h2,
    .studioPage h3 {
      color: var(--color-text);
      font-weight: 700;
    }

    .studioPage h1 {
      max-width: 700px;
      margin: 0 0 10px;
      font-size: clamp(2.1rem, 5vw, 3.25rem);
      letter-spacing: -.035em;
    }

    .studioPage .introCopy {
      max-width: 650px;
      margin: 0;
      color: var(--color-muted);
      font-size: 1.04rem;
    }

    .studioPage .searchWrap label {
      display: block;
      margin: 0 0 7px;
      color: var(--color-text);
      font-size: .85rem;
      font-weight: 700;
    }

    .studioPage .searchField {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 14px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      color: var(--color-muted);
      background: var(--color-surface);
    }

    .studioPage .searchField input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      color: var(--color-text);
      background: transparent;
      font: inherit;
    }

    .studioPage .searchField input::placeholder {
      color: var(--color-muted);
      opacity: .8;
    }

    .studioPage .searchStatus {
      min-height: 1.25em;
      margin: 6px 0 0;
      color: var(--color-muted);
      font-size: .78rem;
    }

    .studioPage .lib {
      max-width: 1100px;
      margin: 0 auto 54px;
      padding: 0 24px;
    }

    .studioPage .tabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .studioPage .tabs::-webkit-scrollbar {
      display: none;
    }

    .studioPage .tabs button {
      flex: 0 0 auto;
      padding: 13px 20px;
      border: 2px solid var(--color-border);
      border-bottom: 0;
      border-radius: 12px 12px 0 0;
      color: var(--color-text);
      background: var(--color-surface);
      font: inherit;
      font-size: .9rem;
      font-weight: 700;
      white-space: nowrap;
      opacity: .72;
      cursor: pointer;
      transition: background-color .18s ease, color .18s ease, opacity .18s ease;
    }

    .studioPage .tabs button:hover {
      background: var(--color-bg);
      opacity: 1;
    }

    .studioPage .tabs button[aria-selected="true"] {
      position: relative;
      z-index: 2;
      margin-bottom: -2px;
      padding-bottom: 15px;
      background: var(--color-bg);
      color: var(--color-text);
      opacity: 1;
    }

    .studioPage .drawer {
      min-height: 420px;
      padding: 36px;
      border: 2px solid var(--color-border);
      border-radius: 0 12px 12px 12px;
      color: var(--color-text);
      background: var(--color-bg);
    }

    .studioPage [role="tabpanel"][hidden] {
      display: none !important;
    }

    .studioPage .panelHead {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 22px;
    }

    .studioPage .panelHead h2 {
      margin: 0;
      font-size: clamp(1.55rem, 3vw, 2rem);
    }

    .studioPage .panelHead p {
      max-width: 410px;
      margin: 0;
      color: var(--color-muted);
      font-size: .92rem;
    }

    .studioPage .grid-a {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-auto-rows: minmax(160px, auto);
      gap: 16px;
    }

    .studioPage .grid-a .tall {
      grid-row: span 2;
    }

    .studioPage .tileCard {
      padding: 20px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      color: var(--color-text);
      background: var(--color-surface);
      transition: background-color .2s ease, transform .2s ease;
    }

    .studioPage .tileCard:hover,
    .studioPage .stackRow:hover,
    .studioPage .collabCard:hover,
    .studioPage .workNote:hover {
      background: var(--color-bg);
    }

    .studioPage .tileCard:hover {
      transform: translateY(-2px);
    }

    .studioPage .featureTile {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 26px;
      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
      color: var(--color-on-primary);
      animation: studioReveal .45s ease both;
    }

    .studioPage .featureTile h3,
    .studioPage .featureTile p,
    .studioPage .featureTile .stageNumber {
      color: var(--color-on-primary);
    }

    .studioPage .featureTile h3 {
      margin: 16px 0 10px;
      font-size: 1.65rem;
    }

    .studioPage .featureTile p {
      max-width: 440px;
      margin: 0;
      font-size: 1rem;
      line-height: 1.65;
    }

    .studioPage .stageNumber {
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .studioPage .stepIcon,
    .studioPage .rowIcon {
      display: inline-grid;
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      place-items: center;
      border: 1px solid var(--color-border);
      border-radius: 12px;
      color: var(--color-text);
      background: var(--color-bg);
      font-size: 1rem;
    }

    .studioPage .featureTile .stepIcon {
      border-color: rgba(0, 0, 0, .18);
      color: var(--color-on-primary);
      background: rgba(255, 255, 255, .2);
    }

    .studioPage .tileCard h3,
    .studioPage .collabCard h3,
    .studioPage .workNote h3 {
      margin: 13px 0 6px;
      font-size: 1.06rem;
    }

    .studioPage .tileCard p,
    .studioPage .collabCard p,
    .studioPage .workNote p {
      margin: 0;
      color: var(--color-muted);
      font-size: .91rem;
      line-height: 1.55;
    }

    .studioPage .timeline {
      display: grid;
      gap: 10px;
    }

    .studioPage .stackRow {
      display: grid;
      grid-template-columns: 112px 98px minmax(0, 1fr);
      align-items: center;
      gap: 18px;
      padding: 16px 18px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      transition: background-color .2s ease;
    }

    .studioPage .stackRow .layer {
      color: var(--color-muted);
      font-size: .79rem;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .studioPage .stackRow .version {
      justify-self: start;
      padding: 4px 9px;
      border: 1px solid var(--color-border);
      border-radius: 999px;
      color: var(--color-text);
      background: var(--color-bg);
      font-size: .74rem;
      font-weight: 700;
    }

    .studioPage .stackRow h3 {
      margin: 0 0 3px;
      font-size: 1rem;
    }

    .studioPage .stackRow p {
      margin: 0;
      color: var(--color-muted);
      font-size: .9rem;
    }

    .studioPage .collabGrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .studioPage .collabCard {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 20px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      transition: background-color .2s ease;
    }

    .studioPage .collabCard h3 {
      margin-top: 1px;
    }

    .studioPage .collabCard p {
      max-width: 42ch;
    }

    .studioPage .panelLink {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: 18px;
      padding: 10px 16px;
      border: 0;
      border-radius: 8px;
      color: var(--color-on-primary);
      background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
      font-size: .9rem;
      font-weight: 700;
      text-decoration: none;
      transition: background .2s ease, transform .2s ease;
    }

    .studioPage .panelLink:hover {
      color: var(--color-on-primary);
      background: linear-gradient(120deg, var(--color-secondary), var(--color-accent));
      transform: translateY(-1px);
    }

    .studioPage .faqList {
      display: grid;
      max-width: 760px;
      gap: 10px;
      margin: 0 auto;
    }

    .studioPage .faqList details {
      padding: 17px 19px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      color: var(--color-text);
      background: var(--color-surface);
    }

    .studioPage .faqList summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      font-weight: 700;
      cursor: pointer;
      list-style: none;
    }

    .studioPage .faqList summary::-webkit-details-marker {
      display: none;
    }

    .studioPage .faqList summary::after {
      color: var(--color-primary);
      content: '+';
      font-size: 1.3rem;
      line-height: 1;
    }

    .studioPage .faqList details[open] summary::after {
      content: '−';
    }

    .studioPage .faqList details p {
      max-width: 680px;
      margin: 12px 0 0;
      color: var(--color-muted);
      font-size: .93rem;
    }

    .studioPage .productionLayout {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(230px, 1fr);
      gap: 20px;
    }

    .studioPage .studioQuote {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 280px;
      padding: 28px;
      border-radius: 8px;
      color: var(--color-on-primary);
      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    }

    .studioPage .studioQuote .quoteMark {
      color: var(--color-on-primary);
      font-size: 2rem;
    }

    .studioPage .studioQuote blockquote {
      max-width: 590px;
      margin: 14px 0 24px;
      color: var(--color-on-primary);
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.35rem, 2.8vw, 2rem);
      font-weight: 700;
      line-height: 1.35;
    }

    .studioPage .studioQuote p {
      margin: 0;
      color: var(--color-on-primary);
      font-size: .85rem;
      font-weight: 700;
    }

    .studioPage .workNotes {
      display: grid;
      gap: 10px;
    }

    .studioPage .workNote {
      padding: 15px 17px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      transition: background-color .2s ease;
    }

    .studioPage .workNote h3 {
      margin: 0 0 4px;
      font-size: .98rem;
    }

    .studioPage .tagRow {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }

    .studioPage .tagRow span {
      padding: 3px 8px;
      border: 1px solid var(--color-border);
      border-radius: 999px;
      color: var(--color-muted);
      font-size: .7rem;
      line-height: 1.4;
    }

    .studioPage .contactRow {
      max-width: 1052px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin: 0 auto 64px;
      padding: 23px 26px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      color: var(--color-text);
      background: var(--color-surface);
    }

    .studioPage .contactRow h2 {
      margin: 0 0 5px;
      font-size: 1.35rem;
    }

    .studioPage .contactRow p {
      margin: 0;
      color: var(--color-muted);
      font-size: .92rem;
    }

    @keyframes studioReveal {
      from { opacity: 0; transform: translateY(8px) }
      to { opacity: 1; transform: translateY(0) }
    }

    @media (max-width: 880px) {
      .studioPage .introGrid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .studioPage .searchWrap {
        max-width: 440px;
      }

      .studioPage .drawer {
        padding: 28px;
      }

      .studioPage .grid-a {
        grid-template-columns: 1.5fr 1fr;
      }

      .studioPage .grid-a .tall {
        grid-row: span 2;
      }

      .studioPage .contactRow {
        margin-right: 24px;
        margin-left: 24px;
      }
    }

    @media (max-width: 720px) {
      .studioPage .intro {
        margin: 28px auto 22px;
      }

      .studioPage .lib {
        margin-bottom: 36px;
      }

      .studioPage .tabs button {
        padding: 12px 17px;
      }

      .studioPage .drawer {
        padding: 22px;
        border-radius: 0 0 12px 12px;
      }

      .studioPage .panelHead {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
      }

      .studioPage .grid-a,
      .studioPage .collabGrid,
      .studioPage .productionLayout {
        grid-template-columns: 1fr;
      }

      .studioPage .grid-a .tall {
        grid-row: auto;
      }

      .studioPage .featureTile {
        min-height: 230px;
      }

      .studioPage .stackRow {
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
        padding: 14px;
      }

      .studioPage .stackRow .layer {
        grid-column: 1;
      }

      .studioPage .stackRow .version {
        grid-column: 2;
        grid-row: 1;
      }

      .studioPage .stackRow .stackCopy {
        grid-column: 1 / -1;
      }

      .studioPage .studioQuote {
        min-height: 230px;
      }

      .studioPage .contactRow {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 40px;
        padding: 20px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .studioPage *,
      .studioPage *::before,
      .studioPage *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }

/* Extracted from game-studio.html. */
.siteFooter {
      padding: 44px 0 0;
      font-weight: 300;
      color: var(--site-text);
      background-color: var(--site-surface);
      border-top: 1px solid var(--site-border);
    }

    .footerInner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .footerGrid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1.4fr;
      gap: 34px;
      padding-bottom: 34px;
    }

    .footerBrand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--site-text);
    }

    .footerMark {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: .9rem;
      color: var(--site-on-primary);
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    }

    .footerStrip {
      margin: 0 0 8px;
      max-width: 40ch;
      font-size: .9rem;
      color: var(--site-muted);
    }

    .footerHead {
      margin: 0 0 14px;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: .95rem;
      color: var(--site-text);
    }

    .footerLinks, .footerContact {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footerContact li {
      font-size: .92rem;
      line-height: 1.5;
      color: var(--site-muted);
    }

    .footerLinks a, .footerContact a {
      display: inline-block;
      padding: 3px 8px;
      margin-left: -8px;
      border-radius: 8px;
      font-size: .92rem;
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerLinks a:hover, .footerContact a:hover {
      background-color: var(--site-bg);
      color: var(--site-primary);
    }

    .footerBottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 0;
      border-top: 1px solid var(--site-border);
    }

    .footerCopy {
      margin: 0;
      font-size: .84rem;
      color: var(--site-muted);
    }

    .footerLegal {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .footerLegal a {
      padding: 3px 8px;
      border-radius: 8px;
      font-size: .84rem;
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerLegal a:hover {
      background-color: var(--site-bg);
      color: var(--site-primary);
    }

    .footerSocial { display: flex; gap: 8px }

    .footerSocial a {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-bg);
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerSocial a:hover {
      background-color: var(--site-primary);
      color: var(--site-on-primary);
      border-color: var(--site-primary);
    }

    .cookieBar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 30;
      padding: 14px 24px;
      background-color: var(--site-surface);
      border-top: 1px solid var(--site-border);
    }

    .cookieInner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .cookieText {
      margin: 0;
      font-size: .88rem;
      color: var(--site-muted);
    }

    .cookieBtn {
      padding: 10px 22px;
      border: 0;
      border-radius: 8px;
      font-size: .88rem;
      font-weight: 700;
      cursor: pointer;
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-primary), var(--site-accent));
    }

    @media (max-width: 880px) {
      .footerGrid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 26px }
      .footerBottom { flex-direction: column; align-items: flex-start }
      .cookieInner { flex-direction: column; align-items: flex-start }
    }

/* Extracted from game-worlds.html. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@300;400;700&display=block');

    :root {
      --site-bg: #F8FAFF;
      --site-surface: #EAF0FF;
      --site-text: #0F1119;
      --site-muted: #343A4B;
      --site-border: #D6DEF0;
      --site-primary: #6988E0;
      --site-on-primary: #000000;
      --site-secondary: #C78D68;
      --site-on-secondary: #000000;
      --site-accent: #A1A97F;
      --site-on-accent: #000000;
      --site-success: #22C55E;
      --site-warning: #F59E0B;
      --site-error: #EF4444;
      --site-info: #3B82F6;
      --color-bg: var(--site-bg);
      --color-surface: var(--site-surface);
      --color-text: var(--site-text);
      --color-muted: var(--site-muted);
      --color-border: var(--site-border);
      --color-primary: var(--site-primary);
      --color-on-primary: var(--site-on-primary);
      --color-secondary: var(--site-secondary);
      --color-on-secondary: var(--site-on-secondary);
      --color-accent: var(--site-accent);
      --color-on-accent: var(--site-on-accent);
      --color-success: var(--site-success);
      --color-warning: var(--site-warning);
      --color-error: var(--site-error);
      --color-info: var(--site-info);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --site-bg: #060C20;
        --site-surface: #0F1830;
        --site-text: #E3E4E8;
        --site-muted: #ACB1BE;
        --site-border: #262D40;
        --site-primary: #8EA5DD;
        --site-on-primary: #000000;
        --site-secondary: #DCB69F;
        --site-on-secondary: #000000;
        --site-accent: #C2C9A2;
        --site-on-accent: #000000;
        --site-success: #22C55E;
        --site-warning: #F59E0B;
        --site-error: #EF4444;
        --site-info: #3B82F6;
      }
    }

/* Extracted from game-worlds.html. */
:root {
    --bs-primary: var(--site-primary);
    --bs-secondary: var(--site-secondary);
    --bs-success: var(--site-success);
    --bs-info: var(--site-info);
    --bs-warning: var(--site-warning);
    --bs-danger: var(--site-error);
    --bs-body-bg: var(--site-bg);
    --bs-body-color: var(--site-text);
    --bs-border-color: var(--site-border);
    --bs-secondary-color: var(--site-muted);
    --bs-tertiary-bg: var(--site-surface);
  }

/* Extracted from game-worlds.html. */
* { box-sizing: border-box }

    html { scroll-behavior: smooth }

    body {
      margin: 0;
      background-color: var(--site-bg);
      color: var(--site-text);
      font-family: 'Roboto', system-ui, -apple-system, sans-serif;
      font-weight: 300;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4 {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      color: var(--site-text);
      line-height: 1.2;
      margin: 0 0 .5rem;
    }

    p { margin: 0 0 1rem }
    button { font-family: inherit }

    .top {
      position: sticky;
      top: 0;
      height: 72px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32px;
      z-index: 10;
      background-color: var(--site-bg);
      border-bottom: 1px solid var(--site-border);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      color: var(--site-text);
      text-decoration: none;
    }

    .logoMark {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: .95rem;
      color: var(--site-on-primary);
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    }

    .logoText {
      display: flex;
      flex-direction: column;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1rem;
      line-height: 1.05;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .logoTail {
      margin-top: 3px;
      font-family: 'Roboto', sans-serif;
      font-size: .66rem;
      font-weight: 400;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--site-muted);
    }

    .navPanel {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .top nav {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .top nav a {
      font-size: .95rem;
      background: none;
      border: 0;
      padding: 8px 12px;
      border-radius: 8px;
      color: var(--site-text);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .top nav a:hover {
      background-color: var(--site-surface);
      color: var(--site-primary);
    }

    .topCta {
      display: inline-flex;
      align-items: center;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      white-space: nowrap;
      font-size: .9rem;
      font-weight: 700;
      text-decoration: none;
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-primary), var(--site-secondary));
      transition: background .2s ease;
    }

    .topCta:hover {
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-secondary), var(--site-accent));
    }

    .navToggle {
      display: none;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-surface);
      color: var(--site-text);
      font-size: 1rem;
      cursor: pointer;
    }

    .intro {
      max-width: 1100px;
      margin: 48px auto 32px;
      padding: 0 24px;
    }

    .lib {
      max-width: 1100px;
      margin: 0 auto 80px;
      padding: 0 24px;
    }

    .tabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .tabs button {
      padding: 14px 24px;
      border: 2px solid var(--site-border);
      border-bottom: 0;
      border-radius: 12px 12px 0 0;
      white-space: nowrap;
      opacity: .65;
      cursor: pointer;
      font-weight: 700;
      color: var(--site-text);
      background-color: var(--site-surface);
    }

    .tabs button[aria-selected=true] {
      opacity: 1;
      margin-bottom: -2px;
      padding-bottom: 16px;
      position: relative;
      z-index: 2;
      background-color: var(--site-bg);
    }

    .drawer {
      border: 2px solid var(--site-border);
      border-radius: 0 12px 12px 12px;
      padding: 40px;
      min-height: 420px;
      height: auto;
      background-color: var(--site-bg);
    }

    [role=tabpanel][hidden] { display: none !important }

    .grid-a {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-auto-rows: minmax(160px, auto);
      gap: 20px;
    }

    .grid-a .tall { grid-row: span 2 }

    .tileCard {
      padding: 20px;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-surface);
      transition: background-color .2s ease;
    }

    .tileCard:hover { background-color: var(--site-bg) }

    @media (max-width: 880px) {
      .top { padding: 0 18px }
      .navToggle { display: inline-flex }
      .navPanel {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 18px 20px;
        background-color: var(--site-bg);
        border-bottom: 1px solid var(--site-border);
      }
      .navPanel.isOpen { display: flex }
      .top nav { flex-direction: column; align-items: stretch }
      .top nav a { padding: 11px 12px }
      .topCta { justify-content: center }
    }

    @media (max-width: 720px) {
      .intro { margin: 32px auto 24px }
      .drawer { padding: 24px; border-radius: 0 0 12px 12px }
      .grid-a { grid-template-columns: 1fr }
      .grid-a .tall { grid-row: auto }
    }

/* Extracted from game-worlds.html. */
#gameWorlds .intro {
      max-width: 1100px;
      margin: 40px auto 28px;
    }

    #gameWorlds .introCopy {
      max-width: 760px;
    }

    #gameWorlds .eyebrow {
      margin-bottom: 8px;
      color: var(--color-muted);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    #gameWorlds h1,
    #gameWorlds h2,
    #gameWorlds h3 {
      font-weight: 700;
    }

    #gameWorlds h1 {
      margin-bottom: 10px;
      font-size: clamp(2.2rem, 5vw, 3.5rem);
    }

    #gameWorlds .introText {
      margin: 0;
      color: var(--color-muted);
      font-size: 1.05rem;
    }

    #gameWorlds .worldSearch {
      display: flex;
      align-items: center;
      gap: 11px;
      width: min(100%, 380px);
      margin-top: 20px;
      padding: 11px 14px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
    }

    #gameWorlds .worldSearch i {
      color: var(--color-muted);
    }

    #gameWorlds .worldSearch input {
      width: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--color-text);
      font: inherit;
    }

    #gameWorlds .worldSearch input::placeholder {
      color: var(--color-muted);
      opacity: .85;
    }

    #gameWorlds .lib {
      max-width: 1100px;
      margin-bottom: 46px;
    }

    #gameWorlds .worldTabs {
      scrollbar-width: none;
      overscroll-behavior-x: contain;
    }

    #gameWorlds .worldTabs::-webkit-scrollbar {
      display: none;
    }

    #gameWorlds .worldTabs button {
      border-color: var(--color-border);
      background: var(--color-surface);
      color: var(--color-text);
      transition: background-color .18s ease, opacity .18s ease;
    }

    #gameWorlds .worldTabs button:hover {
      background: var(--color-bg);
      opacity: 1;
    }

    #gameWorlds .worldTabs button[aria-selected=true] {
      background: var(--color-bg);
      color: var(--color-text);
    }

    #gameWorlds .worldDrawer {
      min-height: 420px;
      border-color: var(--color-border);
      background: var(--color-bg);
      color: var(--color-text);
    }

    #gameWorlds .panelIntro {
      display: flex;
      flex-wrap: wrap;
      align-items: end;
      justify-content: space-between;
      gap: 10px 20px;
      margin-bottom: 22px;
    }

    #gameWorlds .panelIntro h2 {
      margin-bottom: 4px;
      font-size: clamp(1.5rem, 3vw, 2rem);
    }

    #gameWorlds .panelIntro p {
      margin: 0;
      color: var(--color-muted);
    }

    #gameWorlds .tinyLine {
      color: var(--color-muted);
      font-size: .9rem;
    }

    #gameWorlds .grid-a {
      grid-template-columns: 2fr 1fr 1fr;
      grid-auto-rows: minmax(160px, auto);
      gap: 14px;
    }

    #gameWorlds .worldCard {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
      padding: 20px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
      transition: background-color .2s ease, transform .2s ease;
    }

    #gameWorlds .worldCard:hover {
      background: var(--color-bg);
      transform: translateY(-2px);
    }

    #gameWorlds .worldCard.tall {
      grid-row: span 2;
      padding: 24px;
    }

    #gameWorlds .worldCard h3 {
      margin: 8px 0;
      font-size: 1.25rem;
    }

    #gameWorlds .worldCard.tall h3 {
      font-size: clamp(1.55rem, 3vw, 2.1rem);
    }

    #gameWorlds .worldCard p {
      margin: 0 0 14px;
      color: var(--color-muted);
      font-size: .95rem;
    }

    #gameWorlds .worldLabel {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      width: fit-content;
      padding: 5px 9px;
      border: 1px solid var(--color-border);
      border-radius: 999px;
      color: var(--color-text);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .02em;
    }

    #gameWorlds .worldMeta {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 14px;
      margin-top: 12px;
      color: var(--color-muted);
      font-size: .83rem;
    }

    #gameWorlds .worldMeta span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    #gameWorlds .worldMeta i {
      color: var(--color-primary);
    }

    #gameWorlds .featuredWorld {
      background: linear-gradient(135deg, var(--color-surface), var(--color-accent));
      color: var(--color-on-accent);
    }

    #gameWorlds .featuredWorld p,
    #gameWorlds .featuredWorld .worldMeta,
    #gameWorlds .featuredWorld .worldLabel {
      color: var(--color-on-accent);
    }

    #gameWorlds .featuredWorld .worldLabel {
      border-color: color-mix(in oklch, var(--color-on-accent) 30%, transparent);
      background: color-mix(in oklch, var(--color-accent) 80%, transparent);
    }

    #gameWorlds .featuredWorld .worldMeta i {
      color: var(--color-on-accent);
    }

    #gameWorlds .modeBlock {
      margin-top: 30px;
    }

    #gameWorlds .modeBlock h3 {
      margin-bottom: 5px;
      font-size: 1.3rem;
    }

    #gameWorlds .modeLead {
      margin-bottom: 16px;
      color: var(--color-muted);
    }

    #gameWorlds .modeGrid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    #gameWorlds .modeCard {
      padding: 16px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
      transition: background-color .2s ease;
    }

    #gameWorlds .modeCard:hover {
      background: var(--color-bg);
    }

    #gameWorlds .modeCard h4 {
      margin: 0 0 6px;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 700;
    }

    #gameWorlds .modeCard p {
      margin: 0;
      color: var(--color-muted);
      font-size: .9rem;
    }

    #gameWorlds .timeline {
      max-width: 820px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #gameWorlds .timelineRow {
      display: grid;
      grid-template-columns: 122px 100px minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      padding: 16px 0;
      border-bottom: 1px solid var(--color-border);
    }

    #gameWorlds .timelineRow:first-child {
      padding-top: 4px;
    }

    #gameWorlds .timelineDate {
      color: var(--color-muted);
      font-size: .88rem;
    }

    #gameWorlds .versionTag {
      width: fit-content;
      padding: 4px 9px;
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
      font-size: .8rem;
      font-weight: 700;
    }

    #gameWorlds .timelineRow p {
      margin: 0;
      color: var(--color-text);
    }

    #gameWorlds .updateNote {
      margin-top: 20px;
      padding: 14px 16px;
      border-left: 3px solid var(--color-primary);
      border-radius: 0 8px 8px 0;
      background: var(--color-surface);
      color: var(--color-text);
    }

    #gameWorlds .updateNote p {
      margin: 0;
      color: var(--color-muted);
    }

    #gameWorlds .toolsGrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      max-width: 850px;
    }

    #gameWorlds .toolCard {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      align-items: start;
      gap: 13px;
      padding: 16px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
      transition: background-color .2s ease;
    }

    #gameWorlds .toolCard:hover {
      background: var(--color-bg);
    }

    #gameWorlds .toolIcon {
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-bg);
      color: var(--color-primary);
      font-size: 1.1rem;
    }

    #gameWorlds .toolCard h3 {
      margin: 1px 0 4px;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 700;
    }

    #gameWorlds .toolCard p {
      margin: 0;
      color: var(--color-muted);
      font-size: .88rem;
    }

    #gameWorlds .toolLink {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 18px;
      color: var(--color-text);
      font-weight: 700;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    #gameWorlds .toolLink:hover {
      color: var(--color-primary);
    }

    #gameWorlds .faqList {
      display: grid;
      gap: 10px;
      max-width: 760px;
    }

    #gameWorlds .faqList details {
      padding: 15px 17px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
    }

    #gameWorlds .faqList summary {
      cursor: pointer;
      font-weight: 700;
    }

    #gameWorlds .faqList details p {
      margin: 10px 0 0;
      color: var(--color-muted);
    }

    #gameWorlds .communityLayout {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 18px;
    }

    #gameWorlds .communityLead,
    #gameWorlds .smallQuote {
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
    }

    #gameWorlds .communityLead {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 25px;
    }

    #gameWorlds .communityLead blockquote {
      margin: 0 0 24px;
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.25rem, 2.4vw, 1.8rem);
      font-weight: 700;
      line-height: 1.4;
    }

    #gameWorlds .quoteByline {
      margin: 0;
      color: var(--color-muted);
      font-size: .88rem;
    }

    #gameWorlds .quoteStack {
      display: grid;
      gap: 10px;
    }

    #gameWorlds .smallQuote {
      padding: 14px 16px;
      transition: background-color .2s ease;
    }

    #gameWorlds .smallQuote:hover,
    #gameWorlds .communityLead:hover {
      background: var(--color-bg);
    }

    #gameWorlds .smallQuote blockquote {
      margin: 0 0 7px;
      font-size: .94rem;
    }

    #gameWorlds .smallQuote p {
      margin: 0;
      color: var(--color-muted);
      font-size: .82rem;
    }

    #gameWorlds .joinRow {
      max-width: 1052px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 20px;
      margin: 0 auto 64px;
      padding: 22px 24px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
    }

    #gameWorlds .joinRow h2 {
      margin-bottom: 5px;
      font-size: 1.45rem;
    }

    #gameWorlds .joinRow p {
      margin: 0;
      color: var(--color-muted);
    }

    #gameWorlds .joinActions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 12px 18px;
    }

    #gameWorlds .joinButton {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 11px 17px;
      border-radius: 8px;
      background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
      color: var(--color-on-primary);
      font-weight: 700;
      text-decoration: none;
      transition: background .2s ease, transform .2s ease;
    }

    #gameWorlds .joinButton:hover {
      transform: translateY(-2px);
      background: linear-gradient(120deg, var(--color-secondary), var(--color-accent));
      color: var(--color-on-secondary);
    }

    #gameWorlds .secondaryLink {
      color: var(--color-text);
      font-size: .9rem;
      text-underline-offset: 3px;
    }

    #gameWorlds .secondaryLink:hover {
      color: var(--color-primary);
    }

    @media (max-width: 720px) {
      #gameWorlds .intro {
        margin: 30px auto 24px;
      }

      #gameWorlds .lib {
        margin-bottom: 30px;
      }

      #gameWorlds .worldDrawer {
        padding: 24px;
      }

      #gameWorlds .grid-a {
        grid-template-columns: 1fr;
      }

      #gameWorlds .grid-a .tall {
        grid-row: auto;
      }

      #gameWorlds .modeGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #gameWorlds .communityLayout {
        grid-template-columns: 1fr;
      }

      #gameWorlds .joinRow {
        grid-template-columns: 1fr;
        margin: 0 24px 48px;
      }

      #gameWorlds .joinActions {
        justify-content: flex-start;
      }
    }

    @media (max-width: 480px) {
      #gameWorlds .modeGrid,
      #gameWorlds .toolsGrid {
        grid-template-columns: 1fr;
      }

      #gameWorlds .timelineRow {
        grid-template-columns: 1fr auto;
        gap: 5px 10px;
      }

      #gameWorlds .timelineRow p {
        grid-column: 1 / -1;
      }

      #gameWorlds .joinActions {
        align-items: stretch;
        flex-direction: column;
      }

      #gameWorlds .joinButton {
        width: 100%;
      }

      #gameWorlds .secondaryLink {
        text-align: center;
      }
    }

/* Extracted from game-worlds.html. */
.siteFooter {
      padding: 44px 0 0;
      font-weight: 300;
      color: var(--site-text);
      background-color: var(--site-surface);
      border-top: 1px solid var(--site-border);
    }

    .footerInner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .footerGrid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1.4fr;
      gap: 34px;
      padding-bottom: 34px;
    }

    .footerBrand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--site-text);
    }

    .footerMark {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: .9rem;
      color: var(--site-on-primary);
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    }

    .footerStrip {
      margin: 0 0 8px;
      max-width: 40ch;
      font-size: .9rem;
      color: var(--site-muted);
    }

    .footerHead {
      margin: 0 0 14px;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: .95rem;
      color: var(--site-text);
    }

    .footerLinks, .footerContact {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footerContact li {
      font-size: .92rem;
      line-height: 1.5;
      color: var(--site-muted);
    }

    .footerLinks a, .footerContact a {
      display: inline-block;
      padding: 3px 8px;
      margin-left: -8px;
      border-radius: 8px;
      font-size: .92rem;
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerLinks a:hover, .footerContact a:hover {
      background-color: var(--site-bg);
      color: var(--site-primary);
    }

    .footerBottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 0;
      border-top: 1px solid var(--site-border);
    }

    .footerCopy {
      margin: 0;
      font-size: .84rem;
      color: var(--site-muted);
    }

    .footerLegal {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .footerLegal a {
      padding: 3px 8px;
      border-radius: 8px;
      font-size: .84rem;
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerLegal a:hover {
      background-color: var(--site-bg);
      color: var(--site-primary);
    }

    .footerSocial { display: flex; gap: 8px }

    .footerSocial a {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-bg);
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerSocial a:hover {
      background-color: var(--site-primary);
      color: var(--site-on-primary);
      border-color: var(--site-primary);
    }

    .cookieBar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 30;
      padding: 14px 24px;
      background-color: var(--site-surface);
      border-top: 1px solid var(--site-border);
    }

    .cookieInner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .cookieText {
      margin: 0;
      font-size: .88rem;
      color: var(--site-muted);
    }

    .cookieBtn {
      padding: 10px 22px;
      border: 0;
      border-radius: 8px;
      font-size: .88rem;
      font-weight: 700;
      cursor: pointer;
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-primary), var(--site-accent));
    }

    @media (max-width: 880px) {
      .footerGrid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 26px }
      .footerBottom { flex-direction: column; align-items: flex-start }
      .cookieInner { flex-direction: column; align-items: flex-start }
    }

/* Extracted from index.html. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@300;400;700&display=block');

    :root {
      --site-bg: #F8FAFF;
      --site-surface: #EAF0FF;
      --site-text: #0F1119;
      --site-muted: #343A4B;
      --site-border: #D6DEF0;
      --site-primary: #6988E0;
      --site-on-primary: #000000;
      --site-secondary: #C78D68;
      --site-on-secondary: #000000;
      --site-accent: #A1A97F;
      --site-on-accent: #000000;
      --site-success: #22C55E;
      --site-warning: #F59E0B;
      --site-error: #EF4444;
      --site-info: #3B82F6;
      --color-bg: var(--site-bg);
      --color-surface: var(--site-surface);
      --color-text: var(--site-text);
      --color-muted: var(--site-muted);
      --color-border: var(--site-border);
      --color-primary: var(--site-primary);
      --color-on-primary: var(--site-on-primary);
      --color-secondary: var(--site-secondary);
      --color-on-secondary: var(--site-on-secondary);
      --color-accent: var(--site-accent);
      --color-on-accent: var(--site-on-accent);
      --color-success: var(--site-success);
      --color-warning: var(--site-warning);
      --color-error: var(--site-error);
      --color-info: var(--site-info);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --site-bg: #060C20;
        --site-surface: #0F1830;
        --site-text: #E3E4E8;
        --site-muted: #ACB1BE;
        --site-border: #262D40;
        --site-primary: #8EA5DD;
        --site-on-primary: #000000;
        --site-secondary: #DCB69F;
        --site-on-secondary: #000000;
        --site-accent: #C2C9A2;
        --site-on-accent: #000000;
        --site-success: #22C55E;
        --site-warning: #F59E0B;
        --site-error: #EF4444;
        --site-info: #3B82F6;
      }
    }

/* Extracted from index.html. */
:root {
    --bs-primary: var(--site-primary);
    --bs-secondary: var(--site-secondary);
    --bs-success: var(--site-success);
    --bs-info: var(--site-info);
    --bs-warning: var(--site-warning);
    --bs-danger: var(--site-error);
    --bs-body-bg: var(--site-bg);
    --bs-body-color: var(--site-text);
    --bs-border-color: var(--site-border);
    --bs-secondary-color: var(--site-muted);
    --bs-tertiary-bg: var(--site-surface);
  }

/* Extracted from index.html. */
* { box-sizing: border-box }

    html { scroll-behavior: smooth }

    body {
      margin: 0;
      background-color: var(--site-bg);
      color: var(--site-text);
      font-family: 'Roboto', system-ui, -apple-system, sans-serif;
      font-weight: 300;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4 {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      color: var(--site-text);
      line-height: 1.2;
      margin: 0 0 .5rem;
    }

    p { margin: 0 0 1rem }
    button { font-family: inherit }

    .top {
      position: sticky;
      top: 0;
      height: 72px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32px;
      z-index: 10;
      background-color: var(--site-bg);
      border-bottom: 1px solid var(--site-border);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      color: var(--site-text);
      text-decoration: none;
    }

    .logoMark {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: .95rem;
      color: var(--site-on-primary);
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    }

    .logoText {
      display: flex;
      flex-direction: column;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1rem;
      line-height: 1.05;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .logoTail {
      margin-top: 3px;
      font-family: 'Roboto', sans-serif;
      font-size: .66rem;
      font-weight: 400;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--site-muted);
    }

    .navPanel {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .top nav {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .top nav a {
      font-size: .95rem;
      background: none;
      border: 0;
      padding: 8px 12px;
      border-radius: 8px;
      color: var(--site-text);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .top nav a:hover {
      background-color: var(--site-surface);
      color: var(--site-primary);
    }

    .topCta {
      display: inline-flex;
      align-items: center;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      white-space: nowrap;
      font-size: .9rem;
      font-weight: 700;
      text-decoration: none;
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-primary), var(--site-secondary));
      transition: background .2s ease;
    }

    .topCta:hover {
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-secondary), var(--site-accent));
    }

    .navToggle {
      display: none;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-surface);
      color: var(--site-text);
      font-size: 1rem;
      cursor: pointer;
    }

    .intro {
      max-width: 1100px;
      margin: 48px auto 32px;
      padding: 0 24px;
    }

    .lib {
      max-width: 1100px;
      margin: 0 auto 80px;
      padding: 0 24px;
    }

    .tabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .tabs button {
      padding: 14px 24px;
      border: 2px solid var(--site-border);
      border-bottom: 0;
      border-radius: 12px 12px 0 0;
      white-space: nowrap;
      opacity: .65;
      cursor: pointer;
      font-weight: 700;
      color: var(--site-text);
      background-color: var(--site-surface);
    }

    .tabs button[aria-selected=true] {
      opacity: 1;
      margin-bottom: -2px;
      padding-bottom: 16px;
      position: relative;
      z-index: 2;
      background-color: var(--site-bg);
    }

    .drawer {
      border: 2px solid var(--site-border);
      border-radius: 0 12px 12px 12px;
      padding: 40px;
      min-height: 420px;
      height: auto;
      background-color: var(--site-bg);
    }

    [role=tabpanel][hidden] { display: none !important }

    .grid-a {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-auto-rows: minmax(160px, auto);
      gap: 20px;
    }

    .grid-a .tall { grid-row: span 2 }

    .tileCard {
      padding: 20px;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-surface);
      transition: background-color .2s ease;
    }

    .tileCard:hover { background-color: var(--site-bg) }

    @media (max-width: 880px) {
      .top { padding: 0 18px }
      .navToggle { display: inline-flex }
      .navPanel {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 18px 20px;
        background-color: var(--site-bg);
        border-bottom: 1px solid var(--site-border);
      }
      .navPanel.isOpen { display: flex }
      .top nav { flex-direction: column; align-items: stretch }
      .top nav a { padding: 11px 12px }
      .topCta { justify-content: center }
    }

    @media (max-width: 720px) {
      .intro { margin: 32px auto 24px }
      .drawer { padding: 24px; border-radius: 0 0 12px 12px }
      .grid-a { grid-template-columns: 1fr }
      .grid-a .tall { grid-row: auto }
    }

/* Extracted from index.html. */
.homeMain {
      color: var(--color-text);
      background: var(--color-bg);
      font-family: 'Roboto', system-ui, sans-serif;
      font-weight: 300;
    }

    .homeMain * {
      box-sizing: border-box;
    }

    .homeMain a {
      color: var(--color-primary);
      text-underline-offset: 3px;
    }

    .homeMain h1,
    .homeMain h2,
    .homeMain h3 {
      color: var(--color-text);
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      line-height: 1.2;
    }

    .homeIntro,
    .homeLibrary,
    .homeContact {
      max-width: 1100px;
      margin-right: auto;
      margin-left: auto;
      padding-right: 24px;
      padding-left: 24px;
    }

    .homeIntro {
      margin-top: 32px;
      margin-bottom: 28px;
    }

    .introPanel {
      padding: 20px 24px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
    }

    .introTopline {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 5px;
      color: var(--color-muted);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .introTopline i {
      color: var(--color-primary);
    }

    .introPanel h1 {
      margin: 0 0 7px;
      font-size: clamp(1.8rem, 4vw, 2.7rem);
    }

    .introSubhead {
      margin: 0 0 13px;
      color: var(--color-muted);
      font-size: 1rem;
    }

    .introControls {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto;
      align-items: center;
      gap: 16px;
    }

    .searchWrap {
      position: relative;
    }

    .searchWrap > i {
      position: absolute;
      top: 50%;
      left: 15px;
      color: var(--color-muted);
      transform: translateY(-50%);
      pointer-events: none;
    }

    .librarySearch {
      width: 100%;
      min-height: 48px;
      padding: 10px 14px 10px 42px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-bg);
      color: var(--color-text);
      font: inherit;
    }

    .librarySearch:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    .statsRow {
      display: flex;
      align-items: center;
      gap: 18px;
      margin: 0;
    }

    .statItem {
      display: flex;
      align-items: baseline;
      gap: 6px;
      white-space: nowrap;
    }

    .statNumber {
      color: var(--color-primary);
      font-size: 1.25rem;
      font-weight: 700;
    }

    .statLabel {
      color: var(--color-muted);
      font-size: .82rem;
    }

    .pickHint {
      margin: 10px 0 0;
      color: var(--color-muted);
      font-size: .82rem;
    }

    .homeLibrary {
      margin-bottom: 48px;
    }

    .libraryTabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .libraryTabs::-webkit-scrollbar {
      display: none;
    }

    .libraryTabs [role='tab'] {
      flex: 0 0 auto;
      padding: 12px 20px 13px;
      border: 2px solid var(--color-border);
      border-bottom: 0;
      border-radius: 12px 12px 0 0;
      background: var(--color-surface);
      color: var(--color-text);
      cursor: pointer;
      font: inherit;
      font-weight: 700;
      opacity: .7;
      white-space: nowrap;
      transition: background-color .18s ease, opacity .18s ease;
    }

    .libraryTabs [role='tab']:hover {
      background: var(--color-bg);
      opacity: 1;
    }

    .libraryTabs [role='tab'][aria-selected='true'] {
      position: relative;
      z-index: 2;
      margin-bottom: -2px;
      padding-bottom: 15px;
      background: var(--color-bg);
      opacity: 1;
    }

    .libraryTabs [role='tab']:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    .libraryDrawer {
      min-height: 420px;
      padding: 34px;
      border: 2px solid var(--color-border);
      border-radius: 0 12px 12px 12px;
      background: var(--color-bg);
      color: var(--color-text);
    }

    [role='tabpanel'][hidden] {
      display: none !important;
    }

    .panelHeading {
      margin: 0 0 20px;
      font-size: 1.7rem;
    }

    .guidesGrid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-auto-rows: minmax(160px, auto);
      gap: 16px;
    }

    .guideTile,
    .toolRow,
    .patchRow,
    .voiceQuote,
    .faqList details {
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
      transition: background-color .2s ease;
    }

    .guideTile:hover,
    .toolRow:hover,
    .patchRow:hover,
    .voiceQuote:hover,
    .faqList details:hover {
      background: var(--color-bg);
    }

    .guideTile {
      padding: 18px;
    }

    .guideTile h3 {
      margin: 0 0 8px;
      font-size: 1.1rem;
    }

    .guideTile p {
      margin: 0;
      color: var(--color-muted);
      font-size: .94rem;
      line-height: 1.55;
    }

    .guideTile .tileEyebrow {
      display: inline-block;
      margin-bottom: 9px;
      color: var(--color-muted);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .guideTile.tall {
      grid-row: span 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: linear-gradient(135deg, var(--color-surface), var(--color-bg));
      color: var(--color-text);
    }

    .guideTile.tall .setupSteps {
      display: grid;
      gap: 8px;
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
    }

    .setupSteps li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      color: var(--color-text);
      font-size: .9rem;
    }

    .setupSteps i {
      margin-top: 4px;
      color: var(--color-primary);
    }

    .tileLink {
      display: inline-block;
      margin-top: 12px;
      font-size: .87rem;
      font-weight: 700;
    }

    .patchTimeline {
      display: grid;
      gap: 10px;
    }

    .patchRow {
      display: grid;
      grid-template-columns: 110px 94px minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
    }

    .patchDate {
      color: var(--color-muted);
      font-size: .86rem;
      font-weight: 700;
      white-space: nowrap;
    }

    .versionTag {
      display: inline-block;
      width: fit-content;
      padding: 4px 8px;
      border-radius: 6px;
      background: var(--color-primary);
      color: var(--color-on-primary);
      font-size: .78rem;
      font-weight: 700;
      white-space: nowrap;
    }

    .patchSummary {
      margin: 0;
      color: var(--color-text);
      font-size: .94rem;
    }

    .panelNote {
      margin: 16px 0 0;
      color: var(--color-muted);
      font-size: .9rem;
    }

    .gradientLink {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-left: 4px;
      color: var(--color-text);
      font-weight: 700;
    }

    .toolsGrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .toolRow {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 13px;
    }

    .toolIcon {
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-bg);
      color: var(--color-primary);
      font-size: 1rem;
    }

    .toolRow h3 {
      margin: 0 0 3px;
      font-family: 'Roboto', system-ui, sans-serif;
      font-size: .96rem;
    }

    .toolRow p {
      margin: 0;
      color: var(--color-muted);
      font-size: .82rem;
      line-height: 1.4;
    }

    .toolRow a {
      font-size: .8rem;
      font-weight: 700;
      white-space: nowrap;
    }

    .faqList {
      display: grid;
      max-width: 760px;
      gap: 10px;
    }

    .faqList details {
      padding: 0 16px;
    }

    .faqList summary {
      display: flex;
      min-height: 52px;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--color-text);
      cursor: pointer;
      font-weight: 700;
      list-style: none;
    }

    .faqList summary::-webkit-details-marker {
      display: none;
    }

    .faqList summary::after {
      color: var(--color-primary);
      content: '+';
      font-size: 1.3rem;
      font-weight: 400;
    }

    .faqList details[open] summary::after {
      content: '−';
    }

    .faqList details p {
      max-width: 68ch;
      margin: 0 0 15px;
      color: var(--color-muted);
      font-size: .94rem;
    }

    .communityGrid {
      display: grid;
      grid-template-columns: 3fr 2fr;
      gap: 18px;
    }

    .voiceQuote {
      margin: 0;
      padding: 18px;
    }

    .voiceQuote p {
      margin: 0;
      color: var(--color-text);
      line-height: 1.55;
    }

    .voiceQuote cite {
      display: block;
      margin-top: 12px;
      color: var(--color-muted);
      font-size: .83rem;
      font-style: normal;
      font-weight: 700;
    }

    .voiceQuote.featuredVoice {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 26px;
      background: linear-gradient(135deg, var(--color-surface), var(--color-bg));
      color: var(--color-text);
    }

    .featuredVoice .quoteMark {
      margin-bottom: 8px;
      color: var(--color-primary);
      font-size: 1.4rem;
    }

    .featuredVoice p {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    }

    .voiceStack {
      display: grid;
      gap: 10px;
    }

    .contactSection {
      margin: 0 auto 56px;
      padding: 0 24px;
    }

    .contactPanel {
      display: grid;
      max-width: 1100px;
      grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
      gap: 30px;
      margin: 0 auto;
      padding: 26px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
    }

    .contactCopy h2 {
      margin: 0 0 8px;
      font-size: 1.6rem;
    }

    .contactCopy > p {
      margin: 0 0 18px;
      color: var(--color-muted);
      font-size: .94rem;
    }

    .contactDetails {
      display: grid;
      gap: 8px;
      color: var(--color-text);
      font-size: .88rem;
    }

    .contactDetails a {
      color: var(--color-text);
      text-decoration: none;
    }

    .contactDetails i {
      width: 18px;
      color: var(--color-primary);
    }

    .contactForm {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 11px;
      align-content: start;
    }

    .contactForm label {
      display: grid;
      gap: 5px;
      color: var(--color-text);
      font-size: .82rem;
      font-weight: 700;
    }

    .contactForm label.messageField {
      grid-column: 1 / -1;
    }

    .contactForm input,
    .contactForm textarea {
      width: 100%;
      padding: 10px 11px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-bg);
      color: var(--color-text);
      font: inherit;
      font-weight: 300;
    }

    .contactForm input {
      min-height: 44px;
    }

    .contactForm textarea {
      min-height: 76px;
      resize: vertical;
    }

    .contactForm input:focus,
    .contactForm textarea:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: 1px;
    }

    .contactSubmit {
      grid-column: 1 / -1;
      justify-self: start;
      min-height: 45px;
      padding: 10px 20px;
      border: 0;
      border-radius: 8px;
      background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
      color: var(--color-on-primary);
      cursor: pointer;
      font: inherit;
      font-weight: 700;
      transition: filter .2s ease, transform .2s ease;
    }

    .contactSubmit:hover {
      filter: brightness(.96);
      transform: translateY(-1px);
    }

    .noResults {
      margin: 18px 0 0;
      color: var(--color-muted);
      font-size: .92rem;
    }

    .noResults[hidden] {
      display: none;
    }

    @media (max-width: 720px) {
      .homeIntro {
        margin-top: 22px;
        margin-bottom: 22px;
      }

      .introPanel {
        padding: 17px;
      }

      .introControls {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .statsRow {
        gap: 15px;
      }

      .homeLibrary {
        margin-bottom: 34px;
      }

      .libraryTabs [role='tab'] {
        padding-right: 16px;
        padding-left: 16px;
      }

      .libraryDrawer {
        padding: 22px;
        border-radius: 0 0 12px 12px;
      }

      .guidesGrid {
        grid-template-columns: 1fr;
      }

      .guideTile.tall {
        grid-row: auto;
      }

      .patchRow {
        grid-template-columns: auto max-content;
        justify-content: start;
        gap: 7px 10px;
      }

      .patchSummary {
        grid-column: 1 / -1;
      }

      .toolsGrid {
        grid-template-columns: 1fr;
      }

      .toolRow {
        grid-template-columns: 40px minmax(0, 1fr);
      }

      .toolRow a {
        grid-column: 2;
        white-space: normal;
      }

      .communityGrid {
        grid-template-columns: 1fr;
      }

      .contactPanel {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 21px;
      }

      .contactForm {
        grid-template-columns: 1fr;
      }

      .contactForm label.messageField,
      .contactSubmit {
        grid-column: 1;
      }

      .contactSubmit {
        width: 100%;
      }
    }

    @media (max-width: 400px) {
      .homeIntro,
      .homeLibrary,
      .contactSection {
        padding-right: 16px;
        padding-left: 16px;
      }

      .statsRow {
        flex-wrap: wrap;
      }

      .libraryDrawer {
        padding: 18px;
      }

      .patchRow {
        grid-template-columns: 1fr auto;
      }
    }

/* Extracted from index.html. */
.siteFooter {
      padding: 44px 0 0;
      font-weight: 300;
      color: var(--site-text);
      background-color: var(--site-surface);
      border-top: 1px solid var(--site-border);
    }

    .footerInner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .footerGrid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1.4fr;
      gap: 34px;
      padding-bottom: 34px;
    }

    .footerBrand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--site-text);
    }

    .footerMark {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: .9rem;
      color: var(--site-on-primary);
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    }

    .footerStrip {
      margin: 0 0 8px;
      max-width: 40ch;
      font-size: .9rem;
      color: var(--site-muted);
    }

    .footerHead {
      margin: 0 0 14px;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: .95rem;
      color: var(--site-text);
    }

    .footerLinks, .footerContact {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footerContact li {
      font-size: .92rem;
      line-height: 1.5;
      color: var(--site-muted);
    }

    .footerLinks a, .footerContact a {
      display: inline-block;
      padding: 3px 8px;
      margin-left: -8px;
      border-radius: 8px;
      font-size: .92rem;
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerLinks a:hover, .footerContact a:hover {
      background-color: var(--site-bg);
      color: var(--site-primary);
    }

    .footerBottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 0;
      border-top: 1px solid var(--site-border);
    }

    .footerCopy {
      margin: 0;
      font-size: .84rem;
      color: var(--site-muted);
    }

    .footerLegal {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .footerLegal a {
      padding: 3px 8px;
      border-radius: 8px;
      font-size: .84rem;
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerLegal a:hover {
      background-color: var(--site-bg);
      color: var(--site-primary);
    }

    .footerSocial { display: flex; gap: 8px }

    .footerSocial a {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-bg);
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerSocial a:hover {
      background-color: var(--site-primary);
      color: var(--site-on-primary);
      border-color: var(--site-primary);
    }

    .cookieBar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 30;
      padding: 14px 24px;
      background-color: var(--site-surface);
      border-top: 1px solid var(--site-border);
    }

    .cookieInner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .cookieText {
      margin: 0;
      font-size: .88rem;
      color: var(--site-muted);
    }

    .cookieBtn {
      padding: 10px 22px;
      border: 0;
      border-radius: 8px;
      font-size: .88rem;
      font-weight: 700;
      cursor: pointer;
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-primary), var(--site-accent));
    }

    @media (max-width: 880px) {
      .footerGrid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 26px }
      .footerBottom { flex-direction: column; align-items: flex-start }
      .cookieInner { flex-direction: column; align-items: flex-start }
    }

/* Extracted from multiplayer-hosting.html. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@300;400;700&display=block');

    :root {
      --site-bg: #F8FAFF;
      --site-surface: #EAF0FF;
      --site-text: #0F1119;
      --site-muted: #343A4B;
      --site-border: #D6DEF0;
      --site-primary: #6988E0;
      --site-on-primary: #000000;
      --site-secondary: #C78D68;
      --site-on-secondary: #000000;
      --site-accent: #A1A97F;
      --site-on-accent: #000000;
      --site-success: #22C55E;
      --site-warning: #F59E0B;
      --site-error: #EF4444;
      --site-info: #3B82F6;
      --color-bg: var(--site-bg);
      --color-surface: var(--site-surface);
      --color-text: var(--site-text);
      --color-muted: var(--site-muted);
      --color-border: var(--site-border);
      --color-primary: var(--site-primary);
      --color-on-primary: var(--site-on-primary);
      --color-secondary: var(--site-secondary);
      --color-on-secondary: var(--site-on-secondary);
      --color-accent: var(--site-accent);
      --color-on-accent: var(--site-on-accent);
      --color-success: var(--site-success);
      --color-warning: var(--site-warning);
      --color-error: var(--site-error);
      --color-info: var(--site-info);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --site-bg: #060C20;
        --site-surface: #0F1830;
        --site-text: #E3E4E8;
        --site-muted: #ACB1BE;
        --site-border: #262D40;
        --site-primary: #8EA5DD;
        --site-on-primary: #000000;
        --site-secondary: #DCB69F;
        --site-on-secondary: #000000;
        --site-accent: #C2C9A2;
        --site-on-accent: #000000;
        --site-success: #22C55E;
        --site-warning: #F59E0B;
        --site-error: #EF4444;
        --site-info: #3B82F6;
      }
    }

/* Extracted from multiplayer-hosting.html. */
:root {
    --bs-primary: var(--site-primary);
    --bs-secondary: var(--site-secondary);
    --bs-success: var(--site-success);
    --bs-info: var(--site-info);
    --bs-warning: var(--site-warning);
    --bs-danger: var(--site-error);
    --bs-body-bg: var(--site-bg);
    --bs-body-color: var(--site-text);
    --bs-border-color: var(--site-border);
    --bs-secondary-color: var(--site-muted);
    --bs-tertiary-bg: var(--site-surface);
  }

/* Extracted from multiplayer-hosting.html. */
* { box-sizing: border-box }

    html { scroll-behavior: smooth }

    body {
      margin: 0;
      background-color: var(--site-bg);
      color: var(--site-text);
      font-family: 'Roboto', system-ui, -apple-system, sans-serif;
      font-weight: 300;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4 {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      color: var(--site-text);
      line-height: 1.2;
      margin: 0 0 .5rem;
    }

    p { margin: 0 0 1rem }
    button { font-family: inherit }

    .top {
      position: sticky;
      top: 0;
      height: 72px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32px;
      z-index: 10;
      background-color: var(--site-bg);
      border-bottom: 1px solid var(--site-border);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      color: var(--site-text);
      text-decoration: none;
    }

    .logoMark {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: .95rem;
      color: var(--site-on-primary);
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    }

    .logoText {
      display: flex;
      flex-direction: column;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1rem;
      line-height: 1.05;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .logoTail {
      margin-top: 3px;
      font-family: 'Roboto', sans-serif;
      font-size: .66rem;
      font-weight: 400;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--site-muted);
    }

    .navPanel {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .top nav {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .top nav a {
      font-size: .95rem;
      background: none;
      border: 0;
      padding: 8px 12px;
      border-radius: 8px;
      color: var(--site-text);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .top nav a:hover {
      background-color: var(--site-surface);
      color: var(--site-primary);
    }

    .topCta {
      display: inline-flex;
      align-items: center;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      white-space: nowrap;
      font-size: .9rem;
      font-weight: 700;
      text-decoration: none;
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-primary), var(--site-secondary));
      transition: background .2s ease;
    }

    .topCta:hover {
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-secondary), var(--site-accent));
    }

    .navToggle {
      display: none;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-surface);
      color: var(--site-text);
      font-size: 1rem;
      cursor: pointer;
    }

    .intro {
      max-width: 1100px;
      margin: 48px auto 32px;
      padding: 0 24px;
    }

    .lib {
      max-width: 1100px;
      margin: 0 auto 80px;
      padding: 0 24px;
    }

    .tabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .tabs button {
      padding: 14px 24px;
      border: 2px solid var(--site-border);
      border-bottom: 0;
      border-radius: 12px 12px 0 0;
      white-space: nowrap;
      opacity: .65;
      cursor: pointer;
      font-weight: 700;
      color: var(--site-text);
      background-color: var(--site-surface);
    }

    .tabs button[aria-selected=true] {
      opacity: 1;
      margin-bottom: -2px;
      padding-bottom: 16px;
      position: relative;
      z-index: 2;
      background-color: var(--site-bg);
    }

    .drawer {
      border: 2px solid var(--site-border);
      border-radius: 0 12px 12px 12px;
      padding: 40px;
      min-height: 420px;
      height: auto;
      background-color: var(--site-bg);
    }

    [role=tabpanel][hidden] { display: none !important }

    .grid-a {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-auto-rows: minmax(160px, auto);
      gap: 20px;
    }

    .grid-a .tall { grid-row: span 2 }

    .tileCard {
      padding: 20px;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-surface);
      transition: background-color .2s ease;
    }

    .tileCard:hover { background-color: var(--site-bg) }

    @media (max-width: 880px) {
      .top { padding: 0 18px }
      .navToggle { display: inline-flex }
      .navPanel {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 18px 20px;
        background-color: var(--site-bg);
        border-bottom: 1px solid var(--site-border);
      }
      .navPanel.isOpen { display: flex }
      .top nav { flex-direction: column; align-items: stretch }
      .top nav a { padding: 11px 12px }
      .topCta { justify-content: center }
    }

    @media (max-width: 720px) {
      .intro { margin: 32px auto 24px }
      .drawer { padding: 24px; border-radius: 0 0 12px 12px }
      .grid-a { grid-template-columns: 1fr }
      .grid-a .tall { grid-row: auto }
    }

/* Extracted from multiplayer-hosting.html. */
.hostingPage {
      color: var(--color-text);
      background: var(--color-bg);
    }

    .hostingPage .intro {
      max-width: 1100px;
      margin: 42px auto 28px;
      padding: 0 24px;
    }

    .hostingPage .eyebrow {
      margin: 0 0 8px;
      color: var(--color-muted);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .hostingPage h1 {
      margin-bottom: 8px;
      font-size: clamp(2rem, 4vw, 3.2rem);
    }

    .hostingPage .introCopy {
      max-width: 720px;
      margin-bottom: 16px;
      color: var(--color-muted);
    }

    .hostingPage .searchWrap {
      position: relative;
      max-width: 430px;
    }

    .hostingPage .searchWrap i {
      position: absolute;
      top: 50%;
      left: 14px;
      color: var(--color-muted);
      transform: translateY(-50%);
    }

    .hostingPage .searchInput {
      width: 100%;
      padding: 11px 14px 11px 42px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      color: var(--color-text);
      background: var(--color-surface);
      font: inherit;
    }

    .hostingPage .searchInput:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    .hostingPage .lib {
      max-width: 1100px;
      margin: 0 auto 48px;
      padding: 0 24px;
    }

    .hostingPage .tabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .hostingPage .tabs::-webkit-scrollbar {
      display: none;
    }

    .hostingPage .tabs button {
      padding: 12px 20px 13px;
      border: 1px solid var(--color-border);
      border-bottom: 0;
      border-radius: 8px 8px 0 0;
      color: var(--color-text);
      background: var(--color-surface);
      font: inherit;
      font-weight: 700;
      opacity: .72;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color .2s ease, opacity .2s ease;
    }

    .hostingPage .tabs button:hover {
      background: var(--color-bg);
      opacity: 1;
    }

    .hostingPage .tabs button[aria-selected="true"] {
      position: relative;
      z-index: 2;
      margin-bottom: -1px;
      padding-bottom: 14px;
      border-width: 2px;
      border-bottom: 0;
      background: var(--color-bg);
      opacity: 1;
    }

    .hostingPage .drawer {
      min-height: 420px;
      padding: 34px;
      border: 2px solid var(--color-border);
      border-radius: 0 8px 8px 8px;
      color: var(--color-text);
      background: var(--color-bg);
    }

    .hostingPage [role="tabpanel"][hidden] {
      display: none !important;
    }

    .hostingPage .panelHeading {
      max-width: 720px;
      margin-bottom: 24px;
    }

    .hostingPage .panelHeading p {
      margin-bottom: 0;
      color: var(--color-muted);
    }

    .hostingPage .hostingGrid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-auto-rows: minmax(150px, auto);
      gap: 16px;
    }

    .hostingPage .featureTile,
    .hostingPage .capabilityTile,
    .hostingPage .integrationItem,
    .hostingPage .stepCard,
    .hostingPage .platformNote {
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      transition: background-color .2s ease;
    }

    .hostingPage .featureTile:hover,
    .hostingPage .capabilityTile:hover,
    .hostingPage .integrationItem:hover,
    .hostingPage .stepCard:hover,
    .hostingPage .platformNote:hover,
    .hostingPage .regionRow:hover {
      background: var(--color-bg);
    }

    .hostingPage .featureTile {
      grid-row: span 2;
      padding: 24px;
    }

    .hostingPage .capabilityTile {
      padding: 18px;
    }

    .hostingPage .iconTile {
      display: grid;
      width: 44px;
      height: 44px;
      margin-bottom: 14px;
      place-items: center;
      border: 1px solid var(--color-border);
      border-radius: 12px;
      color: var(--color-text);
      background: var(--color-bg);
      font-size: 1.05rem;
    }

    .hostingPage .featureTile h3,
    .hostingPage .capabilityTile h3,
    .hostingPage .integrationItem h3,
    .hostingPage .stepCard h3,
    .hostingPage .platformNote h3 {
      margin-bottom: 7px;
      font-size: 1.14rem;
    }

    .hostingPage .featureTile p,
    .hostingPage .capabilityTile p,
    .hostingPage .integrationItem p,
    .hostingPage .stepCard p,
    .hostingPage .platformNote p {
      margin-bottom: 0;
      color: var(--color-muted);
    }

    .hostingPage .capacityPill,
    .hostingPage .latencyBadge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 10px;
      border: 1px solid var(--color-border);
      border-radius: 999px;
      color: var(--color-text);
      background: var(--color-bg);
      font-size: .82rem;
      font-weight: 700;
    }

    .hostingPage .featureTile .capacityPill {
      margin: 8px 0 18px;
    }

    .hostingPage .regionList {
      display: grid;
      gap: 10px;
    }

    .hostingPage .regionRow {
      display: grid;
      grid-template-columns: minmax(145px, .8fr) auto minmax(220px, 1.6fr);
      align-items: center;
      gap: 16px;
      padding: 16px 18px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      transition: background-color .2s ease;
    }

    .hostingPage .regionName {
      font-weight: 700;
    }

    .hostingPage .regionRow p {
      margin: 0;
      color: var(--color-muted);
      font-size: .94rem;
    }

    .hostingPage .regionCaveat {
      margin: 16px 0 0;
      color: var(--color-muted);
      font-size: .9rem;
    }

    .hostingPage .integrationGrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .hostingPage .integrationItem {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 17px;
    }

    .hostingPage .integrationItem .iconTile {
      flex: 0 0 44px;
      margin: 0;
    }

    .hostingPage .integrationItem h3 {
      margin-top: 1px;
    }

    .hostingPage .integrationAction {
      margin: 20px 0 0;
      color: var(--color-muted);
    }

    .hostingPage .integrationAction a,
    .hostingPage .contactLinks a {
      color: var(--color-text);
      font-weight: 700;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    .hostingPage .stepTrack {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin: 28px 0 0;
    }

    .hostingPage .stepCard {
      position: relative;
      padding: 19px;
    }

    .hostingPage .stepNumber {
      display: grid;
      width: 36px;
      height: 36px;
      margin-bottom: 16px;
      place-items: center;
      border-radius: 12px;
      color: var(--color-on-primary);
      background: var(--color-primary);
      font-weight: 700;
    }

    .hostingPage .stepOwner {
      display: block;
      margin-top: 12px;
      color: var(--color-muted);
      font-size: .82rem;
      font-weight: 700;
    }

    .hostingPage .stagingNote {
      margin: 18px 0 0;
      padding: 14px 16px;
      border-left: 3px solid var(--color-secondary);
      color: var(--color-muted);
      background: var(--color-surface);
    }

    .hostingPage .platformLayout {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 24px;
      align-items: stretch;
    }

    .hostingPage .platformLead {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 28px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      color: var(--color-on-primary);
      background: linear-gradient(125deg, var(--color-primary), var(--color-secondary));
    }

    .hostingPage .platformLead h3 {
      max-width: 470px;
      color: var(--color-on-primary);
      font-size: clamp(1.45rem, 3vw, 2.1rem);
    }

    .hostingPage .platformLead p {
      max-width: 500px;
      margin-bottom: 0;
      color: var(--color-on-primary);
    }

    .hostingPage .glassIcon {
      display: grid;
      width: 48px;
      height: 48px;
      margin-bottom: 18px;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .35);
      border-radius: 14px;
      color: var(--color-on-primary);
      background: rgba(255, 255, 255, .18);
      backdrop-filter: blur(10px);
    }

    .hostingPage .platformNotes {
      display: grid;
      gap: 10px;
    }

    .hostingPage .platformNote {
      padding: 15px 17px;
    }

    .hostingPage .platformNote h3 {
      font-size: 1rem;
    }

    .hostingPage .contact {
      display: flex;
      max-width: 1052px;
      margin: 0 auto 48px;
      padding: 22px 24px;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
    }

    .hostingPage .contact h2 {
      margin-bottom: 4px;
      font-size: 1.35rem;
    }

    .hostingPage .contact p {
      margin: 0;
      color: var(--color-muted);
    }

    .hostingPage .contactLinks {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 20px;
    }

    .hostingPage .contactButton {
      display: inline-flex;
      padding: 10px 16px;
      align-items: center;
      border: 0;
      border-radius: 8px;
      color: var(--color-on-primary);
      background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
      font-weight: 700;
      text-decoration: none;
      transition: background .2s ease, transform .2s ease;
    }

    .hostingPage .contactButton:hover {
      color: var(--color-on-primary);
      background: linear-gradient(120deg, var(--color-secondary), var(--color-accent));
      transform: translateY(-2px);
    }

    @media (max-width: 800px) {
      .hostingPage .drawer {
        padding: 26px;
      }

      .hostingPage .hostingGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .hostingPage .featureTile {
        grid-row: span 2;
      }

      .hostingPage .stepTrack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .hostingPage .regionRow {
        grid-template-columns: minmax(130px, 1fr) auto;
      }

      .hostingPage .regionRow p {
        grid-column: 1 / -1;
      }

      .hostingPage .contact {
        margin-right: 24px;
        margin-left: 24px;
      }
    }

    @media (max-width: 560px) {
      .hostingPage .intro {
        margin-top: 30px;
        padding: 0 20px;
      }

      .hostingPage .lib {
        padding: 0 20px;
      }

      .hostingPage .tabs button {
        padding: 11px 16px 12px;
      }

      .hostingPage .drawer {
        padding: 22px 18px;
        border-radius: 0 0 8px 8px;
      }

      .hostingPage .hostingGrid,
      .hostingPage .integrationGrid,
      .hostingPage .stepTrack,
      .hostingPage .platformLayout {
        grid-template-columns: 1fr;
      }

      .hostingPage .featureTile {
        grid-row: auto;
      }

      .hostingPage .regionRow {
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
        padding: 14px;
      }

      .hostingPage .regionName {
        grid-column: 1;
      }

      .hostingPage .regionRow p {
        grid-column: 1 / -1;
      }

      .hostingPage .contact {
        margin: 0 20px 40px;
        padding: 20px;
        align-items: flex-start;
        flex-direction: column;
      }

      .hostingPage .contactLinks {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hostingPage *,
      .hostingPage *::before,
      .hostingPage *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }

/* Extracted from multiplayer-hosting.html. */
.siteFooter {
      padding: 44px 0 0;
      font-weight: 300;
      color: var(--site-text);
      background-color: var(--site-surface);
      border-top: 1px solid var(--site-border);
    }

    .footerInner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .footerGrid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1.4fr;
      gap: 34px;
      padding-bottom: 34px;
    }

    .footerBrand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--site-text);
    }

    .footerMark {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: .9rem;
      color: var(--site-on-primary);
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    }

    .footerStrip {
      margin: 0 0 8px;
      max-width: 40ch;
      font-size: .9rem;
      color: var(--site-muted);
    }

    .footerHead {
      margin: 0 0 14px;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: .95rem;
      color: var(--site-text);
    }

    .footerLinks, .footerContact {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footerContact li {
      font-size: .92rem;
      line-height: 1.5;
      color: var(--site-muted);
    }

    .footerLinks a, .footerContact a {
      display: inline-block;
      padding: 3px 8px;
      margin-left: -8px;
      border-radius: 8px;
      font-size: .92rem;
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerLinks a:hover, .footerContact a:hover {
      background-color: var(--site-bg);
      color: var(--site-primary);
    }

    .footerBottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 0;
      border-top: 1px solid var(--site-border);
    }

    .footerCopy {
      margin: 0;
      font-size: .84rem;
      color: var(--site-muted);
    }

    .footerLegal {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .footerLegal a {
      padding: 3px 8px;
      border-radius: 8px;
      font-size: .84rem;
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerLegal a:hover {
      background-color: var(--site-bg);
      color: var(--site-primary);
    }

    .footerSocial { display: flex; gap: 8px }

    .footerSocial a {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-bg);
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerSocial a:hover {
      background-color: var(--site-primary);
      color: var(--site-on-primary);
      border-color: var(--site-primary);
    }

    .cookieBar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 30;
      padding: 14px 24px;
      background-color: var(--site-surface);
      border-top: 1px solid var(--site-border);
    }

    .cookieInner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .cookieText {
      margin: 0;
      font-size: .88rem;
      color: var(--site-muted);
    }

    .cookieBtn {
      padding: 10px 22px;
      border: 0;
      border-radius: 8px;
      font-size: .88rem;
      font-weight: 700;
      cursor: pointer;
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-primary), var(--site-accent));
    }

    @media (max-width: 880px) {
      .footerGrid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 26px }
      .footerBottom { flex-direction: column; align-items: flex-start }
      .cookieInner { flex-direction: column; align-items: flex-start }
    }

/* Extracted from player-support.html. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@300;400;700&display=block');

    :root {
      --site-bg: #F8FAFF;
      --site-surface: #EAF0FF;
      --site-text: #0F1119;
      --site-muted: #343A4B;
      --site-border: #D6DEF0;
      --site-primary: #6988E0;
      --site-on-primary: #000000;
      --site-secondary: #C78D68;
      --site-on-secondary: #000000;
      --site-accent: #A1A97F;
      --site-on-accent: #000000;
      --site-success: #22C55E;
      --site-warning: #F59E0B;
      --site-error: #EF4444;
      --site-info: #3B82F6;
      --color-bg: var(--site-bg);
      --color-surface: var(--site-surface);
      --color-text: var(--site-text);
      --color-muted: var(--site-muted);
      --color-border: var(--site-border);
      --color-primary: var(--site-primary);
      --color-on-primary: var(--site-on-primary);
      --color-secondary: var(--site-secondary);
      --color-on-secondary: var(--site-on-secondary);
      --color-accent: var(--site-accent);
      --color-on-accent: var(--site-on-accent);
      --color-success: var(--site-success);
      --color-warning: var(--site-warning);
      --color-error: var(--site-error);
      --color-info: var(--site-info);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --site-bg: #060C20;
        --site-surface: #0F1830;
        --site-text: #E3E4E8;
        --site-muted: #ACB1BE;
        --site-border: #262D40;
        --site-primary: #8EA5DD;
        --site-on-primary: #000000;
        --site-secondary: #DCB69F;
        --site-on-secondary: #000000;
        --site-accent: #C2C9A2;
        --site-on-accent: #000000;
        --site-success: #22C55E;
        --site-warning: #F59E0B;
        --site-error: #EF4444;
        --site-info: #3B82F6;
      }
    }

/* Extracted from player-support.html. */
:root {
    --bs-primary: var(--site-primary);
    --bs-secondary: var(--site-secondary);
    --bs-success: var(--site-success);
    --bs-info: var(--site-info);
    --bs-warning: var(--site-warning);
    --bs-danger: var(--site-error);
    --bs-body-bg: var(--site-bg);
    --bs-body-color: var(--site-text);
    --bs-border-color: var(--site-border);
    --bs-secondary-color: var(--site-muted);
    --bs-tertiary-bg: var(--site-surface);
  }

/* Extracted from player-support.html. */
* { box-sizing: border-box }

    html { scroll-behavior: smooth }

    body {
      margin: 0;
      background-color: var(--site-bg);
      color: var(--site-text);
      font-family: 'Roboto', system-ui, -apple-system, sans-serif;
      font-weight: 300;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4 {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      color: var(--site-text);
      line-height: 1.2;
      margin: 0 0 .5rem;
    }

    p { margin: 0 0 1rem }
    button { font-family: inherit }

    .top {
      position: sticky;
      top: 0;
      height: 72px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32px;
      z-index: 10;
      background-color: var(--site-bg);
      border-bottom: 1px solid var(--site-border);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      color: var(--site-text);
      text-decoration: none;
    }

    .logoMark {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: .95rem;
      color: var(--site-on-primary);
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    }

    .logoText {
      display: flex;
      flex-direction: column;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1rem;
      line-height: 1.05;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .logoTail {
      margin-top: 3px;
      font-family: 'Roboto', sans-serif;
      font-size: .66rem;
      font-weight: 400;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--site-muted);
    }

    .navPanel {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .top nav {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .top nav a {
      font-size: .95rem;
      background: none;
      border: 0;
      padding: 8px 12px;
      border-radius: 8px;
      color: var(--site-text);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .top nav a:hover {
      background-color: var(--site-surface);
      color: var(--site-primary);
    }

    .topCta {
      display: inline-flex;
      align-items: center;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      white-space: nowrap;
      font-size: .9rem;
      font-weight: 700;
      text-decoration: none;
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-primary), var(--site-secondary));
      transition: background .2s ease;
    }

    .topCta:hover {
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-secondary), var(--site-accent));
    }

    .navToggle {
      display: none;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-surface);
      color: var(--site-text);
      font-size: 1rem;
      cursor: pointer;
    }

    .intro {
      max-width: 1100px;
      margin: 48px auto 32px;
      padding: 0 24px;
    }

    .lib {
      max-width: 1100px;
      margin: 0 auto 80px;
      padding: 0 24px;
    }

    .tabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .tabs button {
      padding: 14px 24px;
      border: 2px solid var(--site-border);
      border-bottom: 0;
      border-radius: 12px 12px 0 0;
      white-space: nowrap;
      opacity: .65;
      cursor: pointer;
      font-weight: 700;
      color: var(--site-text);
      background-color: var(--site-surface);
    }

    .tabs button[aria-selected=true] {
      opacity: 1;
      margin-bottom: -2px;
      padding-bottom: 16px;
      position: relative;
      z-index: 2;
      background-color: var(--site-bg);
    }

    .drawer {
      border: 2px solid var(--site-border);
      border-radius: 0 12px 12px 12px;
      padding: 40px;
      min-height: 420px;
      height: auto;
      background-color: var(--site-bg);
    }

    [role=tabpanel][hidden] { display: none !important }

    .grid-a {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-auto-rows: minmax(160px, auto);
      gap: 20px;
    }

    .grid-a .tall { grid-row: span 2 }

    .tileCard {
      padding: 20px;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-surface);
      transition: background-color .2s ease;
    }

    .tileCard:hover { background-color: var(--site-bg) }

    @media (max-width: 880px) {
      .top { padding: 0 18px }
      .navToggle { display: inline-flex }
      .navPanel {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 18px 20px;
        background-color: var(--site-bg);
        border-bottom: 1px solid var(--site-border);
      }
      .navPanel.isOpen { display: flex }
      .top nav { flex-direction: column; align-items: stretch }
      .top nav a { padding: 11px 12px }
      .topCta { justify-content: center }
    }

    @media (max-width: 720px) {
      .intro { margin: 32px auto 24px }
      .drawer { padding: 24px; border-radius: 0 0 12px 12px }
      .grid-a { grid-template-columns: 1fr }
      .grid-a .tall { grid-row: auto }
    }

/* Extracted from player-support.html. */
.supportPage {
      color: var(--color-text);
      background: var(--color-bg);
      font-family: 'Roboto', system-ui, sans-serif;
      font-weight: 300;
      line-height: 1.65;
    }

    .supportPage h1,
    .supportPage h2,
    .supportPage h3 {
      color: var(--color-text);
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      line-height: 1.2;
    }

    .supportPage h1 {
      margin: 0 0 .55rem;
      font-size: clamp(2rem, 4vw, 3rem);
    }

    .supportPage h2 {
      margin: 0 0 .5rem;
      font-size: clamp(1.45rem, 2.7vw, 2rem);
    }

    .supportPage p {
      margin: 0 0 .8rem;
    }

    .supportIntro,
    .supportLibrary,
    .contactRow {
      width: min(1100px, 100%);
      margin-right: auto;
      margin-left: auto;
      padding-right: 24px;
      padding-left: 24px;
    }

    .supportIntro {
      margin-top: 42px;
      margin-bottom: 30px;
    }

    .supportEyebrow {
      margin-bottom: .55rem;
      color: var(--color-muted);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .supportLead {
      max-width: 730px;
      margin-bottom: 1.2rem;
      color: var(--color-muted);
      font-size: 1.05rem;
    }

    .supportSearch {
      display: flex;
      max-width: 560px;
      align-items: center;
      gap: 10px;
    }

    .supportSearch input {
      width: 100%;
      min-width: 0;
      padding: 11px 14px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      color: var(--color-text);
      background: var(--color-surface);
      font: inherit;
    }

    .supportSearch input::placeholder {
      color: var(--color-muted);
    }

    .searchFeedback {
      min-height: 1.4em;
      margin: .35rem 0 0;
      color: var(--color-muted);
      font-size: .88rem;
    }

    .supportLibrary {
      margin-bottom: 48px;
    }

    .supportTabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .supportTabs::-webkit-scrollbar {
      display: none;
    }

    .supportTabs button {
      flex: 0 0 auto;
      padding: 12px 20px 13px;
      border: 2px solid var(--color-border);
      border-bottom: 0;
      border-radius: 12px 12px 0 0;
      color: var(--color-text);
      background: var(--color-surface);
      font: inherit;
      font-weight: 700;
      opacity: .7;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color .18s ease, opacity .18s ease;
    }

    .supportTabs button:hover {
      background: var(--color-bg);
      opacity: 1;
    }

    .supportTabs button[aria-selected=true] {
      position: relative;
      z-index: 2;
      margin-bottom: -2px;
      padding-bottom: 15px;
      background: var(--color-bg);
      opacity: 1;
    }

    .supportDrawer {
      min-height: 420px;
      padding: 36px;
      border: 2px solid var(--color-border);
      border-radius: 0 12px 12px 12px;
      color: var(--color-text);
      background: var(--color-bg);
    }

    [role=tabpanel][hidden] {
      display: none !important;
    }

    .panelIntro {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 22px;
    }

    .panelIntro p {
      max-width: 590px;
      margin: 0;
      color: var(--color-muted);
    }

    .guideGrid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-auto-rows: minmax(150px, auto);
      gap: 16px;
    }

    .guideCard,
    .toolEntry,
    .quoteCard,
    .contactDetails {
      border: 1px solid var(--color-border);
      border-radius: 8px;
      color: var(--color-text);
      background: var(--color-surface);
      transition: background-color .2s ease;
    }

    .guideCard:hover,
    .toolEntry:hover,
    .quoteCard:hover {
      background: var(--color-bg);
    }

    .guideCard {
      padding: 20px;
    }

    .guideCard.featuredGuide {
      grid-row: span 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      padding: 25px;
    }

    .guideCard h3,
    .toolEntry h3 {
      margin: 0 0 .45rem;
      font-family: 'Roboto', system-ui, sans-serif;
      font-size: 1.08rem;
      font-weight: 700;
    }

    .guideCard p,
    .toolEntry p {
      margin: 0;
      color: var(--color-muted);
      font-size: .94rem;
    }

    .iconTile {
      display: inline-grid;
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      place-items: center;
      margin-bottom: 14px;
      border: 1px solid var(--color-border);
      border-radius: 14px;
      color: var(--color-text);
      background: var(--color-bg);
      font-size: 1rem;
    }

    .featuredGuide .iconTile {
      width: 52px;
      height: 52px;
      flex-basis: 52px;
      font-size: 1.25rem;
    }

    .guideTag {
      display: inline-block;
      margin-bottom: 12px;
      padding: 4px 9px;
      border-radius: 999px;
      color: var(--color-on-accent);
      background: var(--color-accent);
      font-size: .76rem;
      font-weight: 700;
    }

    .textLink {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--color-text);
      font-weight: 700;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    .textLink:hover {
      color: var(--color-muted);
    }

    .updateList {
      max-width: 850px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .updateRow {
      display: grid;
      grid-template-columns: 120px 112px minmax(0, 1fr);
      align-items: start;
      gap: 18px;
      padding: 17px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .updateRow:first-child {
      border-top: 1px solid var(--color-border);
    }

    .updateDate {
      color: var(--color-muted);
      font-size: .9rem;
      font-weight: 700;
    }

    .versionTag {
      width: fit-content;
      padding: 3px 9px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      font-size: .8rem;
      font-weight: 700;
    }

    .updateSummary {
      margin: 0;
    }

    .toolGrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .toolEntry {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px;
    }

    .toolEntry .iconTile {
      margin: 0;
    }

    .toolEntry a {
      color: var(--color-text);
      font-weight: 700;
      text-underline-offset: 3px;
    }

    .faqList {
      max-width: 760px;
    }

    .faqList details {
      border-bottom: 1px solid var(--color-border);
    }

    .faqList details:first-child {
      border-top: 1px solid var(--color-border);
    }

    .faqList summary {
      padding: 15px 4px;
      color: var(--color-text);
      font-weight: 700;
      cursor: pointer;
      list-style: none;
    }

    .faqList summary::-webkit-details-marker {
      display: none;
    }

    .faqList summary::after {
      float: right;
      color: var(--color-muted);
      content: '+';
      font-size: 1.2rem;
      line-height: 1;
    }

    .faqList details[open] summary::after {
      content: '−';
    }

    .faqList details p {
      max-width: 700px;
      padding: 0 4px 14px;
      color: var(--color-muted);
    }

    .quoteLayout {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 20px;
    }

    .quoteCard {
      padding: 20px;
    }

    .leadQuote {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 260px;
      padding: 28px;
    }

    .leadQuote blockquote {
      margin: 10px 0 24px;
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.35rem, 2.5vw, 1.85rem);
      line-height: 1.4;
    }

    .quoteByline {
      margin: 0;
      color: var(--color-muted);
      font-size: .9rem;
      font-weight: 700;
    }

    .smallQuotes {
      display: grid;
      gap: 12px;
    }

    .smallQuotes .quoteCard {
      padding: 15px 17px;
    }

    .smallQuotes blockquote {
      margin: 0 0 8px;
      font-size: .95rem;
    }

    .contactRow {
      display: grid;
      grid-template-columns: minmax(220px, .72fr) minmax(0, 1.5fr);
      gap: 30px;
      margin-bottom: 64px;
    }

    .contactHeading {
      padding-top: 8px;
    }

    .contactHeading p {
      max-width: 300px;
      color: var(--color-muted);
    }

    .contactDetails {
      margin-top: 16px;
      padding: 14px 16px;
    }

    .contactDetails address {
      margin: 0 0 8px;
      color: var(--color-muted);
      font-style: normal;
      font-size: .9rem;
    }

    .contactDetails a {
      color: var(--color-text);
      font-weight: 700;
      text-underline-offset: 3px;
    }

    .contactForm {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 13px;
      align-content: start;
    }

    .contactForm label {
      display: grid;
      gap: 5px;
      color: var(--color-text);
      font-size: .88rem;
      font-weight: 700;
    }

    .contactForm .fullField {
      grid-column: 1 / -1;
    }

    .contactForm input,
    .contactForm textarea {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      color: var(--color-text);
      background: var(--color-surface);
      font: inherit;
      font-weight: 300;
    }

    .contactForm textarea {
      min-height: 110px;
      resize: vertical;
    }

    .gradientButton {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      color: var(--color-on-primary);
      background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      transition: background .2s ease, transform .2s ease;
    }

    .gradientButton:hover {
      color: var(--color-on-primary);
      background: linear-gradient(120deg, var(--color-secondary), var(--color-accent));
      transform: translateY(-1px);
    }

    .contactForm .gradientButton {
      justify-self: start;
    }

    @media (max-width: 720px) {
      .supportIntro {
        margin-top: 30px;
        margin-bottom: 24px;
      }

      .supportDrawer {
        padding: 24px;
        border-radius: 0 0 12px 12px;
      }

      .guideGrid {
        grid-template-columns: 1fr;
      }

      .guideCard.featuredGuide {
        grid-row: auto;
      }

      .panelIntro {
        display: block;
      }

      .panelIntro p {
        margin-top: 8px;
      }

      .toolGrid,
      .quoteLayout,
      .contactRow {
        grid-template-columns: 1fr;
      }

      .contactRow {
        gap: 18px;
      }

      .contactForm .gradientButton {
        width: 100%;
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 480px) {
      .supportIntro,
      .supportLibrary,
      .contactRow {
        padding-right: 16px;
        padding-left: 16px;
      }

      .supportTabs button {
        padding-right: 16px;
        padding-left: 16px;
      }

      .supportDrawer {
        padding: 19px;
      }

      .updateRow {
        grid-template-columns: 1fr auto;
        gap: 7px 12px;
      }

      .updateSummary {
        grid-column: 1 / -1;
      }

      .contactForm {
        grid-template-columns: 1fr;
      }

      .contactForm .fullField {
        grid-column: auto;
      }

      .contactForm .gradientButton {
        grid-column: auto;
      }
    }

/* Extracted from player-support.html. */
.siteFooter {
      padding: 44px 0 0;
      font-weight: 300;
      color: var(--site-text);
      background-color: var(--site-surface);
      border-top: 1px solid var(--site-border);
    }

    .footerInner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .footerGrid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1.4fr;
      gap: 34px;
      padding-bottom: 34px;
    }

    .footerBrand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--site-text);
    }

    .footerMark {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: .9rem;
      color: var(--site-on-primary);
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    }

    .footerStrip {
      margin: 0 0 8px;
      max-width: 40ch;
      font-size: .9rem;
      color: var(--site-muted);
    }

    .footerHead {
      margin: 0 0 14px;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: .95rem;
      color: var(--site-text);
    }

    .footerLinks, .footerContact {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footerContact li {
      font-size: .92rem;
      line-height: 1.5;
      color: var(--site-muted);
    }

    .footerLinks a, .footerContact a {
      display: inline-block;
      padding: 3px 8px;
      margin-left: -8px;
      border-radius: 8px;
      font-size: .92rem;
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerLinks a:hover, .footerContact a:hover {
      background-color: var(--site-bg);
      color: var(--site-primary);
    }

    .footerBottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 0;
      border-top: 1px solid var(--site-border);
    }

    .footerCopy {
      margin: 0;
      font-size: .84rem;
      color: var(--site-muted);
    }

    .footerLegal {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .footerLegal a {
      padding: 3px 8px;
      border-radius: 8px;
      font-size: .84rem;
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerLegal a:hover {
      background-color: var(--site-bg);
      color: var(--site-primary);
    }

    .footerSocial { display: flex; gap: 8px }

    .footerSocial a {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-bg);
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerSocial a:hover {
      background-color: var(--site-primary);
      color: var(--site-on-primary);
      border-color: var(--site-primary);
    }

    .cookieBar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 30;
      padding: 14px 24px;
      background-color: var(--site-surface);
      border-top: 1px solid var(--site-border);
    }

    .cookieInner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .cookieText {
      margin: 0;
      font-size: .88rem;
      color: var(--site-muted);
    }

    .cookieBtn {
      padding: 10px 22px;
      border: 0;
      border-radius: 8px;
      font-size: .88rem;
      font-weight: 700;
      cursor: pointer;
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-primary), var(--site-accent));
    }

    @media (max-width: 880px) {
      .footerGrid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 26px }
      .footerBottom { flex-direction: column; align-items: flex-start }
      .cookieInner { flex-direction: column; align-items: flex-start }
    }

/* Extracted from privacy-policy.html. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@300;400;700&display=block');

    :root {
      --site-bg: #F8FAFF;
      --site-surface: #EAF0FF;
      --site-text: #0F1119;
      --site-muted: #343A4B;
      --site-border: #D6DEF0;
      --site-primary: #6988E0;
      --site-on-primary: #000000;
      --site-secondary: #C78D68;
      --site-on-secondary: #000000;
      --site-accent: #A1A97F;
      --site-on-accent: #000000;
      --site-success: #22C55E;
      --site-warning: #F59E0B;
      --site-error: #EF4444;
      --site-info: #3B82F6;
      --color-bg: var(--site-bg);
      --color-surface: var(--site-surface);
      --color-text: var(--site-text);
      --color-muted: var(--site-muted);
      --color-border: var(--site-border);
      --color-primary: var(--site-primary);
      --color-on-primary: var(--site-on-primary);
      --color-secondary: var(--site-secondary);
      --color-on-secondary: var(--site-on-secondary);
      --color-accent: var(--site-accent);
      --color-on-accent: var(--site-on-accent);
      --color-success: var(--site-success);
      --color-warning: var(--site-warning);
      --color-error: var(--site-error);
      --color-info: var(--site-info);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --site-bg: #060C20;
        --site-surface: #0F1830;
        --site-text: #E3E4E8;
        --site-muted: #ACB1BE;
        --site-border: #262D40;
        --site-primary: #8EA5DD;
        --site-on-primary: #000000;
        --site-secondary: #DCB69F;
        --site-on-secondary: #000000;
        --site-accent: #C2C9A2;
        --site-on-accent: #000000;
        --site-success: #22C55E;
        --site-warning: #F59E0B;
        --site-error: #EF4444;
        --site-info: #3B82F6;
      }
    }

/* Extracted from privacy-policy.html. */
:root {
    --bs-primary: var(--site-primary);
    --bs-secondary: var(--site-secondary);
    --bs-success: var(--site-success);
    --bs-info: var(--site-info);
    --bs-warning: var(--site-warning);
    --bs-danger: var(--site-error);
    --bs-body-bg: var(--site-bg);
    --bs-body-color: var(--site-text);
    --bs-border-color: var(--site-border);
    --bs-secondary-color: var(--site-muted);
    --bs-tertiary-bg: var(--site-surface);
  }

/* Extracted from privacy-policy.html. */
* { box-sizing: border-box }

    html { scroll-behavior: smooth }

    body {
      margin: 0;
      background-color: var(--site-bg);
      color: var(--site-text);
      font-family: 'Roboto', system-ui, -apple-system, sans-serif;
      font-weight: 300;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4 {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      color: var(--site-text);
      line-height: 1.2;
      margin: 0 0 .5rem;
    }

    p { margin: 0 0 1rem }
    button { font-family: inherit }

    .top {
      position: sticky;
      top: 0;
      height: 72px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32px;
      z-index: 10;
      background-color: var(--site-bg);
      border-bottom: 1px solid var(--site-border);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      color: var(--site-text);
      text-decoration: none;
    }

    .logoMark {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: .95rem;
      color: var(--site-on-primary);
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    }

    .logoText {
      display: flex;
      flex-direction: column;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1rem;
      line-height: 1.05;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .logoTail {
      margin-top: 3px;
      font-family: 'Roboto', sans-serif;
      font-size: .66rem;
      font-weight: 400;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--site-muted);
    }

    .navPanel {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .top nav {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .top nav a {
      font-size: .95rem;
      background: none;
      border: 0;
      padding: 8px 12px;
      border-radius: 8px;
      color: var(--site-text);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .top nav a:hover {
      background-color: var(--site-surface);
      color: var(--site-primary);
    }

    .topCta {
      display: inline-flex;
      align-items: center;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      white-space: nowrap;
      font-size: .9rem;
      font-weight: 700;
      text-decoration: none;
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-primary), var(--site-secondary));
      transition: background .2s ease;
    }

    .topCta:hover {
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-secondary), var(--site-accent));
    }

    .navToggle {
      display: none;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-surface);
      color: var(--site-text);
      font-size: 1rem;
      cursor: pointer;
    }

    .intro {
      max-width: 1100px;
      margin: 48px auto 32px;
      padding: 0 24px;
    }

    .lib {
      max-width: 1100px;
      margin: 0 auto 80px;
      padding: 0 24px;
    }

    .tabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .tabs button {
      padding: 14px 24px;
      border: 2px solid var(--site-border);
      border-bottom: 0;
      border-radius: 12px 12px 0 0;
      white-space: nowrap;
      opacity: .65;
      cursor: pointer;
      font-weight: 700;
      color: var(--site-text);
      background-color: var(--site-surface);
    }

    .tabs button[aria-selected=true] {
      opacity: 1;
      margin-bottom: -2px;
      padding-bottom: 16px;
      position: relative;
      z-index: 2;
      background-color: var(--site-bg);
    }

    .drawer {
      border: 2px solid var(--site-border);
      border-radius: 0 12px 12px 12px;
      padding: 40px;
      min-height: 420px;
      height: auto;
      background-color: var(--site-bg);
    }

    [role=tabpanel][hidden] { display: none !important }

    .grid-a {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-auto-rows: minmax(160px, auto);
      gap: 20px;
    }

    .grid-a .tall { grid-row: span 2 }

    .tileCard {
      padding: 20px;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-surface);
      transition: background-color .2s ease;
    }

    .tileCard:hover { background-color: var(--site-bg) }

    @media (max-width: 880px) {
      .top { padding: 0 18px }
      .navToggle { display: inline-flex }
      .navPanel {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 18px 20px;
        background-color: var(--site-bg);
        border-bottom: 1px solid var(--site-border);
      }
      .navPanel.isOpen { display: flex }
      .top nav { flex-direction: column; align-items: stretch }
      .top nav a { padding: 11px 12px }
      .topCta { justify-content: center }
    }

    @media (max-width: 720px) {
      .intro { margin: 32px auto 24px }
      .drawer { padding: 24px; border-radius: 0 0 12px 12px }
      .grid-a { grid-template-columns: 1fr }
      .grid-a .tall { grid-row: auto }
    }

/* Extracted from privacy-policy.html. */
.privacyPage {
      color: var(--color-text);
      background: var(--color-bg);
    }

    .privacyPage .intro {
      max-width: 1100px;
      margin: 38px auto 28px;
      padding: 0 24px;
    }

    .privacyPage h1,
    .privacyPage h2,
    .privacyPage h3 {
      color: var(--color-text);
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      line-height: 1.2;
    }

    .privacyPage p {
      color: var(--color-muted);
      font-weight: 300;
    }

    .privacyPage .eyebrow {
      margin: 0 0 8px;
      color: var(--color-muted);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .privacyPage .intro h1 {
      margin: 0 0 10px;
      font-size: clamp(2rem, 5vw, 3.15rem);
    }

    .privacyPage .introText {
      max-width: 690px;
      margin: 0 0 18px;
      font-size: 1.05rem;
    }

    .privacyPage .policySearch {
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 460px;
      padding: 10px 14px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
    }

    .privacyPage .policySearch i {
      color: var(--color-muted);
    }

    .privacyPage .policySearch input {
      width: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--color-text);
      font: inherit;
    }

    .privacyPage .policySearch input::placeholder {
      color: var(--color-muted);
      opacity: .85;
    }

    .privacyPage .searchStatus {
      min-height: 1.4em;
      margin: 5px 0 0;
      color: var(--color-muted);
      font-size: .84rem;
    }

    .privacyPage .lib {
      max-width: 1100px;
      margin: 0 auto 48px;
      padding: 0 24px;
    }

    .privacyPage .tabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .privacyPage .tabs::-webkit-scrollbar {
      display: none;
    }

    .privacyPage .tabs button {
      flex: 0 0 auto;
      padding: 12px 20px 13px;
      border: 2px solid var(--color-border);
      border-bottom: 0;
      border-radius: 8px 8px 0 0;
      background: var(--color-surface);
      color: var(--color-text);
      cursor: pointer;
      font: inherit;
      font-size: .92rem;
      font-weight: 700;
      opacity: .72;
      white-space: nowrap;
      transition: background-color .18s ease, opacity .18s ease;
    }

    .privacyPage .tabs button:hover {
      background: var(--color-bg);
    }

    .privacyPage .tabs button[aria-selected="true"] {
      position: relative;
      z-index: 2;
      margin-bottom: -2px;
      padding-bottom: 15px;
      background: var(--color-bg);
      opacity: 1;
    }

    .privacyPage .tabs button:focus-visible,
    .privacyPage a:focus-visible,
    .privacyPage summary:focus-visible,
    .privacyPage input:focus-visible {
      outline: 3px solid var(--color-primary);
      outline-offset: 3px;
    }

    .privacyPage .drawer {
      min-height: 420px;
      padding: 34px;
      border: 2px solid var(--color-border);
      border-radius: 0 8px 8px 8px;
      background: var(--color-bg);
      color: var(--color-text);
    }

    .privacyPage [role="tabpanel"][hidden] {
      display: none !important;
    }

    .privacyPage .panelIntro {
      max-width: 720px;
      margin-bottom: 24px;
    }

    .privacyPage .panelIntro h2 {
      margin: 0 0 8px;
      font-size: clamp(1.45rem, 3vw, 2rem);
    }

    .privacyPage .panelIntro p {
      margin: 0;
    }

    .privacyPage .overviewGrid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-auto-rows: minmax(150px, auto);
      gap: 16px;
    }

    .privacyPage .policyCard {
      padding: 19px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
      transition: background-color .2s ease;
    }

    .privacyPage .policyCard:hover {
      background: var(--color-bg);
    }

    .privacyPage .policyCard h3 {
      margin: 0 0 9px;
      font-size: 1.08rem;
    }

    .privacyPage .policyCard p {
      margin: 0;
      font-size: .94rem;
    }

    .privacyPage .policyCard.featured {
      grid-row: span 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 24px;
    }

    .privacyPage .featureMark,
    .privacyPage .iconTile {
      display: inline-grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border: 1px solid var(--color-border);
      border-radius: 14px;
      background: var(--color-bg);
      color: var(--color-primary);
    }

    .privacyPage .featureMark {
      margin-bottom: 20px;
    }

    .privacyPage .featureMark i,
    .privacyPage .iconTile i {
      font-size: 1.1rem;
    }

    .privacyPage .timeline {
      display: grid;
      gap: 0;
      max-width: 850px;
    }

    .privacyPage .timelineRow {
      display: grid;
      grid-template-columns: 145px 125px minmax(0, 1fr);
      align-items: start;
      gap: 18px;
      padding: 17px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .privacyPage .timelineRow:first-child {
      border-top: 1px solid var(--color-border);
    }

    .privacyPage .timelineWhen {
      color: var(--color-muted);
      font-size: .9rem;
      font-weight: 700;
    }

    .privacyPage .dataTag {
      display: inline-block;
      width: fit-content;
      padding: 4px 9px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
      font-size: .78rem;
      font-weight: 700;
    }

    .privacyPage .timelineRow p {
      margin: 0;
      font-size: .95rem;
    }

    .privacyPage .toolsGrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      max-width: 850px;
    }

    .privacyPage .toolItem {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      align-items: start;
      gap: 14px;
      padding: 17px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
      transition: background-color .2s ease;
    }

    .privacyPage .toolItem:hover {
      background: var(--color-bg);
    }

    .privacyPage .toolItem h3 {
      margin: 0 0 5px;
      font-size: 1rem;
    }

    .privacyPage .toolItem p {
      margin: 0;
      font-size: .9rem;
    }

    .privacyPage .actionLink {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin: 18px 0 0 1px;
      color: var(--color-text);
      font-size: .92rem;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .privacyPage .faqList {
      display: grid;
      gap: 10px;
      max-width: 760px;
    }

    .privacyPage .faqList details {
      padding: 16px 18px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
      transition: background-color .2s ease;
    }

    .privacyPage .faqList details:hover,
    .privacyPage .faqList details[open] {
      background: var(--color-bg);
    }

    .privacyPage .faqList summary {
      cursor: pointer;
      font-weight: 700;
    }

    .privacyPage .faqList details p {
      margin: 10px 0 0;
      font-size: .94rem;
    }

    .privacyPage .approachGrid {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: 22px;
      align-items: stretch;
    }

    .privacyPage .privacyQuote {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 27px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
    }

    .privacyPage .privacyQuote blockquote {
      margin: 0;
      color: var(--color-text);
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      line-height: 1.35;
    }

    .privacyPage .privacyQuote p {
      margin: 24px 0 0;
      font-size: .92rem;
    }

    .privacyPage .principleStack {
      display: grid;
      gap: 12px;
    }

    .privacyPage .principle {
      padding: 16px 18px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
      transition: background-color .2s ease;
    }

    .privacyPage .principle:hover {
      background: var(--color-bg);
    }

    .privacyPage .principle p {
      margin: 0;
      font-size: .93rem;
    }

    .privacyPage .contactRow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      max-width: 1052px;
      margin: 0 auto 60px;
      padding: 22px 24px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
    }

    .privacyPage .contactRow h2 {
      margin: 0 0 5px;
      font-size: 1.4rem;
    }

    .privacyPage .contactRow p {
      margin: 0;
      font-size: .92rem;
    }

    .privacyPage .contactActions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 12px 18px;
    }

    .privacyPage .contactActions a {
      color: var(--color-text);
      font-size: .92rem;
      font-weight: 700;
      text-decoration: none;
    }

    .privacyPage .contactActions .contactButton {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 16px;
      border-radius: 8px;
      background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
      color: var(--color-on-primary);
      transition: filter .2s ease;
    }

    .privacyPage .contactActions .contactButton:hover {
      filter: brightness(1.06);
    }

    @media (max-width: 880px) {
      .privacyPage .drawer {
        padding: 26px;
      }

      .privacyPage .contactRow {
        margin-right: 24px;
        margin-left: 24px;
      }
    }

    @media (max-width: 720px) {
      .privacyPage .intro {
        margin: 30px auto 23px;
      }

      .privacyPage .lib {
        margin-bottom: 34px;
      }

      .privacyPage .tabs button {
        padding-right: 16px;
        padding-left: 16px;
      }

      .privacyPage .drawer {
        min-height: 0;
        padding: 22px;
        border-radius: 0 0 8px 8px;
      }

      .privacyPage .overviewGrid {
        grid-template-columns: 1fr;
      }

      .privacyPage .policyCard.featured {
        grid-row: auto;
      }

      .privacyPage .timelineRow {
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
      }

      .privacyPage .timelineRow p {
        grid-column: 1 / -1;
      }

      .privacyPage .toolsGrid,
      .privacyPage .approachGrid {
        grid-template-columns: 1fr;
      }

      .privacyPage .contactRow {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
        margin-bottom: 40px;
      }

      .privacyPage .contactActions {
        justify-content: flex-start;
      }
    }

/* Extracted from privacy-policy.html. */
.siteFooter {
      padding: 44px 0 0;
      font-weight: 300;
      color: var(--site-text);
      background-color: var(--site-surface);
      border-top: 1px solid var(--site-border);
    }

    .footerInner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .footerGrid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1.4fr;
      gap: 34px;
      padding-bottom: 34px;
    }

    .footerBrand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--site-text);
    }

    .footerMark {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: .9rem;
      color: var(--site-on-primary);
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    }

    .footerStrip {
      margin: 0 0 8px;
      max-width: 40ch;
      font-size: .9rem;
      color: var(--site-muted);
    }

    .footerHead {
      margin: 0 0 14px;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: .95rem;
      color: var(--site-text);
    }

    .footerLinks, .footerContact {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footerContact li {
      font-size: .92rem;
      line-height: 1.5;
      color: var(--site-muted);
    }

    .footerLinks a, .footerContact a {
      display: inline-block;
      padding: 3px 8px;
      margin-left: -8px;
      border-radius: 8px;
      font-size: .92rem;
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerLinks a:hover, .footerContact a:hover {
      background-color: var(--site-bg);
      color: var(--site-primary);
    }

    .footerBottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 0;
      border-top: 1px solid var(--site-border);
    }

    .footerCopy {
      margin: 0;
      font-size: .84rem;
      color: var(--site-muted);
    }

    .footerLegal {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .footerLegal a {
      padding: 3px 8px;
      border-radius: 8px;
      font-size: .84rem;
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerLegal a:hover {
      background-color: var(--site-bg);
      color: var(--site-primary);
    }

    .footerSocial { display: flex; gap: 8px }

    .footerSocial a {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-bg);
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerSocial a:hover {
      background-color: var(--site-primary);
      color: var(--site-on-primary);
      border-color: var(--site-primary);
    }

    .cookieBar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 30;
      padding: 14px 24px;
      background-color: var(--site-surface);
      border-top: 1px solid var(--site-border);
    }

    .cookieInner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .cookieText {
      margin: 0;
      font-size: .88rem;
      color: var(--site-muted);
    }

    .cookieBtn {
      padding: 10px 22px;
      border: 0;
      border-radius: 8px;
      font-size: .88rem;
      font-weight: 700;
      cursor: pointer;
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-primary), var(--site-accent));
    }

    @media (max-width: 880px) {
      .footerGrid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 26px }
      .footerBottom { flex-direction: column; align-items: flex-start }
      .cookieInner { flex-direction: column; align-items: flex-start }
    }

/* Extracted from terms-and-conditions.html. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@300;400;700&display=block');

    :root {
      --site-bg: #F8FAFF;
      --site-surface: #EAF0FF;
      --site-text: #0F1119;
      --site-muted: #343A4B;
      --site-border: #D6DEF0;
      --site-primary: #6988E0;
      --site-on-primary: #000000;
      --site-secondary: #C78D68;
      --site-on-secondary: #000000;
      --site-accent: #A1A97F;
      --site-on-accent: #000000;
      --site-success: #22C55E;
      --site-warning: #F59E0B;
      --site-error: #EF4444;
      --site-info: #3B82F6;
      --color-bg: var(--site-bg);
      --color-surface: var(--site-surface);
      --color-text: var(--site-text);
      --color-muted: var(--site-muted);
      --color-border: var(--site-border);
      --color-primary: var(--site-primary);
      --color-on-primary: var(--site-on-primary);
      --color-secondary: var(--site-secondary);
      --color-on-secondary: var(--site-on-secondary);
      --color-accent: var(--site-accent);
      --color-on-accent: var(--site-on-accent);
      --color-success: var(--site-success);
      --color-warning: var(--site-warning);
      --color-error: var(--site-error);
      --color-info: var(--site-info);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --site-bg: #060C20;
        --site-surface: #0F1830;
        --site-text: #E3E4E8;
        --site-muted: #ACB1BE;
        --site-border: #262D40;
        --site-primary: #8EA5DD;
        --site-on-primary: #000000;
        --site-secondary: #DCB69F;
        --site-on-secondary: #000000;
        --site-accent: #C2C9A2;
        --site-on-accent: #000000;
        --site-success: #22C55E;
        --site-warning: #F59E0B;
        --site-error: #EF4444;
        --site-info: #3B82F6;
      }
    }

/* Extracted from terms-and-conditions.html. */
:root {
    --bs-primary: var(--site-primary);
    --bs-secondary: var(--site-secondary);
    --bs-success: var(--site-success);
    --bs-info: var(--site-info);
    --bs-warning: var(--site-warning);
    --bs-danger: var(--site-error);
    --bs-body-bg: var(--site-bg);
    --bs-body-color: var(--site-text);
    --bs-border-color: var(--site-border);
    --bs-secondary-color: var(--site-muted);
    --bs-tertiary-bg: var(--site-surface);
  }

/* Extracted from terms-and-conditions.html. */
* { box-sizing: border-box }

    html { scroll-behavior: smooth }

    body {
      margin: 0;
      background-color: var(--site-bg);
      color: var(--site-text);
      font-family: 'Roboto', system-ui, -apple-system, sans-serif;
      font-weight: 300;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4 {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      color: var(--site-text);
      line-height: 1.2;
      margin: 0 0 .5rem;
    }

    p { margin: 0 0 1rem }
    button { font-family: inherit }

    .top {
      position: sticky;
      top: 0;
      height: 72px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32px;
      z-index: 10;
      background-color: var(--site-bg);
      border-bottom: 1px solid var(--site-border);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      color: var(--site-text);
      text-decoration: none;
    }

    .logoMark {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: .95rem;
      color: var(--site-on-primary);
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    }

    .logoText {
      display: flex;
      flex-direction: column;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1rem;
      line-height: 1.05;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .logoTail {
      margin-top: 3px;
      font-family: 'Roboto', sans-serif;
      font-size: .66rem;
      font-weight: 400;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--site-muted);
    }

    .navPanel {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .top nav {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .top nav a {
      font-size: .95rem;
      background: none;
      border: 0;
      padding: 8px 12px;
      border-radius: 8px;
      color: var(--site-text);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .top nav a:hover {
      background-color: var(--site-surface);
      color: var(--site-primary);
    }

    .topCta {
      display: inline-flex;
      align-items: center;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      white-space: nowrap;
      font-size: .9rem;
      font-weight: 700;
      text-decoration: none;
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-primary), var(--site-secondary));
      transition: background .2s ease;
    }

    .topCta:hover {
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-secondary), var(--site-accent));
    }

    .navToggle {
      display: none;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-surface);
      color: var(--site-text);
      font-size: 1rem;
      cursor: pointer;
    }

    .intro {
      max-width: 1100px;
      margin: 48px auto 32px;
      padding: 0 24px;
    }

    .lib {
      max-width: 1100px;
      margin: 0 auto 80px;
      padding: 0 24px;
    }

    .tabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .tabs button {
      padding: 14px 24px;
      border: 2px solid var(--site-border);
      border-bottom: 0;
      border-radius: 12px 12px 0 0;
      white-space: nowrap;
      opacity: .65;
      cursor: pointer;
      font-weight: 700;
      color: var(--site-text);
      background-color: var(--site-surface);
    }

    .tabs button[aria-selected=true] {
      opacity: 1;
      margin-bottom: -2px;
      padding-bottom: 16px;
      position: relative;
      z-index: 2;
      background-color: var(--site-bg);
    }

    .drawer {
      border: 2px solid var(--site-border);
      border-radius: 0 12px 12px 12px;
      padding: 40px;
      min-height: 420px;
      height: auto;
      background-color: var(--site-bg);
    }

    [role=tabpanel][hidden] { display: none !important }

    .grid-a {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-auto-rows: minmax(160px, auto);
      gap: 20px;
    }

    .grid-a .tall { grid-row: span 2 }

    .tileCard {
      padding: 20px;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-surface);
      transition: background-color .2s ease;
    }

    .tileCard:hover { background-color: var(--site-bg) }

    @media (max-width: 880px) {
      .top { padding: 0 18px }
      .navToggle { display: inline-flex }
      .navPanel {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 18px 20px;
        background-color: var(--site-bg);
        border-bottom: 1px solid var(--site-border);
      }
      .navPanel.isOpen { display: flex }
      .top nav { flex-direction: column; align-items: stretch }
      .top nav a { padding: 11px 12px }
      .topCta { justify-content: center }
    }

    @media (max-width: 720px) {
      .intro { margin: 32px auto 24px }
      .drawer { padding: 24px; border-radius: 0 0 12px 12px }
      .grid-a { grid-template-columns: 1fr }
      .grid-a .tall { grid-row: auto }
    }

/* Extracted from terms-and-conditions.html. */
.termsPage {
      color: var(--color-text);
      background: var(--color-bg);
    }

    .termsPage .intro {
      max-width: 1100px;
      margin: 48px auto 32px;
      padding: 0 24px;
    }

    .termsPage .eyebrow {
      margin-bottom: 10px;
      color: var(--color-muted);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .termsPage h1,
    .termsPage h2,
    .termsPage h3 {
      color: var(--color-text);
      font-weight: 700;
    }

    .termsPage h1 {
      max-width: 760px;
      margin-bottom: 12px;
      font-size: clamp(2.25rem, 5vw, 3.6rem);
      letter-spacing: -.035em;
    }

    .termsPage h2 {
      margin-bottom: 18px;
      font-size: clamp(1.4rem, 3vw, 2rem);
    }

    .termsPage h3 {
      margin-bottom: 8px;
      font-size: 1.08rem;
    }

    .termsPage p {
      margin-bottom: 12px;
      color: var(--color-muted);
      font-weight: 300;
      line-height: 1.8;
    }

    .termsPage .introCopy {
      max-width: 700px;
      font-size: 1.05rem;
    }

    .termsPage .searchWrap {
      max-width: 420px;
      margin-top: 20px;
    }

    .termsPage .searchWrap label {
      display: block;
      margin-bottom: 6px;
      color: var(--color-muted);
      font-size: .9rem;
      font-weight: 700;
    }

    .termsPage .searchWrap input {
      width: 100%;
      padding: 11px 14px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      outline: none;
      background: var(--color-surface);
      color: var(--color-text);
      font: inherit;
    }

    .termsPage .searchWrap input:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 22%, transparent);
    }

    .termsPage .lib {
      max-width: 1100px;
      margin: 0 auto 54px;
      padding: 0 24px;
    }

    .termsPage .tabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .termsPage .tabs::-webkit-scrollbar {
      display: none;
    }

    .termsPage .tabs button {
      flex: 0 0 auto;
      padding: 13px 20px;
      border: 2px solid var(--color-border);
      border-bottom: 0;
      border-radius: 8px 8px 0 0;
      background: var(--color-surface);
      color: var(--color-text);
      cursor: pointer;
      font: inherit;
      font-weight: 700;
      opacity: .7;
      transition: background-color .18s ease, opacity .18s ease;
    }

    .termsPage .tabs button:hover {
      background: var(--color-bg);
      opacity: 1;
    }

    .termsPage .tabs button[aria-selected=true] {
      position: relative;
      z-index: 2;
      margin-bottom: -2px;
      padding-bottom: 15px;
      background: var(--color-bg);
      opacity: 1;
    }

    .termsPage .drawer {
      min-height: 420px;
      padding: 36px;
      border: 2px solid var(--color-border);
      border-radius: 0 8px 8px 8px;
      background: var(--color-bg);
      color: var(--color-text);
    }

    .termsPage [role=tabpanel][hidden] {
      display: none !important;
    }

    .termsPage .grid-a {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-auto-rows: minmax(150px, auto);
      gap: 16px;
      margin-bottom: 34px;
    }

    .termsPage .grid-a .tall {
      grid-row: span 2;
    }

    .termsPage .tileCard {
      padding: 20px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
      transition: background-color .18s ease;
    }

    .termsPage .tileCard:hover,
    .termsPage .worldCard:hover,
    .termsPage .noteCard:hover {
      background: var(--color-bg);
    }

    .termsPage .tileCard p:last-child,
    .termsPage .worldCard p:last-child,
    .termsPage .noteCard p:last-child {
      margin-bottom: 0;
    }

    .termsPage .legalCopy {
      max-width: 760px;
      margin: 0 auto;
    }

    .termsPage .legalItem {
      padding: 20px 0;
      border-top: 1px solid var(--color-border);
      scroll-margin-top: 24px;
    }

    .termsPage .legalItem:first-child {
      border-top: 0;
    }

    .termsPage .legalItem h3 {
      font-size: 1.16rem;
    }

    .termsPage .timeline {
      max-width: 800px;
      margin: 0 auto;
    }

    .termsPage .timelineRow {
      display: grid;
      grid-template-columns: 120px 130px 1fr;
      gap: 16px;
      align-items: start;
      padding: 20px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .termsPage .timelineRow:first-child {
      padding-top: 0;
    }

    .termsPage .timelineLabel {
      color: var(--color-muted);
      font-size: .92rem;
      font-weight: 700;
    }

    .termsPage .tag {
      display: inline-block;
      width: fit-content;
      padding: 4px 9px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
      font-size: .8rem;
      font-weight: 700;
    }

    .termsPage .twoColList {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      max-width: 900px;
      margin: 0 auto;
    }

    .termsPage .worldCard {
      padding: 18px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
      transition: background-color .18s ease;
    }

    .termsPage .worldCard h3 {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .termsPage .iconTile {
      display: inline-grid;
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      place-items: center;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-bg);
      color: var(--color-primary);
    }

    .termsPage .faqList {
      max-width: 760px;
      margin: 0 auto;
    }

    .termsPage .faqList details {
      padding: 16px 0;
      border-bottom: 1px solid var(--color-border);
    }

    .termsPage .faqList summary {
      color: var(--color-text);
      cursor: pointer;
      font-weight: 700;
    }

    .termsPage .faqList details p {
      margin: 10px 0 0;
    }

    .termsPage .policyLayout {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr);
      gap: 24px;
      align-items: start;
    }

    .termsPage .policyLead {
      padding: 26px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
    }

    .termsPage .policyLead blockquote {
      margin: 0;
      color: var(--color-text);
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.55;
    }

    .termsPage .policyLead p {
      margin-top: 16px;
    }

    .termsPage .noteStack {
      display: grid;
      gap: 12px;
    }

    .termsPage .noteCard {
      padding: 16px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
      transition: background-color .18s ease;
    }

    .termsPage .contactRow {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      max-width: 1052px;
      margin: 0 auto 64px;
      padding: 22px 24px;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      background: var(--color-surface);
      color: var(--color-text);
    }

    .termsPage .contactRow h2 {
      margin: 0;
      font-size: 1.3rem;
    }

    .termsPage .contactRow p {
      margin: 4px 0 0;
    }

    .termsPage .contactLinks {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 20px;
      align-items: center;
    }

    .termsPage .contactLinks a {
      color: var(--color-text);
      text-decoration-color: var(--color-primary);
      text-underline-offset: 3px;
      overflow-wrap: anywhere;
    }

    .termsPage .contactCta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 16px;
      border: 0;
      border-radius: 8px;
      background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
      color: var(--color-on-primary);
      font-weight: 700;
      text-decoration: none;
      transition: background .2s ease, transform .2s ease;
    }

    .termsPage .contactCta:hover {
      background: linear-gradient(120deg, var(--color-secondary), var(--color-accent));
      color: var(--color-on-secondary);
      transform: translateY(-1px);
    }

    @media (max-width: 720px) {
      .termsPage .intro {
        margin: 32px auto 24px;
      }

      .termsPage .drawer {
        padding: 22px;
        border-radius: 0 0 8px 8px;
      }

      .termsPage .grid-a,
      .termsPage .twoColList,
      .termsPage .policyLayout {
        grid-template-columns: 1fr;
      }

      .termsPage .grid-a .tall {
        grid-row: auto;
      }

      .termsPage .timelineRow {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .termsPage .contactRow {
        align-items: flex-start;
        flex-direction: column;
        margin: 0 24px 44px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .termsPage *,
      .termsPage *::before,
      .termsPage *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }

/* Extracted from terms-and-conditions.html. */
.siteFooter {
      padding: 44px 0 0;
      font-weight: 300;
      color: var(--site-text);
      background-color: var(--site-surface);
      border-top: 1px solid var(--site-border);
    }

    .footerInner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .footerGrid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1.4fr;
      gap: 34px;
      padding-bottom: 34px;
    }

    .footerBrand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--site-text);
    }

    .footerMark {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: .9rem;
      color: var(--site-on-primary);
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    }

    .footerStrip {
      margin: 0 0 8px;
      max-width: 40ch;
      font-size: .9rem;
      color: var(--site-muted);
    }

    .footerHead {
      margin: 0 0 14px;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: .95rem;
      color: var(--site-text);
    }

    .footerLinks, .footerContact {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footerContact li {
      font-size: .92rem;
      line-height: 1.5;
      color: var(--site-muted);
    }

    .footerLinks a, .footerContact a {
      display: inline-block;
      padding: 3px 8px;
      margin-left: -8px;
      border-radius: 8px;
      font-size: .92rem;
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerLinks a:hover, .footerContact a:hover {
      background-color: var(--site-bg);
      color: var(--site-primary);
    }

    .footerBottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 0;
      border-top: 1px solid var(--site-border);
    }

    .footerCopy {
      margin: 0;
      font-size: .84rem;
      color: var(--site-muted);
    }

    .footerLegal {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .footerLegal a {
      padding: 3px 8px;
      border-radius: 8px;
      font-size: .84rem;
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerLegal a:hover {
      background-color: var(--site-bg);
      color: var(--site-primary);
    }

    .footerSocial { display: flex; gap: 8px }

    .footerSocial a {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--site-border);
      border-radius: 8px;
      background-color: var(--site-bg);
      color: var(--site-muted);
      text-decoration: none;
      transition: background-color .18s ease, color .18s ease;
    }

    .footerSocial a:hover {
      background-color: var(--site-primary);
      color: var(--site-on-primary);
      border-color: var(--site-primary);
    }

    .cookieBar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 30;
      padding: 14px 24px;
      background-color: var(--site-surface);
      border-top: 1px solid var(--site-border);
    }

    .cookieInner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .cookieText {
      margin: 0;
      font-size: .88rem;
      color: var(--site-muted);
    }

    .cookieBtn {
      padding: 10px 22px;
      border: 0;
      border-radius: 8px;
      font-size: .88rem;
      font-weight: 700;
      cursor: pointer;
      color: var(--site-on-primary);
      background: linear-gradient(120deg, var(--site-primary), var(--site-accent));
    }

    @media (max-width: 880px) {
      .footerGrid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 26px }
      .footerBottom { flex-direction: column; align-items: flex-start }
      .cookieInner { flex-direction: column; align-items: flex-start }
    }