/* ═══════════════════════════════════════════════════════════════
   components.css — sidebar rail, header HUD, glass cards, pills
   ═══════════════════════════════════════════════════════════════ */

@layer components {

  /* ─────────────────────────────────────────────────────────
     GLASS — liquid chrome doctrine
     ─────────────────────────────────────────────────────── */
  /* IMPORTANT — backdrop-filter is NOT on .glass anymore.
   *
   * Previously every glass card (8–10 of them on a typical page) ran its
   * own backdrop-filter, forcing the GPU to re-blur the canvas content
   * beneath each one on every animation frame. That scaled multiplicatively
   * with both card count and canvas frame rate, and on lower-end GPUs it
   * pinned the compositor and blocked input.
   *
   * The fix: apply backdrop-filter ONCE on the parent layout containers
   * (.rail and .main below). Cards keep their semi-transparent --bg-pane
   * tint and inherit the look — they're effectively "windows" into the
   * already-blurred parent backdrop. Visually identical at a glance, but
   * costs ONE blur pass per frame instead of eight. */
  .glass {
    position: relative;
    background: var(--bg-pane);
    border: var(--glass-edge) solid var(--line-edge);
    border-radius: var(--r-3);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 0 0 0.5px rgba(255, 255, 255, 0.04),
      0 8px 32px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    contain: layout paint;
  }
  /* backdrop-filter intentionally not applied anywhere — even one large blur
   * pass over an animated canvas is enough to pin the GPU and stall input.
   * The .glass class still gives a tinted-panel look via --bg-pane + border
   * + inset highlights, which reads as glass without the blur cost. */
  /* chromatic seam — top hairline + faint bottom shadow */
  .glass::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0) 22%,
        rgba(0, 0, 0, 0) 80%,
        rgba(0, 0, 0, 0.18) 100%);
    z-index: 0;
  }
  .glass > * { position: relative; z-index: 1; }

  /* `data-glass="none"` swaps the translucent card tint for an opaque fill
   * (cheaper paint, fully-defined contrast). Useful for low-power devices
   * or for the "minimal chrome" look. */
  :root[data-glass="none"] .glass {
    background: var(--bg-raised);
  }
  :root[data-glass="subtle"] {
    --glass-blur: 6px;
    --glass-saturate: 120%;
  }
  /* heavy lowered 28 → 14 for perf; still markedly deeper than the
   * default (now 10px) without the GPU overdraw cost. */
  :root[data-glass="heavy"] {
    --glass-blur: 14px;
    --glass-saturate: 160%;
  }

  /* ─────────────────────────────────────────────────────────
     LAYOUT — floating glass rail + main canvas
     ─────────────────────────────────────────────────────── */
  .app {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
  }

  /* canvas/atmosphere container behind everything */
  .atmosphere {
    position: fixed; inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  /* ─────────────────────────────────────────────────────────
     SIDEBAR RAIL — floating glass capsule, pinned left
     ─────────────────────────────────────────────────────── */
  .rail {
    position: fixed;
    left: var(--s-5);
    top: var(--s-5);
    bottom: var(--s-5);
    width: 188px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    padding: var(--s-5) var(--s-3);
    border-radius: var(--r-5);
  }
  .rail::after {
    /* edge highlight — liquid chrome rim light */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
      linear-gradient(135deg,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0) 70%,
        rgba(255,255,255,0.08) 100%);
    mix-blend-mode: overlay;
  }

  /* ── wordmark ── */
  .wordmark {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 38px;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    line-height: 1;
    padding: var(--s-2) 0 var(--s-5);
    user-select: none;
  }
  .wordmark .sa { color: var(--text-primary); }

  /* ── logo (above wordmark) — static, no animation, no drop-shadow ──
   * Float animation + drop-shadow combined recompute the shadow on every
   * animation frame, which is expensive. The logo now sits still; the glow
   * is provided by a static box-shadow on the wrapper instead. */
  .rail-logo {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--s-3);
    position: relative;
    border-radius: 50%;
    box-shadow: 0 0 16px var(--accent-glow);
  }
  .rail-logo img {
    width: 100%; height: 100%;
    object-fit: contain;
  }

  /* ── nav ── */
  .nav {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-top: var(--s-3);
    flex: 1;
  }
  .nav-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 11px var(--s-3);
    border-radius: var(--r-2);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
    border: 0.5px solid transparent;
    background: transparent;
    transition: color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
    position: relative;
    overflow: hidden;
  }
  /* Multi-word labels (e.g. "Gear & Glossary") shrink rather than wrap so
     the rail stays a fixed width; the per-item wide tracking is relaxed
     for those long entries so they still fit. */
  .nav-item.nav-item-long {
    letter-spacing: 0.06em;
    font-size: 11px;
  }
  .nav-item .nav-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--line-edge);
    flex-shrink: 0;
    transition: background var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
  }
  .nav-item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--line-edge);
  }
  .nav-item:hover .nav-dot {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
  }
  .nav-item[aria-current="page"] {
    color: var(--text-primary);
    background: linear-gradient(135deg,
      var(--accent-soft) 0%,
      transparent 80%);
    border-color: var(--line-edge);
  }
  .nav-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0; top: 12%;
    bottom: 12%;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 12px var(--accent-glow);
  }
  .nav-item[aria-current="page"] .nav-dot {
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
  }

  /* live badge — appears in sidebar when on-air */
  .live-pip {
    margin: 0 var(--s-2);
    padding: var(--s-3);
    border-radius: var(--r-3);
    background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 18%, transparent), transparent);
    border: 0.5px solid var(--line-edge);
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: border-color var(--t-fast);
  }
  .live-pip:hover { border-color: var(--accent); }
  .live-pip-row {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent);
  }
  .live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow), 0 0 0 0 var(--accent-glow);
    animation: live-pulse 1.6s ease-out infinite;
  }
  [data-motion="still"] .live-dot { animation: none; }
  @keyframes live-pulse {
    0%   { box-shadow: 0 0 12px var(--accent-glow), 0 0 0 0 var(--accent); }
    100% { box-shadow: 0 0 12px var(--accent-glow), 0 0 0 12px transparent; }
  }
  .live-pip-title {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
  }
  .live-pip-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
  }

  /* ─────────────────────────────────────────────────────────
     HEADER HUD — top bar inside main column
     ─────────────────────────────────────────────────────── */
  .hud {
    position: sticky;
    top: var(--s-5);
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--s-5) var(--s-5) 0;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-pill);
    height: 52px;
  }

  .hud-meta {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .hud-meta .sep { opacity: 0.4; }
  .hud-meta .pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: hud-pulse 3s ease-in-out infinite;
  }
  .hud-meta .pulse.on {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
  }
  @keyframes hud-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
  }

  .hud-actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }

  /* ── theme dot row ── */
  .dot-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px;
    height: 24px;
  }
  .theme-dot {
    width: 14px; height: 14px;
    flex: 0 0 14px;
    border-radius: 50%;
    border: 0.5px solid rgba(255,255,255,0.18);
    padding: 0;
    margin: 0;
    background: var(--dot-color);
    box-shadow: 0 0 8px color-mix(in oklch, var(--dot-color) 50%, transparent);
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
    transition: transform var(--t-fast) var(--ease-spring);
  }
  .theme-dot:hover { transform: scale(1.18); }
  .theme-dot[aria-pressed="true"] {
    box-shadow:
      0 0 12px var(--dot-color),
      inset 0 0 0 2px rgba(0,0,0,0.5),
      inset 0 0 0 3px var(--dot-color);
  }
  .theme-dot.crimson { --dot-color: #E41646; }
  .theme-dot.matrix  { --dot-color: #00FF5A; }
  .theme-dot.neptune { --dot-color: #50BEEB; }
  .theme-dot.tempest { --dot-color: #BE3CFF; }

  /* ── lightswitch — square housing w/ travel slot ── */
  .lightswitch {
    width: 28px; height: 28px;
    border-radius: 6px;
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--bg-deep) 50%, rgba(255,255,255,0.06)),
        color-mix(in oklch, var(--bg-deep) 90%, transparent));
    border: 0.5px solid var(--line-edge);
    position: relative;
    padding: 0;
    cursor: pointer;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 -1px 0 rgba(0,0,0,0.4),
      0 1px 0 rgba(255,255,255,0.04);
    transition: background var(--t-med) var(--ease-out);
  }
  /* slot */
  .lightswitch::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px; bottom: 4px;
    width: 6px;
    transform: translateX(-50%);
    border-radius: 3px;
    background: rgba(0,0,0,0.45);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  }
  /* lever */
  .lightswitch::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    width: 10px; height: 8px;
    transform: translateX(-50%) translateY(0);
    border-radius: 2px;
    background: linear-gradient(180deg, var(--chrome-1), var(--chrome-2));
    box-shadow:
      0 1px 2px rgba(0,0,0,0.5),
      inset 0 0.5px 0 rgba(255,255,255,0.4);
    transition: transform var(--t-med) var(--ease-spring),
                background var(--t-med);
  }
  [data-mode="light"] .lightswitch::after {
    transform: translateX(-50%) translateY(8px);
    background: linear-gradient(180deg, var(--accent-hot), var(--accent));
    box-shadow:
      0 0 12px var(--accent-glow),
      inset 0 0.5px 0 rgba(255,255,255,0.5);
  }

  /* ─────────────────────────────────────────────────────────
     MAIN CANVAS
     ─────────────────────────────────────────────────────── */
  .main {
    position: relative;
    grid-column: 2;
    padding: 0 var(--s-5) var(--s-3);
    max-width: 1200px;
  }
  .page {
    padding-top: var(--s-3);
    min-height: auto;
  }

  /* ─────────────────────────────────────────────────────────
     EYEBROWS / META
     ─────────────────────────────────────────────────────── */
  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
  }

  /* ─────────────────────────────────────────────────────────
     BUTTONS / PILLS
     ─────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 10px 18px;
    border-radius: var(--r-pill);
    border: 0.5px solid var(--line-edge);
    /* backdrop-filter intentionally absent — buttons sit inside .main which
     * already has the blur layer. Each one would otherwise be its own pass. */
    background: var(--bg-pane-strong);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
    /* Pre-promote to compositor layer so hover doesn't trigger a fresh
       layer allocation + paint. */
    transform: translateZ(0);
  }
  .btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  .btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-hot));
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 24px var(--accent-glow);
  }
  .btn-primary:hover { transform: translateY(-1px); }

  /* platform pill */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    /* backdrop-filter dropped — pills inherit blur from the .main container */
    background: var(--bg-pane-strong);
    border: 0.5px solid var(--line-edge);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-mono);
    color: var(--text-secondary);
    transition: all var(--t-fast) var(--ease-out);
  }
  .pill .pill-bullet {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: background var(--t-fast), box-shadow var(--t-fast);
  }
  .pill:hover {
    color: var(--text-primary);
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  .pill:hover .pill-bullet {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
  }

  /* ─────────────────────────────────────────────────────────
     CARDS
     ─────────────────────────────────────────────────────── */
  .card { padding: var(--s-6); }

  .card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-4);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-mono);
    color: var(--text-muted);
    margin-top: var(--s-3);
  }
  .card-meta .sep::before { content: "·"; margin-right: var(--s-3); opacity: 0.5; }

  .embed-slot {
    margin-top: var(--s-5);
    padding: var(--s-7) var(--s-4);
    border: 1px dashed var(--line-edge);
    border-radius: var(--r-3);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: var(--tracking-mono);
    color: var(--text-muted);
    background:
      repeating-linear-gradient(45deg,
        transparent 0, transparent 10px,
        rgba(255,255,255,0.015) 10px, rgba(255,255,255,0.015) 20px);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ─────────────────────────────────────────────────────────
     EMAIL CAPSULE — slide-in
     ─────────────────────────────────────────────────────── */
  .capsule {
    position: fixed;
    right: var(--s-5);
    bottom: var(--s-5);
    width: 360px;
    max-width: calc(100vw - 32px);
    z-index: 100;
    padding: var(--s-5);
    border-radius: var(--r-4);
    transform: translateY(140%);
    opacity: 0;
    transition: transform 600ms var(--ease-spring), opacity 400ms var(--ease-out);
  }
  .capsule.show {
    transform: translateY(0);
    opacity: 1;
  }
  .capsule-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 0.5px solid var(--line-edge);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    line-height: 1;
  }
  .capsule h4 {
    font-size: 18px;
    margin: 0 0 6px;
    color: var(--text-primary);
  }
  .capsule p {
    margin: 0 0 var(--s-4);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
  }
  .capsule-form {
    display: flex;
    gap: 6px;
    background: rgba(0,0,0,0.25);
    border: 0.5px solid var(--line-edge);
    border-radius: var(--r-pill);
    padding: 4px 4px 4px 14px;
  }
  .capsule-form input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    min-width: 0;
  }
  .capsule-form input::placeholder { color: var(--text-muted); }
  .capsule-form button {
    background: var(--accent);
    border: 0;
    border-radius: var(--r-pill);
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: #fff;
  }
  .capsule-foot {
    margin-top: var(--s-3);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  /* Inline subscribe-status messages, shown after the email form submits.
     Match the capsule's other typography so they don't feel grafted on. */
  .capsule-success {
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--accent-soft, rgba(255,255,255,0.06));
    border: 1px solid var(--accent);
    color: var(--text-primary);
    font-size: 12.5px;
    line-height: 1.5;
  }
  .capsule-error {
    margin-top: var(--s-3);
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid rgba(255, 90, 90, 0.45);
    background: rgba(255, 90, 90, 0.08);
    color: rgba(255, 180, 180, 0.95);
    font-size: 11.5px;
    line-height: 1.5;
  }
  .capsule-form input:disabled,
  .capsule-form button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  /* ─────────────────────────────────────────────────────────
     COOKIE CONSENT — banner + modal + iframe placeholder
     GDPR-orthodox: Reject all is the same visual weight as
     Accept all (no dark patterns), and non-essential cookies
     stay blocked until consent is given.
     ─────────────────────────────────────────────────────── */
  .cc-banner {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(960px, calc(100vw - 32px));
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-5);
    padding: var(--s-5);
    border: 1px solid var(--line-edge);
    border-left: 2px solid var(--accent);
    border-radius: var(--r-3);
    box-shadow: 0 18px 48px rgba(0,0,0,0.45);
  }
  .cc-banner-text { flex: 1; min-width: 0; }
  .cc-banner-heading {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 6px;
  }
  .cc-banner-body {
    margin: 0 0 6px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
  }
  .cc-banner-link {
    display: inline-block;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
  }
  .cc-banner-link:hover { color: var(--text-primary); border-bottom-color: var(--accent); }
  .cc-banner-actions {
    display: flex;
    gap: var(--s-2);
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .cc-btn {
    padding: 8px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-edge);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
  }
  .cc-btn:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--text-muted);
  }
  .cc-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .cc-btn-primary:hover {
    background: var(--accent);
    filter: brightness(1.08);
  }

  .cc-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
  }
  .cc-modal {
    width: min(620px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    border: 1px solid var(--line-edge);
    border-radius: var(--r-3);
    padding: var(--s-6);
    box-shadow: 0 32px 80px rgba(0,0,0,0.55);
  }
  .cc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-3);
  }
  .cc-modal-head h3 {
    margin: 0;
    font-size: 18px;
    font-family: var(--font-display);
  }
  .cc-modal-close {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--r-2);
  }
  .cc-modal-close:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
  }
  .cc-modal-intro {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 var(--s-4);
  }
  .cc-modal-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
  }
  .cc-cat {
    border: 1px solid var(--line-edge);
    border-radius: var(--r-2);
    padding: var(--s-3);
  }
  .cc-cat[data-disabled="true"] { opacity: 0.7; }
  .cc-cat-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    cursor: pointer;
  }
  .cc-cat[data-disabled="true"] .cc-cat-row { cursor: not-allowed; }
  .cc-cat-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; cursor: inherit; }
  .cc-cat-label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    flex: 1;
  }
  .cc-cat-tag {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 2px 6px;
    border-radius: var(--r-pill);
  }
  .cc-cat-tag-empty { color: var(--text-muted); border-color: var(--text-muted); }
  .cc-cat-desc {
    margin: var(--s-2) 0 0 24px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
  }
  .cc-modal-actions {
    display: flex;
    gap: var(--s-2);
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  /* YouTube embed placeholder when Embedded Media consent is denied.
     CSS-only — we deliberately do NOT load i.ytimg.com here, since just
     fetching a Google CDN thumbnail counts as third-party content under
     GDPR/ePrivacy. A soft radial nebula matches the cosmic theme.
     `container-type: inline-size` lets the inner copy/buttons adapt to
     the gate's actual rendered width — important inside the Content
     Explorer focus-node where the slot can be as narrow as ~220px. */
  .yt-consent-gate {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 240px;
    background:
      radial-gradient(60% 80% at 50% 40%, rgba(120, 110, 220, 0.18), transparent 70%),
      radial-gradient(40% 50% at 70% 70%, rgba(255, 110, 180, 0.10), transparent 70%),
      #0a0a10;
    border: 1px solid var(--line-edge);
    border-radius: var(--r-2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: inline-size;
    container-name: ytconsent;
  }
  /* When dropped inside the Content Explorer's focus-node — which sets
     its own absolute width/height via inline styles — pin to fill the
     whole slot so the iframe's dark backdrop doesn't peek through. */
  .cw-focus-node .yt-consent-gate {
    position: absolute;
    inset: 0;
    min-height: 0;
    border-radius: var(--r-1, 4px);
  }
  .yt-consent-overlay {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--s-5);
    max-width: 480px;
    width: 100%;
    box-sizing: border-box;
  }
  .yt-consent-text {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin-bottom: var(--s-3);
    line-height: 1.5;
    overflow-wrap: break-word;
  }
  .yt-consent-actions {
    display: flex;
    gap: var(--s-2);
    justify-content: center;
    flex-wrap: wrap;
  }
  .yt-consent-btn {
    padding: 7px 13px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-edge);
    background: rgba(0,0,0,0.4);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
  }
  /* Narrow-container fallbacks. The focus-node iframe slot can shrink
     to ~220px on screens where the info popup is rendered beside it,
     so progressively trim padding, font, and stack the buttons. */
  @container ytconsent (max-width: 420px) {
    .yt-consent-overlay { padding: var(--s-3); }
    .yt-consent-text    { font-size: 11px; margin-bottom: var(--s-2); }
    .yt-consent-btn     { padding: 6px 10px; font-size: 10px; }
  }
  @container ytconsent (max-width: 320px) {
    .yt-consent-overlay { padding: var(--s-2); }
    .yt-consent-text    { font-size: 10px; line-height: 1.35; }
    .yt-consent-actions { flex-direction: column; align-items: stretch; gap: 6px; }
    .yt-consent-btn     { padding: 6px 8px; font-size: 9.5px; letter-spacing: 0.02em; }
  }
  .yt-consent-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--text-muted);
  }
  .yt-consent-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .yt-consent-btn-primary:hover { filter: brightness(1.08); }

  @media (max-width: 720px) {
    .cc-banner {
      flex-direction: column;
      align-items: stretch;
      bottom: 8px;
      width: calc(100vw - 16px);
    }
    .cc-banner-actions { justify-content: stretch; }
    .cc-banner-actions .cc-btn { flex: 1; }
    .cc-modal { padding: var(--s-4); }
    .cc-modal-actions { justify-content: stretch; }
    .cc-modal-actions .cc-btn { flex: 1; }
  }

  /* ─────────────────────────────────────────────────────────
     MD — markdown wrapper (output of <MD>)
     `marked` emits one or more <p> blocks; the wrapper itself
     contributes no margin so the layout matches the original
     <p>{body}</p> pattern from before step 10.
     ─────────────────────────────────────────────────────── */
  .md { margin: 0; }
  .md > p:first-child { margin-top: 0; }
  .md > p:last-child  { margin-bottom: 0; }
  .md a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .md code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
  }
  .md em { font-style: italic; }
  .md strong { font-weight: 600; color: var(--text-primary); }
  .md ul, .md ol { margin: 0.4em 0; padding-left: 1.4em; }
  .md li { margin: 0.2em 0; }

  /* ─────────────────────────────────────────────────────────
     MEDIA — featured row + social rail
     The latest-video card and the social rail sit side by side
     on wide screens. The rail uses .btn-styled buttons stacked
     vertically, hugging the card's right edge. Only visible on
     the media page (rendered inside MediaPage, not globally).
     ─────────────────────────────────────────────────────── */
  .media-featured-row {
    display: flex;
    align-items: stretch;
    gap: var(--s-5);
  }
  .media-featured-row .featured-card { flex: 1; min-width: 0; }
  .social-rail {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    flex-shrink: 0;
    align-self: stretch;
    justify-content: flex-start;
    padding-top: var(--s-2);
  }
  /* Social buttons reuse `.btn` (and `.btn-primary` for the accent one).
   * `.social-btn` only needs to fix the width so the stack reads as a
   * tidy column, and remove text-decoration since they're <a> tags. */
  .social-btn {
    width: 140px;
    text-decoration: none;
    justify-content: center;
  }
  /* Tip button sits below the social stack with a hairline divider above
     so it reads as a separate action, not just another platform link. */
  .social-btn-tip {
    margin-top: var(--s-3);
    position: relative;
  }
  .social-btn-tip::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--s-2) - 1px);
    left: 12%;
    right: 12%;
    height: 0.5px;
    background: var(--line-edge);
  }

  /* Narrow screens — drop the social rail under the card, full width row. */
  @media (max-width: 720px) {
    .media-featured-row { flex-direction: column; }
    .social-rail {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-self: auto;
    }
    .social-btn { width: auto; min-width: 120px; }
  }

  /* ─────────────────────────────────────────────────────────
     MEDIA — content-web explorer
     Physics-based graph of every public video on the channel.
     Renders to <canvas>; SVG would re-pay React costs every frame.
     ─────────────────────────────────────────────────────── */
  .content-web {
    /* Lives inside .media-featured-row as the main-column flex child,
       beside SocialRail. Sizing is handled by the row's flex layout —
       no max-width here. */
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: var(--s-4);
    background: var(--bg-pane);
    /* Stylish framing: hairline border + accent ring + soft glow that
       echoes the FoldedSpace portal on the home page. */
    position: relative;
    border: 0.5px solid var(--line-edge);
    border-radius: var(--r-3, 8px);
    box-shadow:
      inset 0 0 0 0.5px rgba(255,255,255,0.04),
      0 30px 60px -30px rgba(0,0,0,0.7),
      0 0 40px -16px var(--accent-glow);
    /* layout containment only — `paint` was clipping the absolutely
       positioned filter popover at the panel's edge. */
    contain: layout;
  }
  /* Pulsing accent dots on each corner of the panel — same trick as the
     portal's corner brackets, but lighter (these are subtle, the canvas
     is the focal point, not the frame). */
  .content-web::before,
  .content-web::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 0.5px solid var(--accent);
    opacity: 0.5;
    pointer-events: none;
  }
  .content-web::before {
    top: -1px; left: -1px;
    border-right: none; border-bottom: none;
  }
  .content-web::after {
    bottom: -1px; right: -1px;
    border-left: none; border-top: none;
  }
  .content-web-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--s-3);
    gap: var(--s-3);
    flex-wrap: wrap;
  }
  .content-web-head {
    position: relative;  /* anchor for absolute filter popover */
  }
  .content-web-head h3 {
    font-size: 18px;
    margin: 0;
    letter-spacing: -0.01em;
  }
  .content-web-stamp {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    flex: 1;
  }
  .cw-filter-btn {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background: transparent;
    border: 0.5px solid var(--line-edge);
    color: var(--text-secondary);
    padding: 6px 12px;
    cursor: pointer;
    border-radius: var(--r-1, 4px);
    transition: color var(--t-fast), border-color var(--t-fast);
  }
  .cw-filter-btn:hover,
  .cw-filter-btn.open {
    color: var(--accent);
    border-color: var(--accent);
  }

  /* Filter popover — anchored under the Filter button, compact, doesn't
     push the rest of the layout around. */
  .cw-filter-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 5;
    width: 260px;
    padding: var(--s-3);
    border: 0.5px solid var(--accent);
    border-radius: var(--r-2, 4px);
    background: var(--bg-pane-strong, rgba(10,10,16,0.96));
    box-shadow: 0 12px 40px -8px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }
  .cw-filter-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cw-filter-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    gap: var(--s-2);
  }
  .cw-filter-readout {
    color: var(--accent);
    letter-spacing: var(--tracking-mono);
    font-size: 10px;
    white-space: nowrap;
  }
  .cw-filter-actions {
    display: flex;
    justify-content: flex-end;
  }
  .cw-filter-reset {
    background: transparent;
    border: 0.5px solid var(--line-edge);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: var(--r-1, 4px);
  }
  .cw-filter-reset:hover {
    color: var(--accent);
    border-color: var(--accent);
  }

  /* Double-thumb range slider. Two overlaid <input type="range"> elements
     share one visual track: their tracks are made transparent, only the
     thumbs render. Pointer-events: none on the inputs + all on the thumbs
     means clicks pass through the empty track but you can grab either end. */
  .cw-dual-range {
    position: relative;
    height: 22px;
    margin: 0;
  }
  .cw-dual-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
    background: var(--line-edge);
    border-radius: 1px;
  }
  .cw-dual-range-fill {
    position: absolute;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
    pointer-events: none;
  }
  .cw-dual-range input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .cw-dual-range input[type="range"]:focus { outline: none; }
  .cw-dual-range input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    border: 0;
    height: 22px;
  }
  .cw-dual-range input[type="range"]::-moz-range-track {
    background: transparent;
    border: 0;
    height: 22px;
  }
  .cw-dual-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-base, #0a0a10);
    pointer-events: all;
    cursor: pointer;
    margin-top: 0;
    box-shadow: 0 0 6px var(--accent-glow);
  }
  .cw-dual-range input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-base, #0a0a10);
    pointer-events: all;
    cursor: pointer;
    box-shadow: 0 0 6px var(--accent-glow);
  }
  .content-web-stage {
    position: relative;
    width: 100%;
    overflow: visible;            /* let corner brackets bleed past edge */
    border-radius: var(--r-2, 4px);
    background:
      radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.35), transparent 70%),
      #04050a;
    box-shadow:
      inset 0 0 0 0.5px rgba(255,255,255,0.04),
      0 0 60px -20px var(--accent-glow);
  }
  .content-web-stage canvas {
    border-radius: var(--r-2, 4px);
    position: relative;
    z-index: 0;
  }
  /* Outer + inner hairline rect, the inner dashed and slowly marching
     (matches the .fs-frame-edge / .fs-frame-edge-inner pattern). */
  .cw-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
    border-radius: var(--r-2, 4px);
  }
  .cw-frame-edge,
  .cw-frame-edge-inner {
    fill: none;
    stroke: var(--accent);
    vector-effect: non-scaling-stroke;
  }
  .cw-frame-edge {
    stroke-width: 1;
    opacity: 0.55;
    filter: drop-shadow(0 0 4px var(--accent-glow));
  }
  .cw-frame-edge-inner {
    stroke-width: 0.5;
    stroke-dasharray: 1.2 4;
    opacity: 0.35;
    animation: cw-edge-march 24s linear infinite;
  }
  @keyframes cw-edge-march {
    to { stroke-dashoffset: -100; }
  }
  /* Corner brackets — fixed pixel size, sit just outside the stage edge */
  .cw-bracket {
    position: absolute;
    width: 36px;
    height: 36px;
    pointer-events: none;
    z-index: 3;
    overflow: visible;
  }
  .cw-bracket path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.2;
    filter: drop-shadow(0 0 4px var(--accent-glow));
  }
  .cw-bracket-dot {
    fill: var(--accent);
    filter: drop-shadow(0 0 6px var(--accent-glow));
    animation: cw-dot-pulse 3s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
  }
  .cw-bracket-tl { top: -2px; left: -2px; }
  .cw-bracket-tr { top: -2px; right: -2px; }
  .cw-bracket-bl { bottom: -2px; left: -2px; }
  .cw-bracket-br { bottom: -2px; right: -2px; }
  @keyframes cw-dot-pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.1); }
  }
  /* Tiny instruction line just above the canvas. Mono, dim, doesn't draw
     attention but tells first-time visitors the controls. */
  .content-web-hint {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    margin: 0 0 var(--s-2);
    opacity: 0.6;
  }
  .content-web-stage canvas {
    display: block;
    width: 100%;
    height: auto;
  }
  /* Zoom-in focus — iframe positioned ON the focused node and a small
     info popup floating beside it. Both are absolutely positioned by JS
     each frame so they track the node as you pan/zoom. No fullscreen
     takeover; the canvas stays visible with the focus playing in place. */
  .cw-focus-backdrop {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(0,0,0,0.55);
    cursor: pointer;
    pointer-events: auto;
  }
  .cw-focus-node {
    position: absolute;
    z-index: 3;
    background: #000;
    border-radius: var(--r-1, 4px);
    overflow: visible;            /* close button hangs slightly outside */
    box-shadow:
      0 0 0 2px var(--accent),
      0 0 24px var(--accent-glow),
      0 16px 40px -8px rgba(0,0,0,0.7);
    pointer-events: auto;
  }
  .cw-focus-node iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--r-1, 4px);
  }
  /* Close button — pinned to the iframe's top-right corner, hangs slightly
     outside so it doesn't cover video content. Pure CSS hover state. */
  .cw-focus-close {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 5;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0.5px solid var(--accent);
    border-radius: 50%;
    background: var(--bg-pane-strong, rgba(8,8,14,0.94));
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.6);
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), transform var(--t-fast);
  }
  .cw-focus-close:hover {
    background: var(--accent);
    color: var(--bg-deep, #000);
    transform: scale(1.08);
  }
  .cw-focus-info {
    position: absolute;
    z-index: 4;
    width: 220px;
    max-width: 40%;
    padding: var(--s-3);
    background: var(--bg-pane-strong, rgba(8,8,14,0.94));
    border: 0.5px solid var(--accent);
    border-radius: var(--r-2, 4px);
    box-shadow: 0 12px 36px -8px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    pointer-events: none;        /* purely informational — click-through */
  }
  .cw-focus-title {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-primary);
    word-wrap: break-word;
  }
  .cw-focus-stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px var(--s-2);
    margin: 0;
    font-size: 11px;
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-mono);
  }
  .cw-focus-stats dt {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: 10px;
  }
  .cw-focus-stats dd {
    margin: 0;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  /* Fallback link for videos with embedding disabled. The info popup is
     pointer-events: none, so the link explicitly re-enables clicks. */
  .cw-focus-yt {
    pointer-events: auto;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    border-top: 0.5px solid var(--line-edge);
    padding-top: var(--s-2);
    transition: color var(--t-fast);
  }
  .cw-focus-yt:hover { color: var(--accent-hot, var(--accent)); }

  .content-web-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--bg-pane-strong, rgba(0,0,0,0.85));
    border: 0.5px solid var(--accent);
    padding: 6px 10px;
    border-radius: var(--r-1, 4px);
    max-width: 280px;
    z-index: 2;
    box-shadow: 0 6px 20px -8px rgba(0,0,0,0.6);
  }
  .content-web-tooltip[hidden] { display: none; }
  .cw-tip-title {
    font-size: 12.5px;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 2px;
    word-wrap: break-word;
  }
  .cw-tip-date {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: var(--tracking-mono);
  }
  .content-web-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 0.5px solid var(--line-hairline, var(--line-edge));
  }
  .cw-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-secondary);
    background: transparent;
    border: 0.5px solid transparent;
    padding: 4px 8px;
    border-radius: var(--r-1, 4px);
    cursor: pointer;
    font-family: inherit;
    transition: color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
  }
  .cw-legend-item:hover {
    border-color: var(--line-edge);
    color: var(--text-primary);
  }
  .cw-legend-item.off {
    opacity: 0.45;
    text-decoration: line-through;
  }
  .cw-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid currentColor;
    box-shadow: 0 0 6px currentColor;
  }
  .cw-legend-item.off .cw-legend-dot {
    box-shadow: none;
  }

  /* ─────────────────────────────────────────────────────────
     MEDIA — YouTube thumb button (click to embed)
     ─────────────────────────────────────────────────────── */
  .yt-thumb-btn {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: block;
    overflow: hidden;
  }
  .yt-thumb-btn img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-med) var(--ease-out);
  }
  .yt-thumb-btn:hover img { transform: scale(1.02); }
  /* Used in place of <img src="i.ytimg.com/…"> when Embedded Media
     consent is denied — no third-party request, just a CSS-only
     placeholder that keeps the play-orb centered. */
  .yt-thumb-placeholder {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    display: block;
    background:
      radial-gradient(60% 80% at 50% 40%, rgba(120, 110, 220, 0.20), transparent 70%),
      radial-gradient(40% 50% at 70% 70%, rgba(255, 110, 180, 0.12), transparent 70%),
      #0a0a10;
  }
  .yt-play-orb {
    position: absolute;
    top: 50%; left: 50%;
    width: 88px; height: 88px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--accent), var(--accent-hot));
    box-shadow: 0 0 40px var(--accent-glow), 0 0 0 4px rgba(0,0,0,0.4);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--t-fast) var(--ease-spring);
  }
  .yt-thumb-btn:hover .yt-play-orb { transform: translate(-50%, -50%) scale(1.1); }
}