@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=Rubik:wght@400&display=swap");
/* ════════════════════════════════════════════════════════════
   (The @import above has to stay on line 1 — browsers ignore an
   @import that appears after any other rule.)
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   ██  SECTION 1 — COLOUR
   ════════════════════════════════════════════════════════════
   Every colour on the site comes from here.

   First the palette: the handful of actual colours. Change one of
   these and everything using it follows.

   Then the token list: Circle's own colour variables, pointed at the
   palette. They are grouped, and every token in a group is the same
   colour — so the group is what you edit, not the individual line.

   Last, a short list of specific fixes for things no variable can
   reach.

   SOMETHING IS THE WRONG COLOUR?
     1. Right-click it -> Inspect.
     2. Look at its background-color or color in the Styles panel.
     3. If it says var(--something), add that name to the matching
        group below. If it shows a plain hex code instead, Circle
        hardcoded it — it needs its own rule at the end of this
        section.

   (Every line needs !important. Circle declares these on .dark and
   [data-theme="dark"], specificity (0,1,0), which beats a plain html
   selector (0,0,1) — without !important the lines do nothing at all.
   Circle's raw primitive scales are deliberately left alone; the
   loading-state rules cover what used to need them.)
   ════════════════════════════════════════════════════════════ */

  /* THE PALETTE — the only place real colours are written.
     Change one of these and everything using it follows. */
  :root {
    --primary-color: #0a0b0d;
    --secondary-color: #090b0e;
    --post-color: #111316;
    --hover-color: #15181c;
    --border-color: #343536;
    --brand-color: #70180d;
    --text-color: #F0F3F5;
    --text-muted-color: #A5A9AD;
    --link-color: #60A5FA;
  }

  /* ────────────────────────────────────────────
     CIRCLE'S COLOUR VARIABLES, BY GROUP
     Everything in a group shares one colour.
     ──────────────────────────────────────────── */
  html {
    /* PAGE — the background behind everything */
    --background-body: var(--secondary-color) !important;
    --background-body-fullscreen: var(--secondary-color) !important;
    --color-background-content-disabled: var(--secondary-color) !important;
    --color-background-secondary: var(--secondary-color) !important;
    --color-background-secondary-dark: var(--secondary-color) !important;
    --color-icon-inverse: var(--secondary-color) !important;
    --color-text-inverse: var(--secondary-color) !important;
    --comments-wrapper-background: var(--secondary-color) !important;
    --date-group-background: var(--secondary-color) !important;
    --trix-body-background: var(--secondary-color) !important;
    --tw-ring-offset-color: var(--secondary-color) !important;

    /* PANEL — the sidebar and top bar around the page */
    --color-community-header-background: var(--primary-color) !important;
    --color-community-sidebar-accent-background: var(--primary-color) !important;
    --color-community-sidebar-background: var(--primary-color) !important;
    --color-community-switcher-background: var(--primary-color) !important;
    --color-community-switcher-new-community-button-bg: var(--primary-color) !important;
    --community-switcher-bg: var(--primary-color) !important;
    --community-switcher-icon-bg: var(--primary-color) !important;
    --mobile-menu-sidebar-bg: var(--primary-color) !important;
    --multi-step-panel-navigation-panel-bg: var(--primary-color) !important;
    --sidebar-block-count-bg: var(--primary-color) !important;
    --sidebar-onboarding-block-bg: var(--primary-color) !important;

    /* RAISED — things sitting on top of the page: posts, cards,
       modals, dropdowns, inputs, tooltips, the editor */
    --background-primary-100: var(--post-color) !important;
    --button-background: var(--post-color) !important;
    --color-background-avatar-primary: var(--post-color) !important;
    --color-background-avatar-secondary: var(--post-color) !important;
    --color-background-badge: var(--post-color) !important;
    --color-background-banner: var(--post-color) !important;
    --color-background-dark: var(--post-color) !important;
    --color-background-dark-button: var(--post-color) !important;
    --color-background-disabled: var(--post-color) !important;
    --color-background-light-blue: var(--post-color) !important;
    --color-background-plus-banner: var(--post-color) !important;
    --color-background-primary: var(--post-color) !important;
    --color-background-text-editor-modifier: var(--post-color) !important;
    --color-chip-background: var(--post-color) !important;
    --color-support-widget-background: var(--post-color) !important;
    --dropdown-background: var(--post-color) !important;
    --input-background: var(--post-color) !important;
    --input-gray-background: var(--post-color) !important;
    --input-gray-darker-background: var(--post-color) !important;
    --new-notification-bg: var(--post-color) !important;
    --post-background: var(--post-color) !important;
    --post-headline-tag-background: var(--post-color) !important;
    --post-pinned-background: var(--post-color) !important;
    --post-post-background: var(--post-color) !important;
    --search-autocomplete-background: var(--post-color) !important;
    --search-bar-background: var(--post-color) !important;
    --tooltip-background: var(--post-color) !important;
    --trix-toolbar-background: var(--post-color) !important;
    --user-joined-bg: var(--post-color) !important;
    --user-profile-card-bg: var(--post-color) !important;

    /* HOVER — what things turn when you hover or select them
       (one step lighter than RAISED) */
    --color-background-active: var(--hover-color) !important;
    --color-background-highlight: var(--hover-color) !important;
    --color-background-hover: var(--hover-color) !important;
    --color-background-secondary-hover: var(--hover-color) !important;
    --color-background-selector-active: var(--hover-color) !important;
    --color-background-tertiary: var(--hover-color) !important;
    --color-background-text-editor-modifier-active: var(--hover-color) !important;
    --color-background-text-editor-modifier-hover: var(--hover-color) !important;
    --color-community-header-hover-background: var(--hover-color) !important;
    --color-message-highlight-background: var(--hover-color) !important;
    --color-stroke-background: var(--hover-color) !important;
    --comment-scroll-highlight-background: var(--hover-color) !important;
    --list-item-hover: var(--hover-color) !important;
    --neutral-highlight: var(--hover-color) !important;
    --neutral-highlight-hover: var(--hover-color) !important;
    --new-notification-hover-bg: var(--hover-color) !important;
    --search-autocomplete-link-hover-background: var(--hover-color) !important;
    --sidebar-link-highlight: var(--hover-color) !important;
    --tooltip-active: var(--hover-color) !important;

    /* BRAND — your red: branded buttons, the selected item, accents */
    --accent-color: var(--brand-color) !important;
    --background-brand-100: var(--brand-color) !important;
    --brand: var(--brand-color) !important;
    --brand-button-hover: var(--brand-color) !important;
    --brand-dark: var(--brand-color) !important;
    --brand-light: var(--brand-color) !important;
    --circle-primary: var(--brand-color) !important;
    --circle-primary-dark: var(--brand-color) !important;
    --color-background-badge-branded: var(--brand-color) !important;
    --color-background-brand: var(--brand-color) !important;
    --color-background-button-branded: var(--brand-color) !important;
    --color-background-slider-branded: var(--brand-color) !important;
    --color-border-badge-branded: var(--brand-color) !important;
    /* Circle's primary action button — Publish, Save, Create. These four sat
       in the panel/border groups, which is why Publish read as another dark
       panel rather than the main call to action. Hover lifts the same red
       rather than introducing a second one, so this still derives from the
       nine roots. */
    --color-border-circle-button: var(--brand-color) !important;
    --color-border-circle-button-hover: color-mix(in srgb, var(--brand-color) 82%, white) !important;
    --color-circle-button-background: var(--brand-color) !important;
    --color-circle-button-background-hover: color-mix(in srgb, var(--brand-color) 82%, white) !important;
    --color-community-header-active-background: var(--post-color) !important;
    --color-community-sidebar-active-background: var(--brand-color) !important;
    --color-community-sidebar-hover-background: var(--brand-color) !important;
    --color-ring-primary: var(--brand-color) !important;
    --color-text-icon-branded: var(--brand-color) !important;
    --color-text-link-branded: var(--brand-color) !important;
    --compass-branded-badge-bg: var(--brand-color) !important;
    --compass-branded-badge-bg-dark: var(--brand-color) !important;
    --compass-branded-badge-border: var(--brand-color) !important;
    --compass-branded-badge-border-dark: var(--brand-color) !important;
    --compass-branded-button-bg: var(--brand-color) !important;
    --compass-branded-button-bg-dark: var(--brand-color) !important;
    --compass-branded-icon: var(--brand-color) !important;
    --compass-branded-icon-dark: var(--brand-color) !important;
    --compass-branded-link-text: var(--brand-color) !important;
    --compass-branded-link-text-dark: var(--brand-color) !important;
    --icon-brand: var(--brand-color) !important;
    --input-focus: var(--brand-color) !important;
    --sidebar-link-active-bg: var(--brand-color) !important;
    --tw-ring-color: var(--brand-color) !important;
    --user-badge-bg: var(--brand-color) !important;

    /* TEXT — normal text and icons */
    --brand-button-text: var(--text-color) !important;
    --button-text-color: var(--text-color) !important;
    --color-background-inverse: var(--text-color) !important;
    --color-background-inverse-active: var(--text-color) !important;
    --color-background-inverse-hover: var(--text-color) !important;
    --color-border-accent: var(--text-color) !important;
    --color-border-darkest: var(--text-color) !important;
    --color-circle-button-text: var(--text-color) !important;
    --color-community-active-item-text-color: var(--text-color) !important;
    --color-community-header-active-text: var(--text-color) !important;
    --color-community-header-text: var(--text-color) !important;
    --color-community-sidebar-badge-text: var(--text-color) !important;
    --color-community-sidebar-icon: var(--text-color) !important;
    --color-community-sidebar-icon-hover: var(--text-color) !important;
    --color-community-sidebar-text: var(--text-color) !important;
    --color-community-sidebar-text-on-accent: var(--text-color) !important;
    --color-community-switcher-new-community-button-icon: var(--text-color) !important;
    --color-icon: var(--text-color) !important;
    --color-icon-hover: var(--text-color) !important;
    --color-icon-primary: var(--text-color) !important;
    --color-stroke-foreground: var(--text-color) !important;
    --color-text-badge: var(--text-color) !important;
    --color-text-badge-branded: var(--text-color) !important;
    --color-text-button-branded: var(--text-color) !important;
    --color-text-chip: var(--text-color) !important;
    --color-text-dark: var(--text-color) !important;
    --color-text-darkest: var(--text-color) !important;
    --color-text-feature-dark: var(--text-color) !important;
    --color-text-icon-text: var(--text-color) !important;
    --color-text-primary: var(--text-color) !important;
    --color-text-selector-active: var(--text-color) !important;
    --color-text-very-dark: var(--text-color) !important;
    --dropdown-icon: var(--text-color) !important;
    --dropdown-title: var(--text-color) !important;
    --header-sticky-nav: var(--text-color) !important;
    --icon-add: var(--text-color) !important;
    --icon-comment: var(--text-color) !important;
    --icon-fill-color: var(--text-color) !important;
    --icon-fill-color-hover: var(--text-color) !important;
    --icon-hover: var(--text-color) !important;
    --icon-like: var(--text-color) !important;
    --icon-mention: var(--text-color) !important;
    --icon-message: var(--text-color) !important;
    --icon-reply: var(--text-color) !important;
    --icon-stroke-color: var(--text-color) !important;
    --icon-stroke-color-hover: var(--text-color) !important;
    --label-description-color: var(--text-color) !important;
    --label-title-color: var(--text-color) !important;
    --modal-title: var(--text-color) !important;
    --post-text: var(--text-color) !important;
    --search-autocomplete-link-hover-text: var(--text-color) !important;
    --search-autocomplete-link-text: var(--text-color) !important;
    --sidebar-block-header: var(--text-color) !important;
    --sidebar-block-header-link: var(--text-color) !important;
    --sidebar-link: var(--text-color) !important;
    --sidebar-link-active: var(--text-color) !important;
    --sidebar-link-hover: var(--text-color) !important;
    --text-body: var(--text-color) !important;
    --text-body-100: var(--text-color) !important;
    --text-dark: var(--text-color) !important;
    --text-primary: var(--text-color) !important;
    --trix-editor-color: var(--text-color) !important;
    --user-badge: var(--text-color) !important;
    --user-text: var(--text-color) !important;

    /* TEXT MUTED — quieter text: timestamps, placeholders,
       disabled labels */
    --color-event-sidebar-item: var(--text-muted-color) !important;
    --color-icon-disabled: var(--text-muted-color) !important;
    --color-icon-secondary: var(--text-muted-color) !important;
    --color-icon-tertiary: var(--text-muted-color) !important;
    --color-text-date-blue: var(--text-muted-color) !important;
    --color-text-default: var(--text-muted-color) !important;
    --color-text-disabled: var(--text-muted-color) !important;
    --color-text-feature-light: var(--text-muted-color) !important;
    --color-text-light: var(--text-muted-color) !important;
    --color-text-lightest: var(--text-muted-color) !important;
    --color-text-placeholder: var(--text-muted-color) !important;
    --color-text-secondary: var(--text-muted-color) !important;
    --color-text-tertiary: var(--text-muted-color) !important;
    --color-text-timestamp-light: var(--text-muted-color) !important;
    --dropdown-descriptor: var(--text-muted-color) !important;
    --icon-muted: var(--text-muted-color) !important;
    --input-gray-explainer: var(--text-muted-color) !important;
    --input-gray-explainer-light: var(--text-muted-color) !important;
    --input-placeholder: var(--text-muted-color) !important;
    --label-description-text: var(--text-muted-color) !important;
    --placeholder-gray: var(--text-muted-color) !important;
    --placeholder-light-grey: var(--text-muted-color) !important;
    --sidebar-block-count: var(--text-muted-color) !important;
    --t-header-light-grey: var(--text-muted-color) !important;
    --text-body-90: var(--text-muted-color) !important;
    --text-secondary: var(--text-muted-color) !important;
    --text-secondary-hover: var(--text-muted-color) !important;
    --text-secondary-light: var(--text-muted-color) !important;
    --text-secondary-muted: var(--text-muted-color) !important;
    --user-joined: var(--text-muted-color) !important;
    --user-tagline: var(--text-muted-color) !important;

    /* BORDER — every border, divider and dividing line */
    --border-dark: var(--border-color) !important;
    --border-light: var(--border-color) !important;
    --border-light-hover: var(--border-color) !important;
    --border-lightest: var(--border-color) !important;
    --border-medium: var(--border-color) !important;
    --button-border: var(--border-color) !important;
    --color-border-active: var(--border-color) !important;
    --color-border-dark: var(--border-color) !important;
    --color-border-default: var(--border-color) !important;
    --color-border-disabled: var(--border-color) !important;
    --color-border-focus: var(--border-color) !important;
    --color-border-hover: var(--border-color) !important;
    --color-border-input: var(--border-color) !important;
    --color-border-light: var(--border-color) !important;
    --color-border-primary: var(--border-color) !important;
    --color-border-secondary: var(--border-color) !important;
    --color-border-secondary-dark: var(--border-color) !important;
    --color-border-selector-inactive: var(--border-color) !important;
    --color-border-tertiary: var(--border-color) !important;
    --color-border-very-dark: var(--border-color) !important;
    --color-community-sidebar-border: var(--border-color) !important;
    --color-ring-secondary: var(--border-color) !important;
    --comment-border-bottom: var(--border-color) !important;
    --divider-border: var(--border-color) !important;
    --mobile-menu-sidebar-border: var(--border-color) !important;
    --post-light-line: var(--border-color) !important;
    --post-pinned-border: var(--border-color) !important;
    --sidebar-block-border: var(--border-color) !important;
    --sidebar-onboarding-block-border: var(--border-color) !important;
    --trix-border: var(--border-color) !important;
    --user-profile-card-border: var(--border-color) !important;

    /* LINK — clickable text links */
    --color-text-blue-highlight: var(--link-color) !important;
    --color-text-link: var(--link-color) !important;
    --color-text-link-hover: var(--link-color) !important;
    --dropdown-link: var(--link-color) !important;
    --dropdown-link-hover: var(--link-color) !important;
    --user-location-links: var(--link-color) !important;

    /* OVERLAY — the dark layer that dims the page behind a modal */
    --color-background-modal-overlay: rgba(0, 0, 0, 0.6) !important;
    --color-background-overlay: rgba(0, 0, 0, 0.6) !important;
    --color-background-overlay-dark: rgba(0, 0, 0, 0.6) !important;
    --mobile-menu-overlay: rgba(0, 0, 0, 0.6) !important;
    --modal-bg: rgba(0, 0, 0, 0.6) !important;

    /* SHADOW — the soft shade under cards and popovers
       (much lighter than OVERLAY, which is meant to obscure) */
    --shadow-dark-color: rgba(0, 0, 0, 0.2) !important;
    --trix-shadow: rgba(0, 0, 0, 0.2) !important;

    /* DERIVED — same colours as the groups above, written differently
       because the token needs it
       (see-through variants, and RGB triples Circle wraps in rgba()
       — edit the palette, not these lines) */
    --background-brand-03: color-mix(in srgb, var(--brand-color) 3%, transparent) !important;
    --background-brand-10: color-mix(in srgb, var(--brand-color) 10%, transparent) !important;
    --background-brand-25: color-mix(in srgb, var(--brand-color) 25%, transparent) !important;
    --background-brand-33: color-mix(in srgb, var(--brand-color) 33%, transparent) !important;
    --background-brand-50: color-mix(in srgb, var(--brand-color) 50%, transparent) !important;
    --background-brand-66: color-mix(in srgb, var(--brand-color) 66%, transparent) !important;
    --background-brand-75: color-mix(in srgb, var(--brand-color) 75%, transparent) !important;
    --background-primary-10: color-mix(in srgb, var(--post-color) 10%, transparent) !important;
    --background-primary-15: color-mix(in srgb, var(--post-color) 15%, transparent) !important;
    --background-primary-25: color-mix(in srgb, var(--post-color) 25%, transparent) !important;
    --background-primary-33: color-mix(in srgb, var(--post-color) 33%, transparent) !important;
    --background-primary-50: color-mix(in srgb, var(--post-color) 50%, transparent) !important;
    --background-primary-66: color-mix(in srgb, var(--post-color) 66%, transparent) !important;
    --background-primary-75: color-mix(in srgb, var(--post-color) 75%, transparent) !important;
    --color-background-emoji-picker: 17, 19, 22 !important;   /* RGB triple: Circle wraps this in rgba() */
    --color-background-emoji-picker-hover: 22, 25, 29 !important;   /* RGB triple: Circle wraps this in rgba() */
    --text-body-10: color-mix(in srgb, var(--text-color) 10%, transparent) !important;
    --text-body-25: color-mix(in srgb, var(--text-color) 25%, transparent) !important;
    --text-body-33: color-mix(in srgb, var(--text-color) 33%, transparent) !important;
    --text-body-50: color-mix(in srgb, var(--text-color) 50%, transparent) !important;
    --text-body-66: color-mix(in srgb, var(--text-color) 66%, transparent) !important;
    --text-body-75: color-mix(in srgb, var(--text-color) 75%, transparent) !important;
  }

  /* ────────────────────────────────────────────
     SPECIFIC FIXES
     Things no variable can reach, so they need their own rule.

     ── Why a token change is not always enough ──
     Four distinct causes force per-element rules here. Identifying which
     one is in play decides the shape of the fix:

     1. SHARED TOKENS. Circle paints unrelated things with one variable,
        so changing the variable fixes one and breaks another.
     2. GHOST TOKENS. Tailwind arbitrary-property classes bake the hex
        into the class name itself, e.g.
        dark:[--color-background-primary:#34373D]. That shadows the
        variable on every descendant and cannot be reached by editing
        :root — it needs an attribute selector on the class.
     3. LAZY-LOADED CSS. Some panels ship stylesheets that arrive after
        ours, so document order favours them.
     4. LOADING STATES. A container renders one colour for a few frames
        and settles transparent. Invisible to any after-the-fact
        inspection; only frame-by-frame sampling finds it.

     ── Verified facts about this codebase ──
     Each cost a debugging round; none is guessable from reading the CSS:

     • #panel.community__content is laid out from x=0 across the full
       window width, underneath the sidebar. Both are position:static, so
       pointer hit-testing falls to paint order. See the sidebar rule in
       SECTION 3.
     • Circle's default-loader containers cause most "flicker" reports.
       One rule keyed on the loader replaces per-page selectors.
     • Rules keyed on post-hydration DOM do not fire on a direct URL
       load. A fix that works when switching tabs but not on a cold load
       is this, every time.
     • [data-testid="new-message"] is REMOVED from the DOM while the DM
       search box has text. Never use it as a scope anchor.
     • #scrollable-dms-div exists twice — once in the fullscreen DM view,
       once in the top-bar dropdown. A duplicate id, so a body-level
       :has() cannot tell them apart; scope by ancestor instead.
     • border-top-color will not move on bookmark rows even with
       !important on an id-plus-child selector, while border-top-width
       from the same declaration applies. Cause unidentified. Use
       box-shadow: inset for lines there.
     • [class*="h-[1px]"] and similar nested-bracket selectors are VALID
       CSS. Brackets inside a quoted attribute value are legal. If one
       matches nothing, the class genuinely is not on the page — do not
       rewrite the selector looking for a syntax bug.

     ── How to diagnose a new one ──
     Sample with requestAnimationFrame and diff against the settled
     state; transient elements are invisible to a console run after load.
     For anything on a cold load, record from a DevTools snippet before
     navigating, or throttle the network so the frame persists.
     Verify against real elements in the live DOM — never against
     synthetic nodes built from guessed class names, which only test
     whether the CSS parses.
     ──────────────────────────────────────────── */

  /* Circle has no variable for either of these. This is the background
     on page load and making the sidebar border border-color */
  html, body {
    background-color: var(--secondary-color);
  }

  [data-testid="standard-layout-v2-sidebar"] {
    border-right: 1px solid var(--border-color) !important;
  }

  /* Tooltips. Changing the color of the tooltips and tooltip arrow */

  /* Loading flashes. These all render the page colour for a moment while
     a section loads, which reads as a flicker against the post-coloured
     panel around them. (Spinners are hidden, so they show as bare
     blocks.) Covers settings sections, the profile page, and the
     dropdown panels behind the top right buttons. */
  html [class*="min-h-[600px]"],
  html [class*="h-max-screen-dynamic"],
  html textarea.form-control,
  html [class*="space-y-0.5"][class*="overflow-y-auto"],
  html .bg-tertiary.animate-pulse {
    background-color: var(--post-color) !important;
  }

  /* Empty-state boxes, e.g. "No blocked members" */
  html .bg-secondary.rounded-lg.border {
    background-color: var(--post-color) !important;
  }

  /* Settings content panel. It carries .bg-secondary and shows the page
     colour while a section swaps in, which is the flicker on the profile
     and privacy pages. */
  html [class*="ease-out"] > div.bg-secondary {
    background-color: var(--post-color) !important;
  }

  /* Dividers between notifications. They are 1px bars painted with a
     background, not borders, so they read as page colour instead of a line. */
  html .bg-secondary-dark[class*="h-[1px]"] {
    background-color: var(--border-color) !important;
  }

  /* Connections panel: the outer frame and the strip between the tabs
     take the hover colour, the tabs themselves take the card colour.
     (The selected tab hardcodes !bg-white dark:!bg-black, so the button
     rule is routed through the nav to outrank it.) */
  html [data-overlayscrollbars-contents]:has([data-testid^="connect-panel-tab-"]),
  html nav[data-testid="tab-list"]:has([data-testid^="connect-panel-tab-"]) {
    background-color: var(--hover-color) !important;
  }
  html nav[data-testid="tab-list"] button[data-testid^="connect-panel-tab-"] {
    background-color: var(--post-color) !important;
  }

  /* Settings forms. The form element itself renders the page colour for a
     moment while a section loads, then goes transparent — that is the
     flash on the profile and privacy pages. Pinning it to the card colour
     removes the flash and changes nothing once loaded, since the panel
     behind it is the same colour. */
  html .react-form > form {
    background-color: var(--post-color) !important;
  }

  /* Round "more actions" buttons sit on the page, so they need the card
     colour to separate from it (.bg-primary resolves to the page). */
  html button[data-testid="actions-dropdown-button"] {
    background-color: var(--post-color) !important;
  }
  html button[data-testid="actions-dropdown-button"]:hover {
    background-color: var(--hover-color) !important;
  }

  /* Notifications page. The container carries .bg-secondary AND
     .!bg-primary, and the important one wins, so it renders page colour. */
  html #notifications-full-page,
  html .main:has(#notifications-full-page),
  html .main:has(#notifications-full-page) .main__wrapper,
  html .main:has(#notifications-full-page) .main__content {
    background-color: var(--secondary-color) !important;
  }

  /* The selected filter pill — the round shape, not its text. */
  html #notifications-full-page button.rounded-full.bg-secondary {
    background-color: var(--hover-color) !important;
  }

  /* "Open in full page" — the section is already reachable, so the button
     is redundant. */
  html button[aria-label="Open in full page"] {
    display: none !important;
  }

  /* Checkboxes: your red behind a white tick.
     A checked box fills with currentColor, so the colour property has to
     move too — setting background-color alone leaves currentColor showing
     through. The tick itself is a white SVG baked into the background
     image by Tailwind's forms plugin, so it needs nothing.
     (#545861 is Circle's default unchecked border.) */
  html input[type="checkbox"] {
    color: var(--brand-color) !important;
    border-color: #545861 !important;
  }
  html input[type="checkbox"]:checked {
    background-color: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
  }

  /* ────────────────────────────────────────────
     DIRECT MESSAGES — the whole section, panel colour
     ────────────────────────────────────────────
     Everything from the sidebar to the chat area: the conversation list,
     the search bar, the Inbox/Unread tabs, the messages, the composer and
     the loading skeletons.

     (The scope is a fullscreen modal that contains a DM list. Both parts
     matter. #scrollable-dms-div survives typing in the search box, where
     the "New message" button is removed from the DOM — anchoring to that
     button made every rule here evaporate after one keystroke. And the
     top-bar Direct messages dropdown renders the same markup, including a
     second copy of #scrollable-dms-div, but it lives in
     #compass-portal-container rather than #fullscreen-modal-body, so
     naming the fullscreen body leaves the dropdown alone. Chat spaces
     reuse these testids too, which is why a scope is needed at all.) */

  html #fullscreen-modal-body:has(#scrollable-dms-div),
  html #fullscreen-modal-body:has(#scrollable-dms-div) [data-testid="chat-room-wrapper"],
  html #fullscreen-modal-body:has(#scrollable-dms-div) [data-testid="message-item"],
  html #fullscreen-modal-body:has(#scrollable-dms-div) [data-testid="tiptap-editor"],
  html #fullscreen-modal-body:has(#scrollable-dms-div) [data-testid="tab-group"],
  html #fullscreen-modal-body:has(#scrollable-dms-div) [data-testid="tab-panels"],
  html #fullscreen-modal-body:has(#scrollable-dms-div) [data-testid="tab-panel"],
  html #fullscreen-modal-body:has(#scrollable-dms-div) nav[data-testid="tab-list"],
  html #fullscreen-modal-body:has(#scrollable-dms-div) #scrollable-dms-div,
  html #fullscreen-modal-body:has(#scrollable-dms-div) .bg-primary,
  html #fullscreen-modal-body:has(#scrollable-dms-div) .bg-secondary,
  html #fullscreen-modal-body:has(#scrollable-dms-div) .bg-secondary-dark,
  html #fullscreen-modal-body:has(#scrollable-dms-div) [class*="skeleton-loader"],
  html #fullscreen-modal-body:has(#scrollable-dms-div) [class*="skeleton-loader"] div,
  html #fullscreen-modal-body:has(#scrollable-dms-div) .animate-pulse {
    background-color: var(--secondary-color) !important;
  }

  /* Conversation rows.

     Circle gives these hover:bg-secondary-dark and marks the open one with
     a plain bg-secondary-dark class, so both states resolve to the same
     colour and neither is visible. Split them apart here.

     The selected rule repeats each selector with :hover appended. Without
     that the two rules tie on specificity and the hover rule, being later,
     would take over the moment the pointer touched the open conversation. */
  html #fullscreen-modal-body:has(#scrollable-dms-div) button[data-testid="chat-room-dm-list"]:hover,
  html #fullscreen-modal-body:has(#scrollable-dms-div) button[data-testid="chat-room-dm-list"]:focus-visible {
    background-color: var(--post-color) !important;
  }
  html #fullscreen-modal-body:has(#scrollable-dms-div) button[data-testid="chat-room-dm-list"].bg-secondary-dark,
  html #fullscreen-modal-body:has(#scrollable-dms-div) button[data-testid="chat-room-dm-list"].bg-secondary-dark:hover,
  html #fullscreen-modal-body:has(#scrollable-dms-div) button[data-testid="chat-room-dm-list"].bg-secondary-dark:focus-visible,
  html #fullscreen-modal-body:has(#scrollable-dms-div) button[data-testid="chat-room-dm-list"][aria-selected="true"],
  html #fullscreen-modal-body:has(#scrollable-dms-div) button[data-testid="chat-room-dm-list"][aria-selected="true"]:hover {
    background-color: var(--hover-color) !important;
  }

  /* The 1px bars between conversations are painted with the same class as
     the panels above, so they need the border colour put back. */
  html #fullscreen-modal-body:has(#scrollable-dms-div) .bg-secondary-dark[class*="h-[1px]"] {
    background-color: var(--border-color) !important;
  }

  [role="tooltip"],
  .tippy-box {
    background-color: var(--hover-color) !important;
    color: var(--text-color) !important;
  }

  .tippy-arrow {
    color: var(--hover-color) !important;
  }

  /* Top bar buttons hover hover-color then become brand color when active */
  .bg-c-header-hover,
  .hover\:bg-c-header-hover:hover,
  .hover\:\!bg-c-header-hover:hover,
  .focus\:\!bg-c-header-hover:focus,
  .focus-visible\:\!bg-c-header-hover:focus-visible,
  .hover\:\!bg-c-header-active:hover,
  .group:hover .group-hover\:bg-c-header-active {
    background-color: var(--post-color) !important;
  }

  html .\!bg-c-header-active,
  html .\!bg-c-header-active:hover,
  html .\!bg-c-header-active:focus {
    background-color: var(--brand-color) !important;
  }

  /* Making the buttons on the profile page hover on hover-color */
  button.hover\:bg-secondary:hover {
    background-color: var(--hover-color) !important;
  }

  /* Making the settings area match my same theme */
  [class*="--color-background-primary:#34373D"] {
    --color-background-primary: var(--post-color) !important;
  }
  [class*="--color-background-secondary:#2B2E33"] {
    --color-background-secondary: var(--secondary-color) !important;
  }
  [class*="--color-background-tertiary:#4A4E55"] {
    --color-background-tertiary: var(--hover-color) !important;
  }
  [class*="--color-border-primary:#5E636B"] {
    --color-border-primary: var(--border-color) !important;
  }

  /* ---- Loading Skeletons Removed ---- */

  /* Top bar load placeholders */
  [data-testid="navigation-bar-wrapper"] .bg-tertiary,
  [data-testid="navigation-bar-wrapper"] .bg-secondary-dark,
  [data-testid="navigation-bar-wrapper"] .bg-primary {
    background-color: var(--primary-color) !important;
  }

  /* Feed skeleton loader. This one is deliberately unscoped so every
     loading placeholder matches the page behind it — but anything sitting
     on a card needs it undone, see the bookmarks drawer below. */
  div[class*="skeleton-loader"],
  div[class*="skeleton-loader"] div {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
  }

  /* Loading spinners. The container that holds Circle's default-loader
     renders the page colour while the spinner is up, then goes
     transparent once content arrives — so anything sitting on a card
     flashes a page-coloured block. Seen in the bookmarks drawer on every
     tab switch and on the settings profile page on a cold load.

     One rule covers both because it keys on the loader itself rather than
     on either page. It also survives hydration: the earlier settings fix
     targeted .react-form's FORM, which does not exist yet when the URL is
     opened directly, which is why that flash only stopped when arriving
     via a tab switch. */
  html div:has(> [data-testid="default-loader"]) {
    background-color: var(--post-color) !important;
  }

  /* Spinners — hidden outright, no swirling loaders anywhere */
  .react-loader,
  .default-loader,
  [class*="spinner"],
  .animate-spin {
    display: none !important;
  }

  /* Events skeleton placeholders */
  .react-page-space-show .bg-tertiary,
  .react-page-space-show .animate-pulse {
    background-color: var(--secondary-color) !important;
  }

  /* Expanded post skeleton */
  [data-testid="modal"] .bg-tertiary,
  [data-testid="modal"] .bg-primary {
    background-color: var(--post-color) !important;
  }

  /* ---- where one token serves two roles ----
     Circle paints 127 different things from --color-background-primary,
     including both post cards and the chat room. That token is set to
     --post-color so cards look right, which means anywhere that needs the
     page colour instead has to say so explicitly.

     These are NOT redundant overrides. They encode distinctions the token
     system cannot express, because a token can only say "everything using
     me is colour X". Deleting them is what put the chat background back to
     #111316. ---- */

  /* Chat space background */
  [data-testid="chat-room-wrapper"],
  [data-testid="chat-room-wrapper"] .bg-primary {
    background-color: var(--secondary-color) !important;
  }

  /* Chat loading flash */
  .main__wrapper.bg-primary,
  .main__wrapper.bg-primary .bg-primary.w-full.overflow-auto {
    background-color: var(--secondary-color) !important;
  }

  /* Chat loading pane (full-size spinner flex) */
  html .bg-primary.flex.size-full.items-center.justify-center {
    background-color: var(--secondary-color) !important;
  }

  /* Spinner / loader backgrounds */
  .react-loader,
  .default-loader,
  :has(> .react-loader) {
    background-color: var(--secondary-color) !important;
  }

  /* Chat details panel (right rail) */
  #rail-content,
  #rail-content .bg-primary,
  #rail-content .bg-secondary-dark,
  #rail-content [data-testid="message-item"] {
    background-color: var(--secondary-color) !important;
  }

  /* Chat message hover */
  [data-testid="message-item"]:hover,
  #rail-content [data-testid="message-item"]:hover {
    background-color: var(--post-color) !important;
  }

  /* Chat compose box (rest / hover / focus) */
  #rail-content [data-testid="tiptap-editor"] {
    background-color: var(--post-color) !important;
  }
  #rail-content [data-testid="tiptap-editor"]:hover {
    background-color: var(--hover-color) !important;
    border-color: hsl(from var(--border-color) h s calc(l + 2)) !important;
  }
  #rail-content [data-testid="tiptap-editor"]:focus-within {
    background-color: var(--hover-color) !important;
    border-color: hsl(from var(--border-color) h s calc(l + 30)) !important;
  }

/* ════════════════════════════════════════════════════════════
   ██  SECTION 2 — FONTS
   ════════════════════════════════════════════════════════════
   Cinzel for the sidebar group headings, Rubik for the sidebar links.

   (Both are pulled in by the @import on line 1.)
   ════════════════════════════════════════════════════════════ */

  [data-testid="standard-layout-v2-sidebar"] h3 {
    font-family: 'Cinzel', serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em;
  }

  [data-testid="standard-layout-v2-sidebar"] a,
  [data-testid="standard-layout-v2-sidebar"] a span,
  .border-c-sidebar button {
    font-family: 'Rubik', sans-serif !important;
    font-weight: 400 !important;
  }

/* ════════════════════════════════════════════════════════════
   ██  SECTION 3 — STRUCTURE
   ════════════════════════════════════════════════════════════
   Layout, spacing, sizing, and hiding things we do not want. Also the
   styling for our own features — the Shorts player, the Twitch panel
   and the mini games.

   (No colour theming here. The only colour in this section belongs to
   our own components, where it is part of the component rather than an
   override of Circle.)
   ════════════════════════════════════════════════════════════ */

  /* ---- Scrollbars ----
     Narrow, secondary-colour track, post-colour thumb. Browser
     pseudo-elements, so no Circle token reaches them, but they read the
     palette and track it. Width and colour stay together here because
     splitting them across sections would make them harder to follow. */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--secondary-color);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--post-color);
    border-radius: 8px;
    border: 2px solid var(--secondary-color);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: hsl(from var(--post-color) h s calc(l + 4));
  }
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--post-color) var(--secondary-color);
  }
  .os-scrollbar-handle {
    background: var(--post-color) !important;
  }
  .os-scrollbar-track {
    background: var(--secondary-color) !important;
  }

  /* The sidebar's scroll position should answer to the reader and nothing
     else. overflow-anchor stops the browser rebasing it when content above
     changes height, and scroll-behavior keeps any smooth-scroll call from
     gliding it somewhere. The JS half of this, lockSidebarScroll in app.js,
     handles the case neither property covers: something calling scrollTop or
     scrollIntoView outright, which is what focusing a link on navigation
     does. */
  [data-testid="standard-layout-v2-sidebar"] [data-overlayscrollbars-viewport],
  [data-testid="standard-layout-v2-sidebar"] {
    overflow-anchor: none !important;
    scroll-behavior: auto !important;
  }

  /* Cover image: strip the horizontal padding
     The wrapper eats 72px in the guest layout. */
  div:has(> [data-testid="cover-image-container"]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* The box behind the cover image. It carries .bg-primary, which resolves to
     the card colour, and shows wherever the image does not reach.

     Two selectors because the element differs by role, and a fix keyed on
     either one alone is invisible to half the audience:
       • Guests get data-testid="cover-image-container" on the box itself.
       • Admins get no testid there — only a cover-image-overlay child holding
         the Change cover and Remove buttons. That overlay does not exist for
         guests, which is why it cannot be the sole anchor. (getCoverRoot in
         app.js splits on the same distinction.)
     Both branches require .bg-primary so this cannot spread to the 127 other
     things Circle paints from that class; on a real space page it matches one
     element out of four. The outer #standard-layout-v2-cover-image-container
     carries the same testid but no .bg-primary, so it stays transparent and
     its padding keeps showing the page colour. */
  [data-testid="cover-image-container"].bg-primary,
  .bg-primary:has(> [data-testid="cover-image-overlay"]) {
    background-color: var(--secondary-color) !important;
  }

  /* Centre embeds (X posts etc.) inside post bodies */
  .node-embed .overflow-auto > div,
  .node-embed iframe {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
  }

/* Kill elastic overscroll bounce at page level + main scroll containers
     (left sidebar keeps its native bounce) */
  html,
  body {
    overscroll-behavior: none;
  }

  /* ---- sidebar scroll chaining ----
     #panel.community__content is laid out from x=0 across the full window
     width, so the whole sidebar sits on top of it. Both are position:
     static with no z-index, which means the hit test is settled by paint
     order rather than by layout — and over the right-hand part of the
     sidebar the feed won it. The wheel there scrolled the feed while the
     pointer was plainly over the sidebar.

     Giving the sidebar its own stacking position fixes it and moves
     nothing: relative with no offsets changes no geometry, it only puts
     the sidebar above the panel for hit testing.

     (overscroll-behavior below is a separate guard, for when the
     sidebar's own scroller reaches its end and the wheel would chain up.
     It was never the cause of the pointer problem — that needed the
     stacking fix.) ---- */
  [data-testid="standard-layout-v2-sidebar"] {
    position: relative !important;
    z-index: 1 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  [data-testid="standard-layout-v2-sidebar"] * {
    overscroll-behavior: contain !important;
  }

  .main__wrapper,
  main.standard-layout-v2__content,
  [data-testid="chat-room-wrapper"],
  .bg-primary.w-full.overflow-auto,
  #rail-content,
  #cc-overlay {
    overscroll-behavior: none;
  }
  /* Hide top bar search (logged-in + logged-out headers) */
  div.group.relative:has(.icon-20-flux-search):has(> button),
  [data-testid="right-action-block"] > div.group.relative.justify-self-center {
    display: none !important;
  }
  /* Hide logo dropdown chevron + its hover circle (logo unchanged) */
  [data-testid="community-menu"] .icon-12-chevron-down,
  [data-testid="community-menu"] div:has(> .icon-12-chevron-down) {
    display: none !important;
  }
  /* Space header removal (bar collapsed, key controls float top-right) */
  #standard-layout-header-child > div {
    position: relative !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: visible !important;
  }
  #standard-layout-header-child > div > div {
    display: none !important;
  }
  #standard-layout-header-child > div > div:has([data-testid="dropdown"]):not(:has(h1)) {
    display: block !important;
    position: absolute !important;
    top: 12px;
    right: 24px;
    z-index: 30;
  }
  /* Space header removal — keep sort dropdown + members stack */
  #standard-layout-header-child > div > div:has([data-testid="dropdown"]):not(:has(h1)) .gap-6 > div:not([data-testid="dropdown"]):not(:has([data-testid="dropdown"])):not(:has([data-testid="three-user-row"])) {
    display: none !important;
  }
  /* Members stack sits left of the sort dropdown */
  #standard-layout-header-child .gap-6 > div:has([data-testid="three-user-row"]) {
    order: -1;
  }
  /* Space header removal — hide feed settings dropdown (keep only sort) */
  #standard-layout-header-child .gap-6 > div:has([data-testid="feed-settings"]) {
    display: none !important;
  }
  /* Space header removal — chat pages hide space settings (posts/events keep the ⋯ menu) */
  body:has([data-testid="chat-room-wrapper"]) #standard-layout-header-child [data-testid="space-settings-v3"] {
    display: none !important;
  }
  /* Space header removal — hide New post button (header + feed quick post) */
  #standard-layout-header-child button.bg-brand,
  #sidebar--right__btn-quick-post {
    display: none !important;
  }
  /* …except in the spaces that are not post spaces, where the button is the
     only way to add anything and hiding it removes the feature.

     Keyed on the space id Circle puts on <body> (view-space--<id>) rather
     than on the space's type, because the type is not in the DOM anywhere a
     stylesheet can reach: every space renders the same body classes and the
     same header testids, differing only by that number. The nearest content
     signal, [data-testid="post_section"], is no good — it is absent from an
     empty post space, and it arrives after first paint, so the button would
     flash on every load before being hidden again.

     The trade is that a new non-post space needs its id adding here. To find
     it: open the space and read the view-space--<id> class off <body>.
       2694675  Community Events
       2748877  test image space */
  body.view-space--2694675 #standard-layout-header-child button.bg-brand,
  body.view-space--2748877 #standard-layout-header-child button.bg-brand {
    display: inline-flex !important;
  }
  /* Chat column height (overrides inline calc(100vh - 136px); header removed, bar 64px) */
  .main__wrapper.bg-primary .bg-primary.w-full.overflow-auto {
    height: calc(100vh - 64px) !important;
  }
  [data-testid="chat-room-wrapper"] {
    height: 100% !important;
  }
  /* Chat message hover width (clear floating controls) */
  [data-testid="chat-room-wrapper"] [data-testid="message-item"] {
    margin-right: 120px !important;
  }
  /* Phantom scroll fix (post + event spaces) */
  [data-testid="community-content"] > .standard-layout-v2 {
    overflow: hidden !important;
  }
  /* Events space background color reaching bottom of screen */
  main.standard-layout-v2__content {
    min-height: 100% !important;
  }
  /* Centering expanded post modal */
  .fixed.inset-0.z-\[1060\] > div {
    align-items: center !important;
  }
  /* ════════════════════════════════════════════
     CUSTOM TOP BAR NAV (buttons + overlay)
     ════════════════════════════════════════════ */

  /* Nav container (centered on viewport) */
  [data-testid="header-navigation-bar"] {
    pointer-events: none;
    z-index: 20;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    height: 64px;
    align-items: center;
  }
  /* Nav tab button */
  .cc-nav-btn {
    pointer-events: auto;
    position: relative;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    /* fluid width 130px→72px (starts ~1495px), smooth transition */
    width: clamp(72px, calc(9.7vw - 15px), 130px);
    transition: width 0.18s ease;
  }
  /* Nav tab hover pill (+2%, inset from bar edges) */
  .cc-nav-btn::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    right: 0;
    border-radius: 8px;
    background: transparent;
  }
  .cc-nav-btn:hover::before {
    background: var(--hover-color);
  }
  /* Nav tab active (brand icon + underline, 3px inset each side) */
  .cc-nav-btn.cc-active {
    color: var(--brand-color);
  }
  .cc-nav-btn.cc-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 3px;
    right: 3px;
    height: 3px;
    background: var(--brand-color);
    border-radius: 3px 3px 0 0;
  }
  .cc-nav-btn svg { width: 28px; height: 28px; position: relative; }
  /* Responsive: tighter gap, then hide entirely */
  @media (max-width: 1000px) {
    [data-testid="header-navigation-bar"] { gap: 4px; }
  }
  @media (max-width: 880px) {
    [data-testid="header-navigation-bar"] { display: none; }
  }
  /* Custom overlay (shorts / twitch / games) */
  #cc-overlay {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondary-color);
    z-index: 45;
    overflow: auto;
  }
  /* ════════════════════════════════════════════
     SHORTS PLAYER (button 3 overlay content)
     ════════════════════════════════════════════ */
  .reels-wrapper { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; box-sizing: border-box; }
  /* The 30px nudge offsets the 60px sidebar so the video reads as centred.
     Opening the panel widens the row, and justify-content re-centres it —
     the transition is what makes the video glide left instead of jumping. */
  .reels-main { display: flex; flex-direction: row; align-items: stretch; height: calc(100% - 30px); width: 100%; justify-content: center; gap: 0; margin: 15px 0; transform: translateX(30px); transition: transform 0.32s ease; }
  .reels-main:has(.reels-comments.open) { transform: translateX(0); }
  .reels-player { position: relative; aspect-ratio: 9 / 16; height: 100%; width: auto; border-radius: 16px; overflow: hidden; background: #111; flex-shrink: 0; }
  .reels-scroll-track { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1); }
  /* Each frame lives in a cell so it can carry its own cover. The cell takes
     the per-index offset the iframe used to hold inline. */
  .reels-cell { position: absolute; left: 0; width: 100%; height: 100%; }
  .reels-player iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: none; }
  /* Opaque until the frame is genuinely playing. controls=0 does not stop the
     embed showing its poster and a large play button while it sits idle, and
     every buffered frame sits idle until you reach it — which is why the
     chrome reappeared on each new video. Nothing inside a cross-origin frame
     can be hidden, so the frame is covered instead until it is worth seeing. */
  .reels-cell-cover { position: absolute; inset: 0; background: #000; z-index: 3; pointer-events: none; opacity: 1; transition: opacity 0.18s ease; }
  .reels-cell-cover.uncovered { opacity: 0; }
  /* The active frame stays non-interactive too. controls=0 does not stop the
     embed drawing its own chrome — hovering it surfaces the title bar, the
     centre play/mute overlay and the watermark, all painted inside the iframe
     where no CSS of ours can reach them. Denying it the cursor is what keeps
     them away, since YouTube only draws them in response to hover.
     Trade-off: nothing inside the frame is clickable now, which includes the
     watermark's link back to the watch page. The custom controls sit above it
     in .reels-top-left and are unaffected. */
  .reels-player iframe.reels-frame { pointer-events: none; }
  .reels-loader, .reels-empty-message { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.78); font-size: 13px; text-align: center; padding: 24px; z-index: 2; }
  .reels-loader::before { content: ""; width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); border-top-color: rgba(255,255,255,0.9); animation: reelsSpin 0.8s linear infinite; }
  @keyframes reelsSpin { to { transform: rotate(360deg); } }
  .reels-top-left { position: absolute; top: 16px; left: 16px; display: flex; gap: 10px; z-index: 10; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
  .reels-player:hover .reels-top-left { opacity: 1; pointer-events: auto; }
  /* Both controls are 48px circles at rest, matching the rail and the Shorts
     layout. The volume one widens on hover to expose its slider — YouTube
     offers only a mute toggle here, but collapsing to a circle keeps that look
     without giving up the finer control. */
  .reels-play-pill { display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; border: none; width: 48px; height: 48px; cursor: pointer; color: #fff; flex-shrink: 0; transition: background 0.15s; }
  .reels-play-pill:hover { background: rgba(0,0,0,0.75); }
  .reels-volume-pill { display: flex; align-items: center; justify-content: center; gap: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; padding: 0; width: 48px; height: 48px; cursor: pointer; overflow: hidden; flex-shrink: 0; transition: background 0.15s ease, width 0.22s ease, padding 0.22s ease, gap 0.22s ease; }
  .reels-volume-pill:hover { background: rgba(0,0,0,0.75); width: 154px; padding: 0 14px 0 13px; gap: 9px; justify-content: flex-start; }
  .reels-volume-pill-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; width: 22px; }
  /* Zero-width until the pill opens, so it cannot spill out of the circle. */
  .reels-volume-pill-slider { width: 0; height: 4px; appearance: none; -webkit-appearance: none; background: rgba(255,255,255,0.35); border-radius: 2px; outline: none; cursor: pointer; flex-shrink: 0; opacity: 0; transition: width 0.22s ease, opacity 0.18s ease; }
  .reels-volume-pill:hover .reels-volume-pill-slider { width: 90px; opacity: 1; }
  .reels-volume-pill-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
  .reels-volume-pill-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; cursor: pointer; border: none; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
  /* 80px, not 60. box-sizing is border-box, so 60px minus the 16px padding
     left a 44px content box, and Circle's reset puts max-width: 100% on
     images — which silently squeezed the 48px channel avatar to 44px while
     the sibling icon circles, being spans, overflowed instead.
     24px bottom padding drops the channel avatar close to the foot of the
     player, level with the attribution strip beside it, as Shorts has it. */
  .reels-sidebar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 24px; padding-left: 16px; gap: 18px; flex-shrink: 0; width: 80px; }
  /* Two of these are <button> now, so the UA button styling has to go or
     they render boxed and mis-aligned next to the plain div. */
  /* Shorts format: icon inside a translucent circle, count in bold beneath.
     The rail sits over arbitrary video frames, so the circle is white at low
     alpha rather than a theme colour — it has to read against both a bright
     explosion and a dark treeline. */
  .reels-engagement-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; text-decoration: none; }
  .reels-icon-circle { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.13); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.15s ease; }
  .reels-engagement-item:hover .reels-icon-circle { background: rgba(255,255,255,0.22); }
  .reels-engagement-item svg { color: #fff; display: block; }
  .reels-engagement-count { font-size: 13px; color: #fff; font-weight: 600; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
  button.reels-engagement-item, a.reels-engagement-item { transition: transform 0.12s ease; }
  button.reels-engagement-item:hover, a.reels-engagement-item:hover { transform: scale(1.08); }
  button.reels-engagement-item:active, a.reels-engagement-item:active { transform: scale(0.94); }
  /* No brand fill on the comment button while its panel is open — deliberate,
     and it comes straight back if this block is ever restored wholesale from
     an older revision. */

  /* Channel avatar closing the rail. Ringed so it reads as an avatar rather
     than another icon button. */
  .reels-channel-avatar { width: 48px; height: 48px; border-radius: 50%; display: block; object-fit: cover; background: var(--hover-color); border: 2px solid rgba(255,255,255,0.9); }

  /* ── Attribution strip ──
     Always visible, not hover-revealed. The iframe takes no pointer events, so
     YouTube's own watermark link is dead; this is the only remaining route to
     the channel and the video, and it should not be something you have to
     discover by hovering. */
  .reels-attribution { position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; display: flex; align-items: flex-end; gap: 10px; padding: 40px 14px 14px; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)); }
  .reels-attr-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; }
  .reels-attr-channel { display: flex; align-items: center; gap: 9px; text-decoration: none; min-width: 0; }
  /* Two lines then ellipsis, as Shorts does — these titles run long and are
     mostly hashtags past the first clause. */
  .reels-attr-title { color: #fff; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px rgba(0,0,0,0.7); overflow-wrap: anywhere; }
  .reels-attr-title:empty { display: none; }
  .reels-attr-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: var(--hover-color); border: 1px solid rgba(255,255,255,0.7); }
  .reels-attr-handle { color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
  .reels-attr-channel:hover .reels-attr-handle { text-decoration: underline; }
  .reels-attr-yt { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.28); padding: 6px 12px; border-radius: 999px; transition: background 0.15s ease, border-color 0.15s ease; }
  .reels-attr-yt:hover { background: rgba(0,0,0,0.75); border-color: rgba(255,255,255,0.55); }
  /* Monochrome mark, which YouTube permits over video, and it avoids dropping
     a second unrelated red next to --brand-color. */
  .reels-attr-yt svg { color: #fff; flex-shrink: 0; }

  /* ── Comments panel ──
     A third flex child of .reels-main, so height: 100% resolves against the
     same row box the player fills. That is what keeps it exactly as tall as
     the video at every viewport size with no JS measuring involved.
     It animates width rather than transform: a transform would slide it over
     the sidebar instead of pushing the row, and the row has to re-centre. */
  .reels-comments { height: 100%; width: 0; flex-shrink: 0; overflow: hidden; border-radius: 16px; margin-left: 0; background: var(--post-color); border: 0 solid var(--border-color); display: flex; flex-direction: column; transition: width 0.32s ease, margin-left 0.32s ease, border-width 0.32s ease; }
  .reels-comments.open { width: 360px; margin-left: 16px; border-width: 1px; }
  .reels-comments-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 12px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
  .reels-comments-title { font-weight: 600; color: var(--text-color); font-size: 15px; }
  .reels-comments-total { color: var(--text-muted-color); font-size: 13px; }
  .reels-comments-close { margin-left: auto; background: none; border: 0; padding: 4px; cursor: pointer; color: var(--text-muted-color); display: flex; border-radius: 6px; }
  .reels-comments-close:hover { color: var(--text-color); background: var(--hover-color); }
  .reels-comments-body { overflow-y: auto; overflow-x: hidden; padding: 6px 14px 14px; flex: 1; min-width: 360px; }
  .reels-comment { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
  .reels-comment:last-child { border-bottom: 0; }
  .reels-comment-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--hover-color); }
  .reels-comment-main { min-width: 0; flex: 1; }
  .reels-comment-author { font-size: 13px; font-weight: 600; color: var(--text-color); }
  .reels-comment-when { font-size: 12px; color: var(--text-muted-color); margin-left: 6px; }
  /* Comment bodies are arbitrary user text — let long links wrap rather than
     stretch the panel. */
  .reels-comment-text { font-size: 14px; color: var(--text-color); margin-top: 3px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
  .reels-comment-meta { font-size: 12px; color: var(--text-muted-color); margin-top: 6px; display: flex; gap: 14px; }
  .reels-comments-state { color: var(--text-muted-color); font-size: 14px; text-align: center; padding: 32px 12px; line-height: 1.5; }
  .reels-comments-more { width: 100%; margin-top: 12px; padding: 9px; background: var(--hover-color); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-color); font: inherit; font-size: 13px; cursor: pointer; }
  .reels-comments-more:hover { border-color: var(--text-muted-color); }
  .reels-comments-more[disabled] { opacity: 0.6; cursor: default; }

  /* Toast for the share button's clipboard fallback. */
  .reels-toast { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--post-color); border: 1px solid var(--border-color); color: var(--text-color); font-size: 13px; padding: 9px 16px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 40; }
  .reels-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .reels-nav-arrows { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; align-items: center; z-index: 20; }
  .reels-nav-arrow { width: 44px; height: 44px; border-radius: 50%; background: transparent; border: 2px solid rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(255,255,255,0.85); transition: all 0.15s; user-select: none; flex-shrink: 0; }
  .reels-nav-arrow:hover { border-color: rgba(255,255,255,0.9); color: #fff; background: rgba(255,255,255,0.08); }
  .reels-nav-arrow:active { transform: scale(0.93); }
  .reels-nav-arrow.disabled { opacity: 0.25; cursor: default; transform: none; }
  #reels-volume-control { display: none; }
  .reels-nav-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  /* ════════════════════════════════════════════
     TWITCH PLAYER (button 4 overlay content)
     ════════════════════════════════════════════ */
  #twitch-container {
    position: absolute;
    inset: 0;
    background-color: #000000;
    border: none;
    overflow: hidden;
  }
  #video-wrapper {
    display: flex;
    width: 100%;
    height: calc(100% - 40px);
    transition: width 0.3s ease-in-out;
    position: relative;
  }
  #video-wrapper iframe { background-color: #000000 !important; }
  .chat-frame {
    border: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #18181b;
    display: none;
  }
  #chat-wrapper {
    position: absolute;
    right: -25%;
    top: 0;
    width: 25%;
    height: calc(100% - 40px);
    transition: right 0.3s ease-in-out;
  }
  #control-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 10px;
    gap: 10px;
    z-index: 1;
    box-sizing: border-box;
  }
  #stream-buttons {
    display: flex;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    flex-shrink: 1;
  }
  .stream-button,
  .control-button,
  .pagination-arrow {
    font-family: 'Rubik', sans-serif;
    font-size: 12.5px;
    height: 30px;
    padding: 4px 12px;
    background-color: var(--brand-color);
    color: #fff;
    border: 1px solid #000000;
    background-image: linear-gradient(to bottom, hsl(from var(--brand-color) h s calc(l + 6)), hsl(from var(--brand-color) h s calc(l - 6)));
    box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.18);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
  }
  .stream-button:hover,
  .control-button:hover,
  .pagination-arrow:hover:not(:disabled) {
    background-color: hsl(from var(--brand-color) h s calc(l + 8));
  }
  .stream-button.cc-live-active {
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
  }
  .pagination-arrow {
    padding: 4px 10px;
    font-size: 15px;
    min-width: 30px;
    line-height: 1;
  }
  .pagination-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
  /* ════════════════════════════════════════════
     MINI GAMES (button 5 overlay content)
     ════════════════════════════════════════════ */
  #games-container { position: absolute; inset: 0; display: flex; background: var(--secondary-color); }
  /* Left game menu */
  #games-menu { width: 220px; flex-shrink: 0; border-right: 1px solid var(--border-color); padding: 16px 10px; display: flex; flex-direction: column; gap: 6px; }
  .games-menu-title { color: #A5A9AD; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 10px 8px; }
  .games-menu-btn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: none; border-radius: 8px; background: transparent; color: #E4E7EB; font-size: 14px; cursor: pointer; text-align: left; }
  .games-menu-btn:hover { background: var(--hover-color); }
  .games-menu-btn.games-active { background: var(--brand-color); color: #fff; }
  /* Game stage */
  #games-stage { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
  /* Spinner wheel */
  #wheel-area { position: relative; display: flex; align-items: center; justify-content: center; }
  #wheel-canvas { display: block; }
  #wheel-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 26px solid #ffd54a; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); z-index: 3; }
  #wheel-spin-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 50%; border: 5px solid #fff; background: var(--brand-color); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 0.06em; cursor: pointer; z-index: 3; box-shadow: 0 4px 18px rgba(0,0,0,0.55); transition: transform 0.12s; }
  #wheel-spin-btn:hover { transform: translate(-50%, -50%) scale(1.06); }
  #wheel-spin-btn:disabled { opacity: 0.6; cursor: default; transform: translate(-50%, -50%); }
  /* Slarky Run */
  #slark-area { display: none; flex-direction: column; align-items: center; gap: 12px; }
  #slark-area.active { display: flex; }
  #slark-canvas { border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.45); }
  .slark-hint { color: #A5A9AD; font-size: 13px; }
  /* Game popups (winner / death) */
  .games-popup { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.65); z-index: 10; }
  .games-popup.show { display: flex; }
  .games-popup-card { background: var(--post-color); border: 2px solid #ffd54a; border-radius: 20px; padding: 44px 64px; text-align: center; animation: winnerPop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1); box-shadow: 0 0 60px rgba(255, 213, 74, 0.35); }
  .games-popup-card.death { border-color: #4dd8c7; box-shadow: 0 0 60px rgba(77, 216, 199, 0.3); }
  .games-popup-label { color: #ffd54a; font-size: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; }
  .games-popup-card.death .games-popup-label { color: #4dd8c7; }
  .games-popup-name { color: #fff; font-size: 44px; font-weight: 900; }
  .games-popup-sub { color: #A5A9AD; font-size: 16px; margin-top: 8px; }
  .games-popup-highscore { color: #ffd54a; font-size: 18px; font-weight: 800; margin-top: 10px; display: none; }
  .games-popup-highscore.show { display: block; }
  .games-popup-close { margin-top: 22px; padding: 8px 26px; border: none; border-radius: 999px; background: var(--brand-color); color: #fff; font-weight: 700; cursor: pointer; }
  @keyframes winnerPop { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }