/* ==========================================================================
       FLAT, HARD-EDGED ARCHITECTURAL DESIGN SYSTEM
       Light & Dark Mode Support | Hard 90° Edges | Flat Planes
       ========================================================================== */
    :root, [data-theme="light"] {
      /* LIGHT ARCHITECTURAL PALETTE */
      --bg-base: #EDEDED;
      --bg-surface: #FFFFFF;
      --bg-surface-elevated: #FFFFFF;
      --bg-surface-subtle: #E2E2E2;
      --bg-stage: #DFDFDF;
      --bg-code: #FFFFFF;
      --border-subtle: #121212;
      --border-strong: #121212;
      --border-focus: #121212;

      --text-primary: #121212;
      --text-secondary: #2B2B2B;
      --text-muted: #555555;

      /* High-contrast Graphic Accents */
      --accent-volt: #D6FF00;
      --accent-cyan: #4D5E00; /* volt family, dark enough to read as text on light backgrounds */
      --accent-contrast: #121212;
      --accent-amber: #92400E;
      --accent-blue: #1d4ed8;
      --accent-emerald: #065F46;
      --accent-purple: #6d28d9;
      --accent-rose: #be123c;

      --badge-bg: #121212;
      --badge-text: #D6FF00;

      --code-box-bg: #FFFFFF;
      --code-box-text: #121212;
      --code-box-border: #121212;

      --btn-primary-bg: #121212;
      --btn-primary-text: #FFFFFF;
      --btn-primary-border: #121212;
      --btn-primary-hover-bg: #D6FF00;
      --btn-primary-hover-text: #121212;

      --btn-secondary-bg: #FFFFFF;
      --btn-secondary-text: #121212;
      --btn-secondary-border: #121212;
      --btn-secondary-hover-bg: #121212;
      --btn-secondary-hover-text: #FFFFFF;

      --card-bg-hover: #FFFFFF;
      --card-border-hover: #121212;

      /* Standard Border Radii - Hard Edges Globally */
      --border-radius-sharp: 0px;
      --border-radius-xs: 0px;
      --border-radius-soft: 0px;
      --border-radius-s: 0px;
      --border-radius-m: 0px;
      --border-radius-pill: 9999px; /* Specimen only */

      --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
    }

    [data-theme="dark"] {
      /* DARK OBSIDIAN ARCHITECTURAL PALETTE */
      --bg-base: #0E0E0E;
      --bg-surface: #181818;
      --bg-surface-elevated: #222222;
      --bg-surface-subtle: #202020;
      --bg-stage: #141414;
      --bg-code: #141414;
      --border-subtle: #2E2E2E;
      --border-strong: #444444;
      --border-focus: #D6FF00;

      --text-primary: #F5F5F5;
      --text-secondary: #B0B0B0;
      --text-muted: #8C8C8C;

      /* High-contrast Graphic Accents */
      --accent-volt: #D6FF00;
      --accent-cyan: #D6FF00;
      --accent-contrast: #121212;
      --accent-amber: #FBBF24;
      --accent-blue: #60A5FA;
      --accent-emerald: #34D399;
      --accent-purple: #A78BFA;
      --accent-rose: #FB7185;

      --badge-bg: #D6FF00;
      --badge-text: #121212;

      --code-box-bg: #141414;
      --code-box-text: #F5F5F5;
      --code-box-border: #333333;

      --btn-primary-bg: #F5F5F5;
      --btn-primary-text: #121212;
      --btn-primary-border: #F5F5F5;
      --btn-primary-hover-bg: #D6FF00;
      --btn-primary-hover-text: #121212;

      --btn-secondary-bg: #181818;
      --btn-secondary-text: #F5F5F5;
      --btn-secondary-border: #333333;
      --btn-secondary-hover-bg: #282828;
      --btn-secondary-hover-text: #D6FF00;

      --card-bg-hover: #1E1E1E;
      --card-border-hover: #D6FF00;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* GLOBAL HARD EDGES: Force flat planes and remove extraneous styling */
    *, *::before, *::after {
      border-radius: 0;
      box-shadow: none !important;
      text-shadow: none !important;
    }

    body {
      font-family: var(--font-main);
      background-color: var(--bg-base);
      color: var(--text-primary);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* TYPOGRAPHY HIERARCHY - PROMINENT LARGE HEADERS */
    h1, .h1 {
      font-size: 58px;
      font-weight: 900;
      letter-spacing: -2.2px;
      line-height: 1.06;
      color: var(--text-primary);
    }
    h2, .h2 {
      font-size: 36px;
      font-weight: 800;
      letter-spacing: -1.2px;
      line-height: 1.15;
      color: var(--text-primary);
    }
    h3, .h3 {
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -0.6px;
      line-height: 1.25;
      color: var(--text-primary);
    }
    h4, .h4 {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.3px;
      line-height: 1.35;
      color: var(--text-primary);
    }

    /* Container constraint */
    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
    }

    /* ==========================================================================
       TOP NAVIGATION
       ========================================================================== */
    .top-nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--bg-surface);
      border-bottom: 2px solid var(--border-subtle);
      padding: 14px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: inherit;
    }
    .brand-badge {
      background: var(--badge-bg);
      color: var(--badge-text);
      font-size: 11px;
      font-weight: 800;
      padding: 3px 7px;
      letter-spacing: 0.5px;
      font-family: var(--font-mono);
    }
    .brand-title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.2px;
      color: var(--text-primary);
      text-transform: uppercase;
    }
    .brand-version {
      font-size: 11px;
      color: var(--text-primary);
      font-family: var(--font-mono);
      background: transparent;
      border: 1px solid var(--border-subtle);
      padding: 2px 6px;
      font-weight: 600;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* ==========================================================================
       BUTTON BASE & ARCHETYPES
       ========================================================================== */
    .btn-base {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: var(--font-main);
      font-weight: 700;
      line-height: 1;
      text-decoration: none;
      cursor: pointer;
      border: 1.5px solid var(--border-subtle);
      outline: none;
      white-space: nowrap;
      user-select: none;
      transition: background-color 0.12s ease,
                  color 0.12s ease,
                  transform 0.1s ease;
    }

    .btn-base:focus-visible {
      outline: 3px solid var(--border-focus) !important;
      outline-offset: 3px !important;
    }

    /* SIZES */
    .btn-sm {
      padding: 7px 14px;
      font-size: 12px;
      min-height: 32px;
    }
    .btn-md {
      padding: 10px 20px;
      font-size: 14px;
      min-height: 40px;
    }
    .btn-lg {
      padding: 14px 28px;
      font-size: 15px;
      min-height: 48px;
    }

    /* SPECIMEN ARCHETYPES (BORDER RADII ARE PRESERVED WHEN ADVERTISED) */
    .btn-pill {
      border-radius: 9999px !important;
    }
    .btn-rounded {
      border-radius: 8px !important;
    }
    .btn-sharp {
      border-radius: 0px !important;
    }

    /* COLOR THEMES */
    .btn-primary {
      background: var(--btn-primary-bg);
      color: var(--btn-primary-text);
      border-color: var(--btn-primary-border);
    }
    .btn-primary:hover {
      background: var(--btn-primary-hover-bg);
      color: var(--btn-primary-hover-text);
      border-color: var(--btn-primary-hover-bg);
    }
    .btn-primary:active {
      transform: translateY(1px);
    }

    .btn-secondary {
      background: var(--btn-secondary-bg);
      color: var(--btn-secondary-text);
      border-color: var(--btn-secondary-border);
    }
    .btn-secondary:hover {
      background: var(--btn-secondary-hover-bg);
      color: var(--btn-secondary-hover-text);
      border-color: var(--btn-secondary-hover-bg);
    }
    .btn-secondary:active {
      transform: translateY(1px);
    }

    .btn-emerald {
      background: var(--bg-surface);
      color: var(--text-primary);
      border-color: var(--border-subtle);
    }
    .btn-emerald:hover {
      background: #047857;
      color: #FFFFFF;
      border-color: #047857;
    }

    .btn-purple {
      background: var(--bg-surface);
      color: var(--text-primary);
      border-color: var(--border-subtle);
    }
    .btn-purple:hover {
      background: #4c1d95;
      color: #FFFFFF;
      border-color: #4c1d95;
    }

    /* ARCHETYPE: OUTLINE / GHOST */
    .btn-outline {
      background: transparent;
      color: var(--text-primary);
      border-width: 1.5px;
      border-color: var(--border-subtle);
    }
    .btn-outline:hover {
      background: var(--text-primary);
      color: var(--bg-surface);
      border-color: var(--text-primary);
    }

    /* ARCHETYPE: SURFACE TONAL */
    .btn-surface {
      background: var(--bg-surface-elevated);
      color: var(--text-primary);
      border-color: var(--border-subtle);
    }
    .btn-surface:hover {
      background: var(--text-primary);
      color: var(--bg-surface);
      border-color: var(--text-primary);
    }

    /* ARCHETYPE: UNDERLINE / TEXT ACTION */
    .btn-underline {
      background: transparent !important;
      border: none !important;
      padding: 4px 0 !important;
      color: var(--text-primary);
      position: relative;
      min-height: auto !important;
    }
    .btn-underline::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0%;
      height: 2px;
      background: var(--text-primary);
      transition: width 0.2s ease;
    }
    .btn-underline:hover::after {
      width: 100%;
    }
    .btn-underline .btn-chevron {
      transition: transform 0.15s ease;
    }
    .btn-underline:hover .btn-chevron {
      transform: translateX(4px);
    }

    /* ANIMATION EFFECT: SUBTLE LIFT */
    .btn-hover-lift:hover,
    .btn-hover-lift.sim-hover {
      transform: translateY(-2px);
    }
    .btn-hover-lift:active,
    .btn-hover-lift.sim-active {
      transform: translateY(0px);
    }

    /* ANIMATION EFFECT: BORDER HIGHLIGHT */
    .btn-hover-glow:hover,
    .btn-hover-glow.sim-hover {
      border-width: 2.5px;
    }

    /* SIMULATED FREEZE STATES FOR ISOLATION TESTING */
    .sim-hover.btn-primary { background: var(--btn-primary-hover-bg); color: var(--btn-primary-hover-text); border-color: var(--btn-primary-hover-border); }
    .sim-hover.btn-secondary { background: var(--btn-secondary-hover-bg); color: var(--btn-secondary-hover-text); border-color: var(--btn-secondary-hover-border); }
    .sim-hover.btn-outline { background: var(--btn-outline-hover-bg); color: var(--btn-outline-hover-text); border-color: var(--btn-outline-hover-border); }
    .sim-hover.btn-surface { background: var(--btn-surface-hover-bg); color: var(--btn-surface-hover-text); border-color: var(--btn-surface-hover-border); }
    .sim-hover.btn-underline::after { width: 100%; }
    .sim-hover.btn-underline .btn-chevron { transform: translateX(4px); }

    .sim-active { transform: translateY(1px) scale(0.98) !important; }
    .sim-focus { outline: 3px solid var(--border-focus) !important; outline-offset: 3px !important; }
    .sim-disabled { opacity: 0.35 !important; pointer-events: none !important; cursor: not-allowed !important; }

    /* ARCHETYPE: SPLIT BUTTON GROUP */
    .btn-split-group {
      display: inline-flex;
      overflow: hidden;
    }
    .btn-split-group .btn-split-main {
      border-right: none !important;
    }
    .btn-split-group .btn-split-addon {
      border-left: 1px solid rgba(226, 221, 215, 0.4) !important;
      padding-left: 10px;
      padding-right: 10px;
    }

    /* ARCHETYPE: ICON BUTTON */
    .btn-icon-square {
      padding: 0;
      width: 38px;
      height: 38px;
    }
    .btn-icon-circle {
      padding: 0;
      width: 38px;
      height: 38px;
      border-radius: 9999px !important; /* Preserved specimen */
    }

    /* DISABLED STATE */
    .btn-base:disabled,
    .btn-base.disabled {
      opacity: 0.35;
      cursor: not-allowed !important;
      pointer-events: none !important;
      transform: none !important;
    }

    /* Expanding ripple (.btn-overlay-fx) */
    .btn-overlay-fx {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transition: color 0.2s ease, transform 0.15s ease, border-color 0.15s ease;
    }
    .btn-overlay-fx > * {
      position: relative;
      z-index: 2;
      transition: color 0.2s ease;
    }
    .btn-overlay-fx::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 14px;
      height: 14px;
      border-radius: 50% !important; /* Preserved circle ripple */
      background: #D6FF00;
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.45s ease-out, opacity 0.3s ease-out;
      z-index: 1;
    }
    .btn-overlay-fx:hover::after {
      transform: translate(-50%, -50%) scale(20);
      opacity: 1;
      transition: transform 0.65s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.12s ease-in;
    }
    .btn-primary.btn-overlay-fx:hover {
      background: #121212 !important; /* Keep base background steady so radial expansion is the sole motion */
    }
    .btn-overlay-fx:hover,
    .btn-overlay-fx:hover > *,
    .btn-overlay-fx:hover span {
      background: transparent !important;
      color: #121212 !important; /* Dark color so it contrasts with the lime green (#D6FF00) wave */
    }
    .btn-outline.btn-overlay-fx:hover {
      background: transparent !important;
      color: #121212 !important;
    }


    .code-box {
      background: var(--code-box-bg) !important;
      border: 1px solid var(--code-box-border) !important;
      color: var(--code-box-text) !important;
    }
    .code-box code, .code-box pre {
      background: transparent !important;
      color: var(--code-box-text) !important;
    }

    /* ARCHETYPE CARD ROWS */
    .archetype-row-card {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 24px;
      background: var(--bg-surface);
      border: 1.5px solid var(--border-subtle);
      padding: 24px 28px;
      align-items: center;
    }
    .archetype-row-card h2 {
      font-size: 32px !important;
      font-weight: 800 !important;
      letter-spacing: -1.2px !important;
      line-height: 1.15 !important;
      margin: 0 0 8px 0 !important;
      color: var(--text-primary) !important;
    }
    @media (max-width: 900px) {
      .archetype-row-card {
        grid-template-columns: 1fr;
      }
    }
    .archetype-stage {
      background: var(--bg-surface-subtle);
      border: 1.5px solid var(--border-subtle);
      min-height: 140px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 24px;
    }
    .hover-anim-off .btn-hover-lift:hover {
      transform: none !important;
    }
    .hover-anim-off .btn-underline::after {
      display: none !important;
    }
    .hover-anim-off .btn-underline:hover .btn-chevron {
      transform: none !important;
    }
    .hover-anim-off .btn-overlay-fx::after {
      display: none !important;
    }

    /* GLOBAL HOVER ANIMATIONS DISABLE SWITCH */
    .hover-anim-off .btn-base,
    .hover-anim-off .btn-base:hover {
      transform: none !important;
      transition: none !important;
    }
    .hover-anim-off .btn-overlay-fx::after {
      display: none !important;
      transform: none !important;
      opacity: 0 !important;
    }
    .hover-anim-off .btn-underline:hover::after {
      width: 0% !important;
    }
    .hover-anim-off .btn-underline:hover .btn-chevron {
      transform: none !important;
    }

    /* ==========================================================================
       VIEW 1: CLEAR ABOVE-THE-FOLD HERO INTRO (FLAT & EDITORIAL)
       ========================================================================== */
    #view-hub {
      padding: 40px 0 80px;
    }

    .hub-hero {
      margin-bottom: 40px;
      padding: 16px 0 36px;
      border-bottom: 2px solid var(--border-subtle);
    }
    .hub-hero-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .hub-hero-eyebrow {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--text-primary);
      background: transparent;
      border: 1.5px solid var(--border-subtle);
      padding: 4px 10px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
    }
    .hub-hero-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--text-primary);
      background: transparent;
      border: 1.5px solid var(--border-subtle);
      padding: 4px 10px;
    }
    .hub-hero-status::before {
      content: '';
      display: inline-block;
      width: 7px;
      height: 7px;
      background: var(--accent-volt);
    }
    .hub-hero-title {
      font-size: 72px;
      font-weight: 900;
      letter-spacing: -2.8px;
      line-height: 1.02;
      color: var(--text-primary);
      margin: 0 0 20px 0;
      max-width: 1080px;
    }
    .hub-hero-desc {
      font-size: 17.5px;
      line-height: 1.6;
      color: var(--text-secondary);
      max-width: 880px;
      margin: 0 0 32px 0;
    }
    .hub-hero-desc strong {
      color: var(--text-primary);
      font-weight: 700;
    }

    /* Key Architecture Pillars / Metrics Bar */
    .hub-hero-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }
    .hub-stat-card {
      background: var(--bg-surface);
      border: 1.5px solid var(--border-subtle);
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: background-color 0.15s ease;
    }
    .hub-stat-card:hover {
      background: var(--card-bg-hover);
      border-color: var(--card-border-hover);
    }
    .hub-stat-card:hover .hub-stat-badge {
      background: var(--badge-bg);
      color: var(--badge-text);
      border-color: var(--badge-bg);
    }
    .hub-stat-header {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .hub-stat-num {
      font-family: var(--font-mono);
      font-size: 32px;
      font-weight: 800;
      color: var(--text-primary);
      letter-spacing: -1px;
    }
    .hub-stat-badge {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--text-primary);
      background: transparent;
      border: 1px solid var(--border-subtle);
      padding: 2px 6px;
    }
    .hub-stat-label {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .hub-stat-sub {
      font-size: 11.5px;
      color: var(--text-secondary);
      line-height: 1.45;
    }

    /* Quick Workflow Guide Bar */
    .hub-hero-guide {
      background: var(--bg-surface);
      border: 1.5px solid var(--border-subtle);
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .hub-guide-items {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .hub-guide-step {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-secondary);
    }
    .hub-step-num {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 800;
      color: var(--badge-text);
      background: var(--badge-bg);
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .hub-step-text strong {
      color: var(--text-primary);
      font-weight: 700;
    }
    .hub-hero-cta {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .btn-hero-primary {
      background: var(--btn-primary-bg);
      color: var(--btn-primary-text);
      border: 1.5px solid var(--btn-primary-border);
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-hero-primary:hover {
      background: var(--btn-primary-hover-bg);
      color: var(--btn-primary-hover-text);
      border-color: var(--btn-primary-hover-border);
    }
    .btn-hero-secondary {
      background: transparent;
      color: var(--btn-secondary-text);
      border: 1.5px solid var(--btn-secondary-border);
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-hero-secondary:hover {
      background: var(--btn-secondary-hover-bg);
      color: var(--btn-secondary-hover-text);
      border-color: var(--btn-secondary-hover-border);
    }

    @media (max-width: 960px) {
      .hub-hero-stats {
        grid-template-columns: repeat(2, 1fr);
      }
      .hub-hero-title {
        font-size: 52px;
        letter-spacing: -2px;
      }
      .lab-title {
        font-size: 44px;
        letter-spacing: -1.6px;
      }
      .module-title {
        font-size: 32px;
        letter-spacing: -1px;
      }
    }
    @media (max-width: 640px) {
      .hub-hero-stats {
        grid-template-columns: 1fr;
      }
      .hub-hero-title {
        font-size: 40px;
        letter-spacing: -1.4px;
      }
      .lab-title {
        font-size: 36px;
        letter-spacing: -1.2px;
      }
      .module-title {
        font-size: 26px;
        letter-spacing: -0.8px;
      }
      .archetype-row-card h2 {
        font-size: 24px !important;
      }
    }

    /* ==========================================================================
       CATEGORY FILTER BAR
       ========================================================================== */
    .filter-bar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 32px;
      border-bottom: 2px solid var(--border-subtle);
      padding-bottom: 20px;
    }
    .filter-chip {
      background: transparent;
      border: 1.5px solid var(--border-subtle);
      color: var(--text-primary);
      padding: 7px 16px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: var(--font-mono);
      transition: all 0.12s ease;
    }
    .filter-chip:hover {
      background: var(--badge-bg);
      color: var(--badge-text);
      border-color: var(--badge-bg);
    }
    .filter-chip.active {
      background: var(--badge-bg);
      color: var(--badge-text);
      border-color: var(--badge-bg);
    }

    /* ==========================================================================
       MODULE ROWS MATRIX (1 ITEM PER ROW)
       ========================================================================== */
    .matrix-grid {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .module-card {
      background: transparent;
      border: 1.5px solid var(--border-subtle);
      padding: 32px;
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(360px, 440px);
      gap: 36px;
      align-items: center;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      position: relative;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }
    @media (max-width: 960px) {
      .module-card {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
      }
    }
    .module-card:hover {
      background: var(--card-bg-hover);
      border-color: var(--card-border-hover);
    }

    .module-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .module-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }
    .module-tag {
      font-size: 11px;
      font-family: var(--font-mono);
      font-weight: 700;
      color: var(--text-primary);
      background: transparent;
      border: 1px solid var(--border-subtle);
      padding: 3px 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .module-icon {
      font-size: 13px;
      color: var(--text-primary);
      font-family: var(--font-mono);
      font-weight: 700;
    }
    .module-title {
      font-size: 38px;
      font-weight: 800;
      color: var(--text-primary);
      margin-bottom: 12px;
      letter-spacing: -1.4px;
      line-height: 1.15;
    }
    .module-desc {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 24px;
      max-width: 620px;
    }

    /* Left Action CTA */
    .module-action-wrap {
      display: flex;
      width: fit-content;
    }
    .module-action-btn {
      padding: 10px 22px;
      background: var(--btn-primary-bg);
      border: 1.5px solid var(--border-subtle);
      color: var(--btn-primary-text);
      font-size: 13px;
      font-weight: 700;
      font-family: var(--font-mono);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      letter-spacing: 0.3px;
      transition: all 0.15s ease;
    }
    .module-card:hover .module-action-btn {
      background: var(--accent-volt);
      color: #121212;
      border-color: var(--accent-volt);
    }
    .action-btn-arrow {
      transition: transform 0.15s ease;
      font-size: 14px;
    }
    .module-card:hover .action-btn-arrow {
      transform: translateX(4px);
    }
    .module-card:hover .module-tag {
      background: var(--badge-bg);
      color: var(--badge-text);
      border-color: var(--badge-bg);
    }

    /* Right Preview Snapshot Box */
    .module-preview {
      background: var(--bg-stage);
      border: 1.5px solid var(--border-subtle);
      height: 190px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      transition: background-color 0.15s ease;
      pointer-events: none;
    }

    /* Phones and tablets: a card's preview grows to fit its content instead of cutting it off. */
    @media (max-width: 900px) {
      .module-preview { height: auto; min-height: 190px; }
    }
    @media (max-width: 600px) {
      .sim-header { padding: 0 12px; gap: 10px; }
      .sim-header-brand { min-width: 0; }
      .sim-header-brand > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .sim-header-link { display: none; }
      .sim-header-dot { flex: none; }
      .sim-state-tag { white-space: nowrap; font-size: 10px; }
      .snap-design { padding: 0; }
    }
    @media (max-width: 440px) {
      .sim-header-brand > span:last-child { display: none; }
    }
    .module-card:hover .module-preview {
      background: var(--bg-surface-subtle);
    }

    /* Specific Snapshot Visuals */
    /* 1. Buttons Preview */
    .snap-buttons-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      width: 100%;
    }
    .snap-btn-row {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .snap-meta-row {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--text-secondary);
      letter-spacing: 0.5px;
      display: flex;
      gap: 12px;
    }

    /* 2. Slide Fade Stagger Preview */
    .snap-slide-stage {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      height: 100%;
      justify-content: center;
    }
    .snap-slide-row {
      display: flex;
      gap: 10px;
      align-items: flex-end;
      width: 100%;
    }
    .snap-fade-card {
      flex: 1;
      background: var(--bg-surface);
      border: 1.5px solid var(--border-subtle);
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .snap-fade-card.card-1 {
      border-width: 2px;
      background: var(--bg-surface);
    }
    .snap-fade-card.card-2 {
      transform: translateY(6px);
      opacity: 0.85;
    }
    .snap-fade-card.card-3 {
      transform: translateY(12px);
      opacity: 0.55;
    }
    .snap-mini-bar {
      height: 6px;
      background: var(--border-strong);
      width: 65%;
    }
    .card-1 .snap-mini-bar { width: 80%; }
    .snap-card-meta {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .snap-slide-footer {
      display: flex;
      justify-content: space-between;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--text-secondary);
    }

    /* 3. Exit Fade Schematic */
    .snap-exit-stage {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      justify-content: space-between;
      position: relative;
    }
    .snap-zone {
      padding: 7px 12px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid var(--border-subtle);
    }
    .snap-zone-exit {
      background: transparent;
      border-style: dashed;
      color: var(--text-primary);
    }
    .snap-zone-mid {
      background: var(--bg-surface);
      color: var(--text-primary);
      border-width: 2px;
    }
    .snap-zone-enter {
      background: transparent;
      border-style: dashed;
      color: var(--text-primary);
    }

    /* 4. Marquee Loop */
    .snap-marquee-mask {
      width: 100%;
      overflow: hidden;
      position: relative;
    }
    .snap-marquee-track {
      display: flex;
      gap: 10px;
      width: max-content;
      animation: snapMarqueeAnim 10s linear infinite;
    }
    @keyframes snapMarqueeAnim {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .snap-pill {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      padding: 6px 14px;
      background: var(--bg-surface);
      border: 1.5px solid var(--border-subtle);
      color: var(--text-primary);
      white-space: nowrap;
    }

    /* 5. Smart Directional Header */
    .snap-browser {
      width: 100%;
      height: 100%;
      background: var(--bg-surface);
      border: 1.5px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .snap-browser-bar {
      height: 24px;
      background: var(--bg-surface-elevated);
      border-bottom: 1.5px solid var(--border-subtle);
      display: flex;
      align-items: center;
      padding: 0 8px;
      gap: 6px;
    }
    .snap-browser-dot {
      width: 6px;
      height: 6px;
      background: var(--text-muted);
    }
    .snap-browser-view {
      flex: 1;
      position: relative;
      overflow: hidden;
      background: var(--bg-stage);
    }
    .snap-sim-header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 28px;
      background: var(--badge-bg);
      color: var(--badge-text);
      border-bottom: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      font-size: 10px;
      font-family: var(--font-mono);
      font-weight: 700;
    }
    .snap-sim-body {
      padding: 38px 10px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .snap-sim-line {
      height: 6px;
      background: var(--bg-surface-elevated);
      border: 1px solid var(--border-subtle);
      width: 100%;
    }
    .snap-sim-line.w-80 { width: 80%; }
    .snap-sim-line.w-60 { width: 60%; }

    /* 6. Video Dialog Thumbnail */
    .snap-video-thumb {
      width: 100%;
      height: 100%;
      background: var(--bg-surface);
      border: 1.5px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .snap-play-ring {
      width: 48px;
      height: 48px;
      background: var(--badge-bg);
      border: 2px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--badge-text);
      font-size: 14px;
    }
    .snap-video-tag {
      position: absolute;
      bottom: 8px;
      left: 8px;
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      background: var(--badge-bg);
      color: var(--badge-text);
      padding: 2px 6px;
    }

    /* 7. Global Classes & Scale Snap */
    .snap-classes-specimen {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      height: 100%;
      justify-content: center;
    }
    .snap-scale-bars {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .snap-scale-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .snap-scale-track {
      flex: 1;
      height: 10px;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      position: relative;
    }
    .snap-scale-fill {
      height: 100%;
      background: var(--border-strong);
    }

    /* 8. Theme Blueprint Snap */
    .snap-blueprint-tree {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }
    .snap-blueprint-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 10px;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .snap-blueprint-badge {
      background: var(--badge-bg);
      color: var(--badge-text);
      padding: 2px 6px;
      font-size: 9px;
    }

    /* 9. A11y Focus Snap */
    .snap-a11y-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
      height: 100%;
      border: 1.5px solid var(--border-subtle);
    }
    .snap-a11y-dark {
      background: var(--bg-surface);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px;
      border-right: 1.5px solid var(--border-subtle);
    }
    .snap-a11y-navy {
      background: var(--bg-surface-elevated);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px;
    }
    .snap-focus-cyan {
      outline: 3px solid var(--border-focus) !important;
      outline-offset: 3px !important;
      font-size: 11px;
      font-weight: 700;
      padding: 6px 12px;
      background: var(--bg-surface);
      color: var(--text-primary);
      border: 1px solid var(--border-subtle);
    }
    .snap-focus-yellow {
      outline: 3px solid var(--border-focus) !important;
      outline-offset: 3px !important;
      font-size: 11px;
      font-weight: 700;
      padding: 6px 12px;
      background: var(--bg-surface);
      color: var(--text-primary);
      border: 1px solid var(--border-subtle);
    }
    .snap-a11y-tag {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      color: var(--text-secondary);
    }

    /* 10. Security Honeypot Snap */
    .snap-sec-stack {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }
    .snap-sec-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 10px;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .snap-badge-ok {
      color: var(--badge-text);
      background: var(--badge-bg);
      padding: 2px 6px;
    }
    .snap-badge-trap {
      color: #FFFFFF;
      background: #be123c;
      padding: 2px 6px;
    }
    .snap-badge-bot {
      color: var(--text-primary);
      background: transparent;
      border: 1px solid var(--border-subtle);
      padding: 2px 6px;
    }

    /* 11. Lenis Waveform Oscilloscope Snap */
    .snap-lenis-stage {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }
    .snap-lenis-meta {
      display: flex;
      justify-content: space-between;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--text-secondary);
      margin-top: 6px;
      padding: 0 4px;
    }

    /* 12. Plugins Suite Snap Dashboard */
    .snap-plugin-dashboard {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 4px 0;
    }
    .snap-plugin-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .snap-theme-pill {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--badge-text);
      background: var(--badge-bg);
      border: 1px solid var(--border-subtle);
      padding: 3px 8px;
    }
    .snap-perf-badge {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .snap-plugin-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .snap-plugin-chip {
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 700;
      padding: 3px 7px;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      color: var(--text-primary);
    }
    .snap-plugin-footer {
      display: flex;
      gap: 8px;
      align-items: center;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--text-secondary);
    }

    /* ==========================================================================
       VIEW 2: DRILL-DOWN COMPONENT TEST LAB
       ========================================================================== */
    #view-detail {
      display: none;
      padding: 0 0 80px;
      background: var(--bg-base);
      color: var(--text-primary);
    }
    #view-detail.active {
      display: block;
    }

    /* Sticky Detail Subnav */
    .detail-subnav {
      position: sticky;
      top: var(--nav-h, 70px);
      z-index: 90;
      background: var(--bg-surface);
      border-bottom: 2px solid var(--border-subtle);
      padding: 12px 32px;
      margin-bottom: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .subnav-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .btn-back-hub {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--btn-primary-bg);
      border: 1.5px solid var(--btn-primary-border);
      color: var(--btn-primary-text);
      padding: 7px 16px;
      font-size: 13px;
      font-weight: 700;
      font-family: var(--font-mono);
      cursor: pointer;
      text-decoration: none;
      transition: all 0.12s ease;
    }
    .btn-back-hub:hover {
      background: var(--btn-primary-hover-bg);
      color: var(--btn-primary-hover-text);
      border-color: var(--btn-primary-hover-border);
    }
    .btn-back-hub kbd {
      background: transparent;
      border: 1px solid currentColor;
      padding: 1px 5px;
      font-size: 10px;
      font-family: var(--font-mono);
      color: inherit;
    }

    .detail-breadcrumb {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
    }
    .detail-breadcrumb span.active-crumb {
      color: var(--text-primary);
      font-weight: 800;
    }

    .subnav-right {
      display: flex;
      gap: 10px;
    }

    /* Lab Stage Container */
    .lab-stage {
      display: none;
    }
    .lab-stage.active {
      display: block;
    }

    .lab-header {
      margin-bottom: 32px;
    }
    .lab-title {
      font-size: 58px;
      font-weight: 900;
      color: var(--text-primary);
      margin-bottom: 12px;
      letter-spacing: -2.2px;
      line-height: 1.06;
    }
    .lab-description {
      color: var(--text-secondary);
      font-size: 17px;
      max-width: 860px;
      line-height: 1.6;
    }

    /* Clean Card Container */
    .clean-card {
      background: var(--bg-surface);
      border: 1.5px solid var(--border-subtle);
      padding: 28px;
      margin-bottom: 24px;
    }
    .clean-card-title {
      font-size: 30px;
      font-weight: 800;
      color: var(--text-primary);
      margin-bottom: 10px;
      letter-spacing: -0.8px;
      line-height: 1.2;
    }
    .clean-card-desc {
      font-size: 14px;
      color: var(--text-secondary);
      margin-bottom: 20px;
    }

    /* Grid utilities */
    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    @media (max-width: 860px) {
      .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
      }
    }

    /* Code Block Box */
    .code-box {
      background: var(--code-box-bg);
      border: 1.5px solid var(--code-box-border);
      padding: 16px;
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 600;
      color: var(--code-box-text);
      overflow-x: auto;
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* ==========================================================================
       SLIDE FADE BLUR & EXIT FADE PARALLAX STYLES
       ========================================================================== */
    .slide-fade-blur:not(.is-visible) .cascade-item {
      opacity: 0 !important;
      transform: translateY(32px) !important;
      filter: blur(4px) !important;
      transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                  filter 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .slide-fade-blur.is-visible .cascade-item {
      opacity: 1 !important;
      transform: translateY(0) !important;
      filter: blur(0px) !important;
      transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                  filter 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Dynamic Viewport Visual Guidelines */
    .viewport-guideline {
      position: fixed;
      left: 0;
      right: 0;
      z-index: 998;
      pointer-events: none;
      display: none;
      align-items: center;
      justify-content: flex-end;
      padding: 0 24px;
    }
    .viewport-guideline.active {
      display: flex;
    }
    #cascade-guideline {
      bottom: 180px;
      border-top: 2px dashed var(--border-subtle);
    }
    #cascade-guideline .guide-label {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--badge-text);
      background: var(--badge-bg);
      border: 1px solid var(--border-subtle);
      padding: 3px 10px;
      transform: translateY(-50%);
    }
    #exit-guide-top {
      top: 20vh;
      border-top: 2px dashed #be123c;
    }
    #exit-guide-top .guide-label {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: #FFFFFF;
      background: #be123c;
      border: 1px solid #be123c;
      padding: 3px 10px;
      transform: translateY(-50%);
    }
    #exit-guide-bottom {
      bottom: 200px;
      border-top: 2px dashed #b45309;
    }
    #exit-guide-bottom .guide-label {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: #FFFFFF;
      background: #b45309;
      border: 1px solid #b45309;
      padding: 3px 10px;
      transform: translateY(-50%);
    }

    /* Accessible Marquee */
    .marquee-wrapper {
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      background: var(--bg-stage);
      border: 1.5px solid var(--border-subtle);
      padding: 18px 0;
    }
    .marquee-track-container {
      display: inline-flex;
      width: max-content;
    }
    .marquee-track {
      display: inline-flex;
      align-items: center;
      gap: 32px;
      padding-right: 32px;
      animation: marquee-scroll var(--marquee-duration, 25s) linear infinite;
    }
    .marquee-wrapper:hover .marquee-track {
      animation-play-state: paused;
    }
    @keyframes marquee-scroll {
      from { transform: translateX(0%); }
      to { transform: translateX(-100%); }
    }
    .marquee-pill {
      background: var(--bg-surface);
      border: 1.5px solid var(--border-subtle);
      padding: 8px 18px;
      border-radius: 9999px !important; /* Preserved pill specimen */
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    /* Smart Header Simulation Frame */
    .sim-viewport-frame {
      border: 1.5px solid var(--border-subtle);
      overflow: hidden;
      background: var(--bg-surface);
      height: 300px;
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .sim-admin-bar {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 32px;
      background: #1d2327;
      color: #f0f0f1;
      font-size: 11px;
      padding: 0 14px;
      font-family: var(--font-mono);
      display: none;
      align-items: center;
      justify-content: space-between;
      z-index: 30;
      border-bottom: 1px solid #121212;
      user-select: none;
    }
    .sim-admin-bar.active {
      display: flex;
    }
    .sim-admin-bar-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sim-wp-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 50% !important;
      background: #3858e9;
      color: var(--text-primary);
      font-size: 10px;
      font-weight: 700;
    }
    .sim-admin-bar-user {
      color: #a7aaad;
      font-size: 11px;
    }
    .sim-header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 52px;
      background: var(--bg-surface);
      border-bottom: 1.5px solid var(--border-subtle);
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 20;
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), top 0.2s ease;
      user-select: none;
    }
    .sim-header-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .sim-header-dot {
      width: 8px;
      height: 8px;
      background: var(--accent-volt);
    }
    .sim-state-tag {
      font-size: 11px;
      font-family: var(--font-mono);
      font-weight: 700;
      padding: 3px 8px;
      transition: all 0.2s ease;
    }
    .sim-state-tag.visible {
      color: var(--badge-text);
      background: var(--badge-bg);
      border: 1px solid var(--badge-bg);
    }
    .sim-state-tag.hidden {
      color: #FFFFFF;
      background: #be123c;
      border: 1px solid #be123c;
    }
    .sim-scroll-canvas {
      overflow-y: auto;
      height: 100%;
      padding: 72px 24px 32px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      background: var(--bg-base);
      transition: padding-top 0.2s ease;
    }
    .sim-content-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .sim-scroll-hint {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Lightbox Modal */
    .plb-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(8, 8, 8, 0.85);
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .plb-overlay.active {
      display: flex;
    }
    .plb-container {
      position: relative;
      width: 100%;
      max-width: 900px;
      aspect-ratio: 16 / 9;
      background: #000;
      overflow: hidden;
      border: 2px solid var(--border-subtle);
    }
    .plb-close-btn {
      position: absolute;
      top: -40px;
      right: 0;
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-mono);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Toast */
    #toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: var(--btn-primary-bg);
      border: 2px solid var(--btn-primary-border);
      color: var(--btn-primary-text);
      font-size: 13px;
      font-weight: 700;
      font-family: var(--font-mono);
      padding: 10px 18px;
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.2s ease;
      z-index: 10000;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    #toast.show {
      transform: translateY(0);
      opacity: 1;
    }

    /* ==========================================================================
       GLOBAL CLASSES & SCALE EXPLORER (FLAT & SHARP)
       ========================================================================== */
    .classes-controls-panel {
      background: var(--bg-surface);
      border: 1.5px solid var(--border-subtle);
      padding: 18px 22px;
      margin-bottom: 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .classes-search-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .classes-search-box {
      flex: 1;
      min-width: 280px;
      position: relative;
      display: flex;
      align-items: center;
    }
    .classes-search-icon {
      position: absolute;
      left: 12px;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 700;
      pointer-events: none;
    }
    .classes-search-input {
      width: 100%;
      background: var(--bg-surface-elevated);
      border: 1.5px solid var(--border-subtle);
      padding: 10px 36px 10px 34px;
      color: var(--text-primary);
      font-size: 13px;
      font-family: inherit;
      outline: none;
    }
    .classes-search-input:focus {
      background: var(--bg-surface);
      border-color: var(--border-focus);
    }
    .classes-search-input::placeholder {
      color: var(--text-muted);
      opacity: 0.85;
    }
    .classes-search-clear {
      position: absolute;
      right: 10px;
      background: none;
      border: none;
      color: var(--text-primary);
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      padding: 4px;
      display: none;
    }
    .classes-search-clear.active {
      display: block;
    }
    .classes-status-pill {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      color: var(--text-primary);
      background: transparent;
      border: 1.5px solid var(--border-subtle);
      padding: 6px 14px;
      white-space: nowrap;
    }
    .classes-cat-chips-scroll {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .classes-explorer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
      gap: 18px;
    }
    .class-showcase-card {
      background: var(--bg-surface);
      border: 1.5px solid var(--border-subtle);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      transition: all 0.12s ease;
    }
    .class-showcase-card:hover {
      background: var(--card-bg-hover);
      border-color: var(--card-border-hover);
    }
    .class-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }
    .class-name-pill {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 800;
      color: var(--badge-text);
      background: var(--badge-bg);
      border: 1px solid var(--border-subtle);
      padding: 4px 10px;
    }
    .class-cat-badge {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-primary);
      background: transparent;
      padding: 3px 8px;
      border: 1px solid var(--border-subtle);
    }
    .btn-copy-class-mini {
      background: transparent;
      border: 1px solid var(--border-subtle);
      color: var(--text-primary);
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 700;
      font-family: var(--font-mono);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .btn-copy-class-mini:hover {
      background: var(--badge-bg);
      color: var(--badge-text);
      border-color: var(--badge-bg);
    }
    .class-desc {
      font-size: 12.5px;
      color: var(--text-secondary);
      line-height: 1.5;
      margin: 0;
    }
    .class-spec-box {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      color: var(--code-box-text);
      background: var(--code-box-bg);
      border: 1px solid var(--code-box-border);
      padding: 8px 12px;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .class-example-stage {
      background: var(--bg-stage);
      color: var(--text-primary);
      border: 1.5px solid var(--border-subtle);
      min-height: 80px;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .class-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid var(--border-subtle);
    }
    .btn-copy-css {
      background: transparent;
      border: none;
      color: var(--text-secondary);
      font-size: 11px;
      font-weight: 700;
      font-family: var(--font-mono);
      cursor: pointer;
      padding: 2px 4px;
    }
    .btn-copy-css:hover {
      color: var(--text-primary);
      text-decoration: underline;
    }
    .btn-copy-full {
      background: var(--btn-primary-bg);
      border: 1px solid var(--border-subtle);
      color: var(--btn-primary-text);
      font-size: 11px;
      font-weight: 700;
      font-family: var(--font-mono);
      padding: 4px 10px;
      cursor: pointer;
    }
    .btn-copy-full:hover {
      background: var(--btn-primary-hover-bg);
      color: var(--btn-primary-hover-text);
      border-color: var(--btn-primary-hover-bg);
    }
    .classes-empty-state {
      background: var(--bg-surface);
      border: 1.5px dashed var(--border-subtle);
      padding: 48px 24px;
      text-align: center;
    }

    /* SPECIMEN RADIUS PRESERVATION FOR ADVERTISED CLASSES */
    .card-border-radius {
      border-radius: 24px !important; /* Preserved specimen */
      overflow: hidden;
    }
    .card-border-soft {
      border: 1.5px solid var(--border-subtle);
      border-radius: 24px !important; /* Preserved specimen */
    }
    .border-radius-pill {
      border-radius: 9999px !important; /* Preserved specimen */
    }

    /* SPECIMEN SHADOW PRESERVATION FOR ADVERTISED CLASSES */
    .fx-card-hover {
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
    }
    .fx-card-hover:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important; /* Preserved advertised shadow */
    }
    .fx-shadow-hover {
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    }
    .fx-shadow-hover:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.15) !important; /* Preserved advertised shadow */
    }

    /* ==========================================================================
       MODULE 11: WORDPRESS BASELINE PLUGINS SUITE (FLAT & CRISP)
       ========================================================================== */
    .plugins-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
      gap: 20px;
    }
    .plugin-card {
      background: var(--bg-surface);
      border: 1.5px solid var(--border-subtle);
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: all 0.12s ease;
      position: relative;
    }
    .plugin-card:hover {
      background: var(--card-bg-hover);
      border-color: var(--card-border-hover);
    }
    .plugin-card.is-protected {
      border-left: 6px solid var(--border-strong);
    }
    .plugin-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }
    .plugin-title-wrap {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .plugin-name {
      font-size: 20px;
      font-weight: 800;
      color: var(--text-primary);
      margin: 0;
      letter-spacing: -0.4px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .plugin-slug {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
    }
    .plugin-badges {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .plugin-badge-source {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      background: transparent;
      border: 1px solid var(--border-subtle);
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .plugin-badge-protected {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 800;
      padding: 3px 8px;
      color: var(--badge-text);
      background: var(--badge-bg);
      border: 1px solid var(--border-subtle);
    }
    .plugin-summary-box {
      font-size: 13.5px;
      color: var(--text-primary);
      font-weight: 600;
      line-height: 1.5;
      background: var(--bg-surface-elevated);
      border-left: 3px solid var(--border-strong);
      padding: 10px 14px;
    }
    .plugin-section-title {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--text-primary);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .plugin-importance-text {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 0;
    }
    .plugin-highlights-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 0;
      padding-left: 0;
      list-style: none;
    }
    .plugin-highlights-list li {
      font-size: 12.5px;
      color: var(--text-secondary);
      display: flex;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.45;
    }
    .plugin-highlights-list li::before {
      content: '■';
      color: var(--text-primary);
      font-size: 8px;
      margin-top: 4px;
    }
    .plugin-card-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding-top: 16px;
      border-top: 1px solid var(--border-subtle);
      margin-top: auto;
    }

    /* Plugin search & filter bar in Lab 11 */
    #plugins-search-input {
      background: var(--bg-surface-elevated);
      border: 1.5px solid var(--border-subtle);
      color: var(--text-primary);
    }
    #plugins-cat-chips .filter-chip {
      background: transparent;
      border: 1.5px solid var(--border-subtle);
      color: var(--text-primary);
    }
    #plugins-cat-chips .filter-chip.active {
      background: var(--badge-bg);
      color: var(--badge-text);
      border-color: var(--badge-bg);
    }


    /* Tokens that were referenced but never defined */
    :root, [data-theme="light"] {
      --btn-primary-hover-border: #121212;
      --btn-secondary-hover-border: #121212;
      --btn-outline-hover-bg: #121212; --btn-outline-hover-text: #FFFFFF; --btn-outline-hover-border: #121212;
      --btn-surface-hover-bg: #E2E2E2; --btn-surface-hover-text: #121212; --btn-surface-hover-border: #121212;
    }
    [data-theme="dark"] {
      --btn-primary-hover-border: #D6FF00;
      --btn-secondary-hover-border: #D6FF00;
      --btn-outline-hover-bg: #F5F5F5; --btn-outline-hover-text: #121212; --btn-outline-hover-border: #F5F5F5;
      --btn-surface-hover-bg: #282828; --btn-surface-hover-text: #F5F5F5; --btn-surface-hover-border: #444444;
    }
    /* ==========================================================================
       NORI SITE ADDITIONS: brand, navigation, download, install, FAQ, footer
       ========================================================================== */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped { overflow: hidden; }
    html, body { overflow-x: clip; }

    .skip-link {
      position: absolute; left: 12px; top: -60px; z-index: 200;
      background: var(--btn-primary-bg); color: var(--btn-primary-text);
      padding: 10px 14px; font-weight: 700; text-decoration: none;
    }
    .skip-link:focus { top: 12px; }

    /* The Nori mark: one-color SVG used as a mask, so its color follows the theme
       (dark olive on light backgrounds, lime on dark). */
    .nori-mark { display: block; flex-shrink: 0; aspect-ratio: 526.82 / 713.34; background-color: var(--nori-mark, var(--accent-cyan)); -webkit-mask: url(nori-mark.svg) center / contain no-repeat; mask: url(nori-mark.svg) center / contain no-repeat; }
    .brand-logo { width: auto; height: 40px; }
    .brand-title { text-transform: none; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; white-space: nowrap; }
    .brand-title-sub { font-weight: 500; color: var(--text-secondary); }
    .nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
    .nav-links a {
      color: var(--text-primary); text-decoration: none; font-size: 14px; font-weight: 600;
      padding: 8px 12px; border: 1.5px solid transparent;
    }
    .nav-links a:hover { border-color: var(--border-subtle); }
    .theme-toggle { font-family: var(--font-mono); font-size: 11px; padding: 6px 12px; gap: 6px; }
    .nav-download { white-space: nowrap; }
    .nav-support { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
    .support-cup { flex: none; vertical-align: -3px; }
    .install-support { margin: -2px 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); text-align: center; }
    .install-support a { color: var(--text-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
    .install-support .support-cup { margin-right: 4px; }

    .hub-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 12px; }
    .hub-hero-reqs { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }

    .module-uses { margin: 10px 0 18px; }
    .module-uses code {
      font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
      background: transparent; border: 1px dashed var(--border-subtle); padding: 3px 8px; display: inline-block;
    }
    .module-card:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 4px; }

    .section-heading { margin: 64px 0 20px; max-width: 760px; }
    .section-title { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; line-height: 1.1; color: var(--text-primary); }
    .section-sub { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
    .site-section { scroll-margin-top: 90px; }
    #modules { scroll-margin-top: 90px; }

    .steps-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .step-card { background: var(--bg-surface); border: 1.5px solid var(--border-subtle); padding: 22px; }
    .step-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-muted); }
    .step-card h3 { font-size: 18px; font-weight: 800; margin: 10px 0 8px; color: var(--text-primary); }
    .step-card p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
    .step-card code, .install-band code, .faq-item code {
      font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-surface-subtle); padding: 1px 5px;
    }

    .install-band {
      margin-top: 64px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start;
      background: var(--bg-surface); border: 2px solid var(--border-strong); padding: 36px;
    }
    .install-list { margin: 18px 0 0 20px; display: grid; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
    .install-note { margin-top: 18px; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
    .install-card { border: 1.5px solid var(--border-subtle); padding: 24px; display: grid; gap: 8px; justify-items: start; background: var(--bg-base); }
    .install-logo { width: auto; height: 72px; }
    .install-card-title { font-size: 20px; font-weight: 800; color: var(--text-primary); }
    .install-card-meta { font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); }
    .install-btn { margin: 8px 0 6px; }
    .install-zip { display: block; margin-bottom: 12px; font-size: 13px; color: var(--text-muted); }
    .install-zip:hover { color: var(--text); }
    .install-reqs { display: grid; gap: 6px; width: 100%; font-size: 13px; }
    .install-reqs div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border-subtle); padding-top: 6px; }
    .install-reqs dt { color: var(--text-muted); }
    .install-reqs dd { color: var(--text-primary); font-weight: 600; text-align: right; }

    .faq-list { display: grid; gap: 10px; max-width: 860px; margin-inline: auto; text-align: left; }
    #faq .section-heading { text-align: center; margin-inline: auto; }
    .faq-item { background: var(--bg-surface); border: 1.5px solid var(--border-subtle); }
    .faq-item summary { cursor: pointer; padding: 16px 20px; font-weight: 700; font-size: 16px; color: var(--text-primary); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: '+'; font-family: var(--font-mono); }
    .faq-item[open] summary::after { content: '−'; }
    .faq-item a { color: var(--text-primary); font-weight: 700; text-decoration: underline; }
    .faq-item p { padding: 0 20px 18px; font-size: 15px; line-height: 1.65; color: var(--text-secondary); }

    .site-footer { margin-top: 80px; border-top: 2px solid var(--border-subtle); background: var(--bg-surface); padding: 28px 0; }
    .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
    .footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text-primary); }
    .footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
    .footer-links a { color: var(--text-primary); font-size: 14px; font-weight: 600; }
    .footer-legal { width: 100%; font-size: 12px; color: var(--text-muted); }
    #view-detail.active ~ .site-footer { margin-top: 40px; }

    .lab-usage { border: 1.5px solid var(--border-subtle); background: var(--bg-surface); padding: 18px 20px; margin: 0 0 24px; }
    .lab-usage-title { font-size: 12px; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
    .lab-usage ol { margin-left: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
    .lab-usage code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-surface-subtle); padding: 1px 5px; }
    #classes-cat-chips .filter-chip { white-space: nowrap; flex-shrink: 0; }
    .class-module-hint { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); margin-top: -4px; }

    /* The plugin's two-tone focus ring, shown in the accessibility demo */
    .nori-two-tone :focus-visible { outline: 3px solid #000 !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px #fff !important; }

    @media (max-width: 1080px) {
      .steps-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 900px) {
      .nav-links { display: none; }
      .nav-actions { margin-left: auto; }
      .install-band { grid-template-columns: 1fr; padding: 24px; }
    }
    @media (max-width: 640px) {
      .top-nav { padding: 10px 16px; gap: 10px; }
      .container { padding: 0 16px; }
      .brand-title-sub, .brand-version, .nav-download-long, #theme-toggle-text, .nav-support-text { display: none; }
      .nav-support { padding-inline: 9px; }
      .brand-logo { height: 34px; }
      .steps-grid { grid-template-columns: 1fr; }
      .hub-hero-ctas .btn-base { width: 100%; justify-content: center; }
      .section-heading { margin-top: 48px; }
    }

    /* ==========================================================================
       0.6.0 SITE UPDATE: button builder, variables, plugin screen, changelog
       ========================================================================== */
    /* Demo buttons: the plugin's real default values (starter colors, 8px radius). */
    .bb-canvas { background: #FFFFFF; color: #111827; border: 1.5px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 28px 20px; }
    .bb-canvas--mini { padding: 18px 16px; }
    .nbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; font-family: var(--font-main); font-size: 15px; font-weight: 600; line-height: 1.2; border: 1.5px solid; border-radius: 8px; cursor: pointer; text-decoration: none; transition: all 200ms; }
    .nbtn--primary { background: #D6FF00; color: #111827; border-color: #D6FF00; }
    .nbtn--primary:is(:hover, :focus-visible) { background: #111827; color: #FFFFFF; border-color: #111827; }
    .nbtn--secondary { background: #111827; color: #FFFFFF; border-color: #111827; }
    .nbtn--secondary:is(:hover, :focus-visible) { background: #4B5563; border-color: #4B5563; }
    .nbtn:active { transform: translateY(1px); }
    .nbtn--outline { background: transparent; color: #111827; border-color: #111827; }
    .nbtn--outline:is(:hover, :focus-visible) { background: #111827; color: #FFFFFF; }
    .nbtn--text { background: transparent; color: #111827; border-color: transparent; padding: 6px 0; }
    .nbtn--text:is(:hover, :focus-visible) { color: #4B5563; }
    /* Sizes and shape win over the look, like in the plugin. */
    .nbtn.nbtn--sm { padding: 8px 14px; font-size: 13px; }
    .nbtn.nbtn--lg { padding: 16px 30px; font-size: 17px; }
    .nbtn.nbtn--pill { border-radius: 999px; }
    .nbtn.nbtn--sharp { border-radius: 0; }
    .snap-design { display: flex; gap: 18px; align-items: center; width: 100%; padding: 8px; }
    .snap-design-type { display: flex; flex-direction: column; gap: 6px; color: var(--text-primary); flex: 1; min-width: 0; }
    .snap-design-modes { display: flex; flex-direction: column; gap: 8px; }
    .snap-design-mode { display: flex; gap: 6px; padding: 10px; border: 1px solid var(--border-subtle); }
    .snap-design-mode span { font-size: 11px; font-weight: 600; padding: 6px 10px; white-space: nowrap; }
    @media (max-width: 560px) { .snap-design { flex-direction: column; align-items: flex-start; } }
    .nbtn:focus-visible { outline: 2px solid #111827; outline-offset: 3px; }
    /* Effects */
    .nfx-lift { transition: all 200ms; }
    .nfx-lift:is(:hover, :focus-visible) { transform: translateY(-2px); }
    .nfx-glow:is(:hover, :focus-visible) { border-color: #D6FF00; box-shadow: 0 0 12px #D6FF00 !important; }
    .nfx-ripple { position: relative; overflow: hidden; isolation: isolate; }
    .nfx-ripple::after { content: ''; position: absolute; top: 50%; left: 50%; width: 150%; aspect-ratio: 1; border-radius: 50%; background: #D6FF00; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; transition: transform 455ms ease-out, opacity 0.3s ease-out; z-index: -1; }
    .nfx-ripple:is(:hover, :focus-visible)::after { transform: translate(-50%, -50%) scale(1); opacity: 1; transition: transform 650ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.12s ease-in; }
    .nbtn.nfx-ripple:is(:hover, :focus-visible) { color: #121212; }
    .nfx-underline { position: relative; }
    .nfx-underline::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px; background: currentColor; transition: width 250ms cubic-bezier(0.16, 1, 0.3, 1); }
    .nfx-underline:is(:hover, :focus-visible)::after { width: 100%; }
    .nbtn-arrow[hidden] { display: none; }
    .nbtn-arrow { display: inline-block; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
    .nfx-underline:is(:hover, :focus-visible) .nbtn-arrow { transform: translateX(4px); }
    @media (prefers-reduced-motion: reduce) {
      .nbtn, .nfx-lift, .nfx-ripple::after, .nfx-underline::after, .nbtn-arrow { transition: none !important; }
    }

    /* Builder */
    .bb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 36px; }
    .bb-controls, .bb-out { background: var(--bg-surface); border: 1.5px solid var(--border-subtle); padding: 22px; }
    .bb-controls { display: grid; gap: 22px; align-content: start; }
    .bb-label { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); margin-bottom: 10px; }
    .bb-label span { color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; }
    .bb-seg { display: flex; flex-wrap: wrap; gap: 8px; }
    .bb-seg button { font-family: var(--font-main); font-size: 14px; font-weight: 600; padding: 9px 14px; background: var(--bg-surface); color: var(--text-primary); border: 1.5px solid var(--border-subtle); cursor: pointer; }
    .bb-seg button:hover { background: var(--bg-surface-subtle); }
    .bb-seg button[aria-pressed="true"] { background: var(--accent-volt); color: #121212; border-color: #121212; }
    .bb-seg button:disabled { opacity: 0.4; cursor: not-allowed; }
    .bb-seg button:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
    .bb-hint { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-muted); min-height: 1.5em; }
    .bb-preview { display: grid; gap: 20px; grid-template-rows: 1fr auto; }
    .bb-canvas--stage { position: relative; min-height: 240px; }
    .bb-stage-tag { position: absolute; top: 10px; left: 14px; font-family: var(--font-mono); font-size: 11px; color: #555555; }
    .bb-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--code-box-bg); border: 1.5px solid var(--code-box-border); padding: 10px 12px; }
    .bb-code code { font-family: var(--font-mono); font-size: 13px; color: var(--code-box-text); word-break: break-word; }
    .bb-needs { list-style: none; margin-top: 12px; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
    .bb-needs li::before { content: '→ '; font-family: var(--font-mono); }
    .bb-needs code { font-family: var(--font-mono); font-size: 0.92em; }
    .bb-subtitle { font-size: 22px; font-weight: 800; margin: 8px 0 14px; color: var(--text-primary); }
    .bb-looks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 36px; }
    .bb-look { background: var(--bg-surface); border: 1.5px solid var(--border-subtle); padding: 14px; display: grid; gap: 10px; align-content: start; }
    .bb-look .bb-canvas { min-height: 110px; }
    .bb-look > code { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-primary); }
    .bb-look p { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
    .bb-look p code { font-family: var(--font-mono); font-size: 0.92em; }
    .bb-look--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; }
    .bb-card { background: #F8F9FA; border: 1.5px solid #111827; border-radius: 8px; padding: 22px 26px; font-size: 15px; font-weight: 600; color: #111827; }
    .bb-card code { font-family: var(--font-mono); font-size: 13px; }

    /* Variables */
    .var-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
    .var-panel { background: var(--bg-surface); border: 1.5px solid var(--border-subtle); padding: 22px; }
    .var-panel--wide { grid-column: 1 / -1; }
    .var-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
    .var-panel-head h3 { font-size: 18px; font-weight: 800; color: var(--text-primary); }
    .var-panel-head span { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
    .var-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .var-swatch { display: grid; gap: 4px; font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
    .var-swatch code, .var-radius code, .var-bar code { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
    .var-chip { display: block; height: 44px; border: 1.5px solid var(--border-strong); }
    .var-radii { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .var-radius { display: grid; gap: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
    .var-radius-box { display: block; height: 140px; background: var(--accent-volt); border: 1.5px solid #121212; }
    .var-fams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
    .var-fam-title { font-size: 14px; font-weight: 800; color: var(--text-primary); margin-bottom: 10px; }
    .var-bar { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
    .var-bar-track { display: block; height: 8px; background: var(--bg-surface-subtle); }
    .var-bar-track span { display: block; height: 100%; background: var(--text-primary); }
    .var-rules { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; counter-reset: rule; }
    .var-rules li { background: var(--bg-surface); border: 1.5px solid var(--border-subtle); padding: 18px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
    .var-rules strong { display: block; color: var(--text-primary); font-size: 15px; margin-bottom: 6px; }
    .var-rules code, .var-note code, #variables .section-sub code, .ps-copy code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-surface-subtle); padding: 1px 5px; }
    .var-note { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
    /* Page templates: every page side by side, complete and uncropped, like a site map. */
    .tpl-grid { list-style: none; margin: 0; padding: 0; }
    .tpl-glance { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: start; }
    .tpl-col { min-width: 0; }
    .tpl-open { position: relative; display: block; width: 100%; padding: 6px; border: 1.5px solid var(--border-subtle); background: var(--bg-surface); cursor: zoom-in; font: inherit; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .tpl-open:hover, .tpl-open:focus-visible { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18) !important; }
    .tpl-open:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }
    .tpl-thumb { display: block; background: #FFFFFF; }
    .tpl-thumb img { display: block; width: 100%; height: auto; }
    .tpl-view-hint { position: absolute; left: 50%; top: 18px; transform: translate(-50%, 4px); padding: 6px 10px; background: var(--badge-bg); color: var(--badge-text); font-size: 12.5px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease; }
    .tpl-open:hover .tpl-view-hint, .tpl-open:focus-visible .tpl-view-hint { opacity: 1; transform: translate(-50%, 0); }
    .tpl-body { padding: 14px 2px 0; }
    .tpl-body h3 { font-size: 16px; font-weight: 800; color: var(--text-primary); }
    .tpl-body p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

    /* Header and footer: large, on a dark stage, desktop and phone side by side. */
    .tpl-site { margin-top: 40px; padding: clamp(22px, 4vw, 40px); background: #121212; color: #F5F5F5; border: 1.5px solid var(--border-subtle); }
    .tpl-site-text { max-width: 720px; }
    .tpl-site-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #D6FF00; }
    .tpl-site h3 { margin-top: 10px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.4px; color: #FFFFFF; }
    .tpl-site p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: #BDBDBD; }
    .tpl-site-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 28px; margin-top: 28px; align-items: start; }
    .tpl-site-grid figure { margin: 0; }
    .tpl-site-grid figcaption { margin-bottom: 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #D6FF00; }
    .tpl-site-grid img { display: block; width: 100%; height: auto; border-radius: 6px; }
    .tpl-site-gap { margin: 12px 0; padding: 18px; border: 1.5px dashed #444444; border-radius: 6px; text-align: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8C8C8C; }
    .tpl-site-phone { padding: 10px 8px; border: 6px solid #333333; border-radius: 24px; background: #1E1E1E; }
    .tpl-site-phone .tpl-site-gap { padding: 22px 0; }
    @media (max-width: 1100px) { .tpl-glance { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 900px) { .tpl-site-grid { grid-template-columns: minmax(0, 1fr); } .tpl-site-mob { max-width: 280px; } }
    @media (max-width: 560px) {
      .tpl-glance { grid-template-columns: minmax(0, 1fr); gap: 22px; }
      /* Long pages get a tall preview with a fade; the viewer shows the rest. */
      .tpl-thumb { max-height: 460px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
    }
    @media (prefers-reduced-motion: reduce) { .tpl-open, .tpl-view-hint { transition: none; } .tpl-open:hover, .tpl-open:focus-visible { transform: none; } }

    /* Full-page viewer */
    .tpl-chrome { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; background: #F1F1F1; border-bottom: 1px solid #E2E2E2; }
    .tpl-dots { display: inline-flex; gap: 5px; flex: none; }
    .tpl-dots i { width: 8px; height: 8px; border-radius: 50%; background: #D4D4D4; }
    .tpl-url { flex: 1; min-width: 0; height: 16px; line-height: 16px; padding: 0 8px; border-radius: 4px; background: #FFFFFF; color: #737373; font-size: 10.5px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    html.tpl-viewer-open { overflow: hidden; }
    .tpl-viewer { width: min(1040px, calc(100vw - 32px)); max-width: none; height: calc(100vh - 48px); max-height: none; margin: auto; padding: 0; border: 1.5px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-primary); }
    .tpl-viewer[open] { display: flex; flex-direction: column; }
    .tpl-viewer::backdrop { background: rgba(0,0,0,0.6); }
    .tpl-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1.5px solid var(--border-subtle); }
    .tpl-viewer-bar strong { font-size: 16px; font-weight: 800; }
    .tpl-viewer-nav { display: flex; gap: 8px; }
    .tpl-viewer-window { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 16px; border: 1px solid rgba(0,0,0,0.12); background: #FFFFFF; }
    .tpl-viewer-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .tpl-viewer-scroll:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
    .tpl-viewer-scroll img { display: block; width: 100%; height: auto; }
    @media (max-width: 560px) { .tpl-viewer { width: 100vw; height: 100vh; border: 0; } .tpl-viewer-window { margin: 8px; } }
    @media (prefers-reduced-motion: reduce) { .tpl-view-hint { transition: none; } }

    .tpl-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
    .tpl-styles button { text-align: left; font: inherit; cursor: pointer; background: var(--bg-surface); color: var(--text-primary); border: 1.5px solid var(--border-subtle); padding: 16px 18px; display: grid; gap: 4px; min-width: 0; }
    .tpl-styles button strong { font-size: 17px; font-weight: 800; }
    .tpl-styles button span { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
    .tpl-styles button:hover { border-color: var(--border-strong); }
    .tpl-styles button[aria-selected="true"] { background: var(--badge-bg); color: var(--badge-text); border-color: var(--badge-bg); }
    .tpl-styles button[aria-selected="true"] span { color: inherit; opacity: 0.8; }
    .tpl-styles button:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
    @media (max-width: 560px) { .tpl-styles { grid-template-columns: minmax(0, 1fr); } }

    /* Plugin screen */
    .ps { background: var(--bg-surface); border: 1.5px solid var(--border-subtle); }
    .ps-tabs { display: flex; flex-wrap: wrap; border-bottom: 1.5px solid var(--border-subtle); }
    .ps-tabs button { font-family: var(--font-main); font-size: 15px; font-weight: 700; padding: 16px 20px; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--text-muted); cursor: pointer; margin-bottom: -1.5px; }
    .ps-tabs button:hover { color: var(--text-primary); }
    .ps-tabs button[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--text-primary); }
    .ps-tabs button:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
    .ps-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; padding: 26px; align-items: start; }
    .ps-panel[hidden] { display: none; }
    .ps-copy h3 { font-size: 22px; font-weight: 800; color: var(--text-primary); margin-bottom: 14px; line-height: 1.25; }
    .ps-copy ul { list-style: none; display: grid; gap: 10px; }
    .ps-copy li { font-size: 15px; line-height: 1.55; color: var(--text-secondary); padding-left: 22px; position: relative; }
    .ps-copy li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; background: var(--accent-volt); border: 1.5px solid #121212; }
    .ps-shot { margin: 0; border: 1.5px solid var(--border-subtle); background: #F0F0F1; max-height: 560px; overflow: auto; }
    .ps-shot img { display: block; width: 100%; height: auto; }

    /* Changelog */
    .log-list { display: grid; gap: 12px; }
    .log-release { background: var(--bg-surface); border: 1.5px solid var(--border-subtle); padding: 20px 22px; }
    .log-release.is-latest { border-left: 6px solid var(--accent-volt); }
    .log-head { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--text-primary); }
    .log-release--old .log-head { cursor: pointer; list-style: none; }
    .log-release--old .log-head::-webkit-details-marker { display: none; }
    .log-release--old .log-head::after { content: '+'; margin-left: auto; font-family: var(--font-mono); }
    .log-release--old[open] .log-head::after { content: '−'; }
    .log-release--old:not([open]) ul { display: none; }
    .log-ver { font-family: var(--font-mono); }
    .log-latest { font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: var(--accent-volt); color: #121212; padding: 3px 8px; }
    .log-release ul { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
    .log-release li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
    .log-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 0; text-align: center; height: fit-content; border: 1.5px solid var(--border-subtle); color: var(--text-primary); }
    .log-tag--new { background: var(--accent-volt); color: #121212; border-color: #121212; }
    .log-tag--fixed { background: var(--bg-surface-subtle); }

    @media (max-width: 1080px) {
      .var-rules, .var-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .bb-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 900px) {
      .bb, .var-grid, .ps-panel, .bb-look--wide { grid-template-columns: minmax(0, 1fr); }
      .ps-panel { padding: 18px; }
      .ps-tabs button { padding: 12px 14px; font-size: 14px; }
    }
    @media (max-width: 640px) {
      .var-rules, .var-fams, .bb-looks { grid-template-columns: minmax(0, 1fr); }
      .var-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .var-radii { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .var-radius-box { height: 120px; }
      .log-release li { grid-template-columns: 1fr; gap: 4px; }
      .log-tag { width: fit-content; padding: 3px 8px; }
    }

    /* Demo switcher: jump between labs without going back to the homepage */
    input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--text-primary); }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .detail-subnav { padding: 10px 32px; }
    .subnav-left, .subnav-right { flex-shrink: 0; }
    .lab-switcher { position: relative; flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 2px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); padding-inline: 12px; }
    .lab-switcher::-webkit-scrollbar { display: none; }
    .lab-switcher a { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: none; padding: 7px 12px; border: 1.5px solid transparent; white-space: nowrap; }
    .lab-switcher a:hover { color: var(--text-primary); border-color: var(--border-subtle); }
    .lab-switcher a[aria-current="page"] { background: var(--accent-volt); color: #121212; border-color: #121212; font-weight: 800; }
    .lab-switcher a:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
    .lab-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 48px 0 16px; }
    .lab-pager a { display: grid; gap: 4px; padding: 18px 20px; background: var(--bg-surface); border: 1.5px solid var(--border-subtle); text-decoration: none; color: var(--text-primary); }
    .lab-pager a:hover { background: var(--bg-surface-subtle); }
    .lab-pager a:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
    .lab-pager a.next { text-align: right; grid-column: 2; }
    .lab-pager span { font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
    .lab-pager strong { font-size: 18px; font-weight: 800; }
    @media (max-width: 640px) {
      .detail-subnav { padding: 8px 12px; gap: 8px; }
      .subnav-right, .back-long, .btn-back-hub kbd { display: none; }
      .btn-back-hub { padding: 7px 10px; }
      .lab-pager { grid-template-columns: 1fr; }
      .lab-pager a.next { grid-column: auto; }
    }


    /* 0.8.0: Carousels. The plugin's own carousel CSS, then the demo cards. */
    /* Nori for Elementor: carousel base shared by the Faded Carousel and Video Carousel modules.
       Only applies once the script has built the carousel (.nori-carousel-ready), so the Elementor
       editor and visitors without JavaScript see your normal layout. */
    html.nori-js .nori-carousel-ready {
    	display: flex !important;
    	flex-direction: row !important;
    	flex-wrap: nowrap !important;
    	justify-content: flex-start !important;
    	overflow-x: auto !important;
    	overflow-y: hidden !important;
    	scroll-snap-type: x mandatory;
    	overscroll-behavior-x: contain;
    	-webkit-overflow-scrolling: touch;
    	scrollbar-width: none;
    	-ms-overflow-style: none;
    	cursor: grab;
    	user-select: none;
    	-webkit-user-select: none;
    }
    html.nori-js .nori-carousel-ready::-webkit-scrollbar { display: none; }
    html.nori-js .nori-carousel-ready > * {
    	flex: 0 0 var(--nori-carousel-slide, 80%) !important;
    	width: var(--nori-carousel-slide, 80%) !important;
    	min-width: var(--nori-carousel-slide, 80%) !important;
    	max-width: var(--nori-carousel-slide, 80%) !important;
    	box-sizing: border-box;
    	scroll-snap-align: center;
    	opacity: var(--nori-carousel-fade, 0.5);
    	transform: scale(var(--nori-carousel-scale, 0.96));
    	transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    	will-change: opacity, transform;
    }
    html.nori-js .nori-carousel-ready > .is-active-np { opacity: 1; transform: none; }

    /* Dragging and loop jumps: no snapping or easing in the way. */
    html.nori-js .nori-carousel-ready.is-dragging-np { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
    html.nori-js .nori-carousel-ready.no-transition-np { scroll-snap-type: none; scroll-behavior: auto; }
    html.nori-js .nori-carousel-ready.no-transition-np > * { transition: none !important; }

    /* Pause/play control (WCAG 2.2.2), when switched on: sits under the carousel. */
    .nori-carousel-toggle {
    	display: block;
    	margin: 12px auto 0;
    	min-width: 36px;
    	height: 36px;
    	padding: 0 12px;
    	border: 1.5px solid currentColor;
    	border-radius: 999px;
    	background: transparent;
    	color: inherit;
    	font: 700 12px/1 system-ui, sans-serif;
    	cursor: pointer;
    	opacity: 0.7;
    }
    .nori-carousel-toggle:hover,
    .nori-carousel-toggle:focus-visible { opacity: 1; }

    @media (prefers-reduced-motion: reduce) {
    	html.nori-js .nori-carousel-ready { scroll-behavior: auto; }
    	html.nori-js .nori-carousel-ready > * { transition: none; }
    }
    /* Nori: Faded Carousel. Add .faded-carousel-np (every screen size) or .faded-carousel-mobile-np
       (tablet and mobile only) to a flexbox; each child becomes a slide. The flexbox gap is the space
       between slides. Faded opacity and slide widths come from WP Admin > Nori > Modules. */
    html.nori-js .faded-carousel-np.nori-carousel-ready,
    html.nori-js .faded-carousel-mobile-np.nori-carousel-ready {
    	--nori-carousel-fade: var(--nori-fc-fade, 0.5);
    	/* Desktop: the active slides plus a quarter of a slide peeking in on each side. */
    	--nori-carousel-slide: calc((100% - (var(--nori-carousel-count, 3) - 1) * var(--nori-carousel-gap, 0px)) / (var(--nori-carousel-count, 3) + 0.5));
    }
    @media (max-width: 1024px) {
    	html.nori-js .faded-carousel-np.nori-carousel-ready,
    	html.nori-js .faded-carousel-mobile-np.nori-carousel-ready { --nori-carousel-slide: var(--nori-fc-tablet, 70%); }
    }
    @media (max-width: 767px) {
    	html.nori-js .faded-carousel-np.nori-carousel-ready,
    	html.nori-js .faded-carousel-mobile-np.nori-carousel-ready { --nori-carousel-slide: var(--nori-fc-mobile, 80%); }
    }
    /* Nori: Video Carousel. Add .video-carousel-np to a flexbox whose children each hold a video
       (self-hosted, Elementor's YouTube widget, or a YouTube or Vimeo embed). One video sits in the
       center, the others fade at the sides. Arrows and a play button are added for you.

       Styling: WP Admin > Nori > Modules > Video Carousel. The colors are also Elementor variables
       (vc-arrow-bg-np, vc-arrow-icon-np, vc-arrow-hover-bg-np, vc-arrow-hover-icon-np, vc-play-color-np,
       vc-play-fill-np): the --nori-vc-* colors follow them, so a change in the Elementor editor shows up
       here. To style one carousel differently, set the --nori-vc-* properties on its parent in custom CSS. */
    .nori-vc-wrap {
    	--nori-vc-a-bg: var(--nori-vc-arrow-bg, #fff);
    	--nori-vc-a-icon: var(--nori-vc-arrow, #111);
    	--nori-vc-a-hover-bg: var(--nori-vc-arrow-hover-bg, #111);
    	--nori-vc-a-hover-icon: var(--nori-vc-arrow-hover, #fff);
    	--nori-vc-p-color: var(--nori-vc-play-color, #fff);
    	--nori-vc-p-fill: var(--nori-vc-play-fill, #111);
    	--nori-vc-a-size: var(--nori-vc-arrow-size, 56px);
    	--nori-vc-p-size: var(--nori-vc-play-size, 88px);
    	position: relative;
    	width: 100%;
    }

    html.nori-js .video-carousel-np.nori-carousel-ready {
    	--nori-carousel-fade: var(--nori-vc-fade, 0.25);
    	--nori-carousel-scale: 0.94;
    	--nori-carousel-slide: min(var(--nori-vc-width, 680px), 80%);
    	align-items: center !important;
    	padding-block: 24px !important;
    }
    @media (max-width: 1024px) {
    	html.nori-js .video-carousel-np.nori-carousel-ready { --nori-carousel-slide: 74%; }
    }
    @media (max-width: 767px) {
    	html.nori-js .video-carousel-np.nori-carousel-ready { --nori-carousel-slide: 80%; }
    	.nori-vc-wrap { --nori-vc-a-size: max(40px, calc(var(--nori-vc-arrow-size, 56px) * 0.78)); --nori-vc-p-size: max(52px, calc(var(--nori-vc-play-size, 88px) * 0.72)); }
    }
    html.nori-js .video-carousel-np.nori-carousel-ready > * {
    	position: relative;
    	margin: 0 !important;
    	aspect-ratio: var(--nori-vc-ratio, 16 / 9);
    	border-radius: var(--nori-vc-radius, 24px);
    	overflow: hidden;
    	background: #000;
    	cursor: pointer;
    }
    html.nori-js .video-carousel-np.nori-carousel-ready > .is-active-np { cursor: default; }
    html.nori-js .video-carousel-np.nori-carousel-ready video,
    html.nori-js .video-carousel-np.nori-carousel-ready > * > [data-nori-e-type] {
    	display: block;
    	width: 100% !important;
    	height: 100% !important;
    	object-fit: cover;
    }

    /* YouTube and Vimeo: the thumbnail until play, then the player. */
    .nori-vc-embed { position: absolute; inset: 0; background: #000; }
    .nori-vc-poster, .nori-vc-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
    .nori-vc-frame { z-index: 1; }
    .is-embed-np:not(.is-playing-np) .nori-vc-frame { visibility: hidden; }

    /* Only the center video can be played; a click on a faded one brings it to the center. */
    html.nori-js .video-carousel-np.nori-carousel-ready > :not(.is-active-np) video,
    html.nori-js .video-carousel-np.nori-carousel-ready > :not(.is-active-np) iframe,
    html.nori-js .video-carousel-np.nori-carousel-ready > :not(.is-active-np) .nori-vc-play { pointer-events: none; }

    /* Play button over each video; hidden while it plays (a self-hosted video brings it back on hover). */
    .nori-vc-play {
    	position: absolute;
    	inset: 0;
    	z-index: 2;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	margin: 0;
    	padding: 0;
    	border: 0;
    	background: rgba(0, 0, 0, var(--nori-vc-tint, 0.15));
    	cursor: pointer;
    	transition: opacity 0.25s ease;
    }
    .nori-vc-play__ring {
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	width: var(--nori-vc-p-size);
    	height: var(--nori-vc-p-size);
    	box-sizing: border-box;
    	border: max(2px, calc(var(--nori-vc-p-size) * 0.045)) solid var(--nori-vc-p-color);
    	border-radius: 50%;
    	background: transparent;
    	color: var(--nori-vc-p-color);
    	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
    }
    .nori-vc--play-filled .nori-vc-play__ring { border-color: var(--nori-vc-p-fill); background: var(--nori-vc-p-fill); }
    .nori-vc--play-icon .nori-vc-play__ring { border-color: transparent; }
    .nori-vc--play-icon .nori-vc-play svg { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); }
    .nori-vc-play:hover .nori-vc-play__ring,
    .nori-vc-play:focus-visible .nori-vc-play__ring { transform: scale(1.08); }
    .nori-vc-play:focus-visible { outline: 3px solid var(--nori-vc-p-color); outline-offset: -6px; }
    .nori-vc-play svg { width: 32%; height: 32%; fill: currentColor; }
    .nori-vc--play-icon .nori-vc-play svg { width: 44%; height: 44%; }
    .nori-vc-play .nori-vc-icon-play { margin-left: 6%; }
    .nori-vc-play .nori-vc-icon-pause { display: none; }
    .is-playing-np .nori-vc-play { opacity: 0; pointer-events: none; }
    .is-playing-np .nori-vc-play .nori-vc-icon-play { display: none; }
    .is-playing-np .nori-vc-play .nori-vc-icon-pause { display: block; }
    .is-embed-np.is-playing-np .nori-vc-play { display: none; }

    /* Previous / next arrows: circle (default), square or minimal (just the chevron). */
    .nori-vc-arrow {
    	position: absolute;
    	top: 50%;
    	z-index: 3;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	width: var(--nori-vc-a-size);
    	height: var(--nori-vc-a-size);
    	margin: 0;
    	padding: 0;
    	border: 0;
    	border-radius: 50%;
    	background: var(--nori-vc-a-bg);
    	color: var(--nori-vc-a-icon);
    	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    	cursor: pointer;
    	transform: translateY(-50%);
    	transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
    }
    .nori-vc--arrows-square .nori-vc-arrow { border-radius: calc(var(--nori-vc-a-size) * 0.18); }
    .nori-vc--arrows-minimal .nori-vc-arrow { background: transparent; box-shadow: none; }
    .nori-vc-arrow:hover,
    .nori-vc-arrow:focus-visible { background: var(--nori-vc-a-hover-bg); color: var(--nori-vc-a-hover-icon); transform: translateY(-50%) scale(1.08); }
    .nori-vc--arrows-minimal .nori-vc-arrow:hover,
    .nori-vc--arrows-minimal .nori-vc-arrow:focus-visible { background: transparent; color: var(--nori-vc-a-icon); }
    .nori-vc-arrow:focus-visible { outline: 3px solid var(--nori-vc-a-icon); outline-offset: 3px; }
    .nori-vc-arrow:active { transform: translateY(-50%) scale(0.96); }
    .nori-vc-arrow svg { width: auto; height: 30%; fill: none; stroke: currentColor; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }
    .nori-vc--arrows-minimal .nori-vc-arrow svg { height: 42%; stroke-width: 2.25; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3)); }
    .nori-vc-prev { left: 18px; }
    .nori-vc-next { right: 18px; }
    @media (max-width: 767px) {
    	.nori-vc-prev { left: 8px; }
    	.nori-vc-next { right: 8px; }
    }

    .fc-demo-card { display: flex; flex-direction: column; gap: 10px; min-height: 190px; padding: 24px; border: 1.5px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary); box-sizing: border-box; }
    .fc-demo-card .fc-demo-kicker { font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
    .fc-demo-card h3 { margin: 0; font-size: 22px; line-height: 1.2; }
    .fc-demo-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
    .fc-demo-card a { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--text-primary); }
    .fc-demo-row { display: flex; gap: 24px; }
    .fc-demo-row > * { flex: 1 1 0; }
    .fc-demo-note { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
    .fc-demo-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 18px; font-size: 13px; color: var(--text-secondary); }
    .fc-demo-controls input[type="range"] { width: 140px; }
    .vc-demo-row { display: flex; gap: 32px; }
    .vc-demo-row > * { flex: 1 1 0; background: #121212; aspect-ratio: 16 / 9; }
    .vc-demo-controls { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 18px; margin-bottom: 18px; font-size: 13px; color: var(--text-secondary); }
    .vc-demo-controls label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--text-primary); }
    .vc-demo-controls select { font: inherit; font-weight: 500; padding: 6px 8px; border: 1.5px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary); }
    .vc-demo-controls .vc-demo-color { display: flex; align-items: center; gap: 8px; font-weight: 500; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
    .vc-demo-controls input[type="color"] { width: 36px; height: 28px; padding: 0; border: 1.5px solid var(--border-strong); background: none; cursor: pointer; }
    .vc-demo-credit { margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); }
    .vc-demo-credit a { color: var(--text-primary); font-weight: 700; }
    .fc-demo-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1.5px solid var(--border-strong); font: 700 11px/1 var(--font-mono); }

    /* Home cards: carousel snapshots */
    .snap-fc { display: flex; gap: 10px; align-items: center; width: max-content; animation: snapFcAnim 9s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
    .snap-fc span { width: 92px; height: 110px; border: 1.5px solid var(--border-subtle); background: var(--bg-surface); opacity: 0.45; transform: scale(0.94); }
    .snap-fc span.on { opacity: 1; transform: none; }
    .snap-fc span.on:nth-child(4) { background: var(--accent-volt); }
    @keyframes snapFcAnim { 0%, 30% { transform: translateX(0); } 45%, 75% { transform: translateX(-102px); } 90%, 100% { transform: translateX(0); } }
    .snap-vc { display: flex; gap: 14px; align-items: center; }
    .snap-vc span { position: relative; width: 150px; aspect-ratio: 16 / 9; border-radius: 12px; background: linear-gradient(135deg, #3A3A3A, #121212); opacity: 0.3; transform: scale(0.94); }
    .snap-vc span.on { opacity: 1; transform: none; background: radial-gradient(circle at 60% 55%, #D6FF00 0, #3A3A3A 55%, #121212 100%); }
    .snap-vc span.on::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid #fff; border-radius: 50%; }
    .snap-vc b { position: absolute; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
    @media (prefers-reduced-motion: reduce) { .snap-fc { animation: none; } }


    /* 0.9.0: Button: Gradient Shift and Button: Text Roll (the plugin's own CSS). */
    /* Nori: Button Gradient Shift. Add .btn-gradient-np (filled) or .btn-gradient-outline-np (outline)
       to a button container. On hover and keyboard focus the gradient slides across the button.
       Colors, angle, speed and outline width come from WP Admin > Nori > Modules; the five colors are
       also Elementor variables (btn-gradient-1-np to btn-gradient-5-np). Pressing nudges it down 1px. */
    .btn-gradient-np,
    .btn-gradient-outline-np {
    	/* Five colors, twice, so sliding from one half to the other loops without a seam. */
    	/* The five colors there and back (1 2 3 4 5 4 3 2 1), twice as wide as the button: at rest you see
    	   1 to 5, on hover the gradient slides over to 5 to 1. No seam, and no muddy blend at the edge. */
    	--nori-grad-image: linear-gradient(
    		var(--nori-grad-angle, 135deg),
    		var(--nori-grad-1, #F4FF7A) 0%,
    		var(--nori-grad-2, #D6FF00) 12.5%,
    		var(--nori-grad-3, #9BEA3A) 25%,
    		var(--nori-grad-4, #5ED68A) 37.5%,
    		var(--nori-grad-5, #2FC6B4) 50%,
    		var(--nori-grad-4, #5ED68A) 62.5%,
    		var(--nori-grad-3, #9BEA3A) 75%,
    		var(--nori-grad-2, #D6FF00) 87.5%,
    		var(--nori-grad-1, #F4FF7A) 100%
    	);
    	--nori-grad-move: background-position var(--nori-grad-speed, 700ms) cubic-bezier(0.22, 1, 0.36, 1);
    	position: relative;
    }

    /* Filled: the gradient is the background. The text color is yours to set (dark by default). */
    .btn-gradient-np {
    	background-color: var(--nori-grad-1, #F4FF7A) !important;
    	background-image: var(--nori-grad-image) !important;
    	background-size: 200% 100% !important;
    	background-position: 0% 50% !important;
    	/* Measured from the outer edge and drawn once: otherwise the gradient repeats under a
    	   (transparent) border and shows as a thin stroke around the button. */
    	background-origin: border-box !important;
    	background-repeat: no-repeat !important;
    	transition: var(--nori-grad-move), transform 0.2s ease, box-shadow 0.3s ease, color 0.3s ease;
    }
    :where(.btn-gradient-np) { color: var(--nori-grad-text, #121212); }
    .btn-gradient-np { border-color: transparent !important; } /* A look class's border would frame the gradient. */
    .btn-gradient-np:is(:hover, :focus-visible) { background-position: 100% 50% !important; }
    .btn-gradient-np:active, .btn-gradient-outline-np:active { transform: translateY(1px); }

    /* Outline: a gradient ring that follows the button's corner radius (unlike border-image) and keeps
       the inside see-through. It slides on hover too. */
    .btn-gradient-outline-np { isolation: isolate; background-color: transparent; }
    /* The ring is the border: a border from a look class would sit next to it. */
    .btn-gradient-outline-np { border-style: none !important; }
    .btn-gradient-outline-np::before {
    	content: '';
    	position: absolute;
    	inset: 0;
    	z-index: 3;
    	padding: var(--nori-grad-border, 2px);
    	border-radius: inherit;
    	background-image: var(--nori-grad-image);
    	background-size: 200% 100%;
    	background-position: 0% 50%;
    	background-origin: border-box;
    	background-repeat: no-repeat;
    	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    	-webkit-mask-composite: xor;
    	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    	mask-composite: exclude;
    	pointer-events: none;
    	transition: var(--nori-grad-move);
    }
    .btn-gradient-outline-np:is(:hover, :focus-visible)::before { background-position: 100% 50%; }

    @media (prefers-reduced-motion: reduce) {
    	.btn-gradient-np, .btn-gradient-outline-np::before { transition: none !important; }
    }
    /* Nori: Button Text Roll. Add .btn-roll-np to a button container. On hover and keyboard focus its
       text and icon roll up and out while a copy rolls in from below (or down, if you pick that).
       Works with any button look and with the other button effects. Speed, direction and the icon's
       delay come from WP Admin > Nori > Modules. Needs JavaScript: without it the button stays still. */
    .nori-roll {
    	position: relative;
    	display: inline-flex;
    	align-items: center;
    	overflow: hidden;
    	vertical-align: middle;
    	/* A little room so descenders and focus rings are not clipped. */
    	padding-block: 0.08em;
    	margin-block: -0.08em;
    }
    .nori-roll > * {
    	transition: transform var(--nori-roll-speed, 400ms) cubic-bezier(0.25, 1, 0.3, 1) calc(var(--nori-roll-i, 0) * var(--nori-roll-stagger, 40ms));
    	will-change: transform;
    }
    .nori-roll > .nori-roll__copy {
    	position: absolute !important;
    	left: 0;
    	top: 100%; /* Below the box, padding included, so nothing peeks. */
    	width: 100%;
    	margin: 0 !important;
    }
    .btn-roll-np.nori-roll--down .nori-roll > .nori-roll__copy { top: auto; bottom: 100%; }
    /* Each piece moves by its own height plus the box's padding: the original leaves fully, the copy lands exactly. */
    .btn-roll-np:is(:hover, :focus-visible) .nori-roll > * { transform: translateY(calc(-100% - 0.08em)); }
    .btn-roll-np.nori-roll--down:is(:hover, :focus-visible) .nori-roll > * { transform: translateY(calc(100% + 0.08em)); }

    @media (prefers-reduced-motion: reduce) {
    	.nori-roll > * { transition: none !important; }
    	.btn-roll-np:is(:hover, :focus-visible) .nori-roll > * { transform: none !important; }
    }
    .nbtn.btn-gradient-np { color: #121212; }
    .nbtn.btn-gradient-outline-np { background: transparent; color: #111827; }
    .nbtn.btn-gradient-outline-np:is(:hover, :focus-visible) { box-shadow: 0 4px 15px rgba(241, 134, 48, 0.2); }
    .bb-look--gradient .bb-canvas { gap: 14px; flex-wrap: wrap; }

    /* 0.7.3: Forms (spam protection explainer, HubSpot Bridge) */
    .var-rules strong + * { display: inline; }
    .lab-stage .var-rules { margin-bottom: 24px; }
    .captcha-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0 24px; }
    .captcha-col { background: var(--bg-surface); border: 1.5px solid var(--border-subtle); padding: 20px 22px; }
    .captcha-col h3 { font-size: 18px; font-weight: 800; color: var(--text-primary); margin-bottom: 10px; }
    .captcha-col ul { list-style: none; display: grid; gap: 8px; }
    .captcha-col li { font-size: 14px; line-height: 1.5; color: var(--text-secondary); padding-left: 22px; position: relative; }
    .captcha-col li::before { content: '✕'; position: absolute; left: 0; font-weight: 700; color: var(--accent-rose); }
    .captcha-col--nori { border-left: 6px solid var(--accent-volt); }
    .captcha-col--nori li::before { content: '✓'; color: var(--text-primary); }

    .snap-hs { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 12px; }
    .snap-hs-box { display: grid; gap: 2px; padding: 10px 12px; background: var(--bg-surface); border: 1.5px solid var(--border-subtle); font-size: 13px; font-weight: 800; color: var(--text-primary); text-align: center; }
    .snap-hs-box small { font: 500 10px/1.3 var(--font-mono); color: var(--text-muted); }
    .snap-hs-box--hs { background: var(--accent-volt); color: #121212; border-color: #121212; }
    .snap-hs-box--hs small { color: #3a3a3a; }
    .snap-hs-arrow { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); }

    .hs-gen-label { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); margin: 14px 0 6px; }
    .hs-gen-input { width: 100%; font: 13px/1.5 var(--font-mono); padding: 10px 12px; background: var(--bg-surface); color: var(--text-primary); border: 1.5px solid var(--border-strong); border-radius: 0; resize: vertical; }
    .hs-gen-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); cursor: pointer; }
    .hs-gen-check input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--text-primary); cursor: pointer; }
    .hs-gen-check strong { display: block; color: var(--text-primary); }
    .hs-gen-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
    .hs-gen-out { margin-top: 18px; display: grid; gap: 14px; }
    .hs-gen-out[hidden] { display: none; }
    .hs-gen-msg { padding: 10px 14px; border: 1.5px solid var(--border-subtle); background: var(--bg-surface-subtle); font-size: 14px; line-height: 1.5; color: var(--text-primary); }
    .hs-gen-msg--bad { border-color: var(--accent-rose); color: var(--accent-rose); background: var(--bg-surface); }
    .hs-gen-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
    .hs-gen-step > div { min-width: 0; }
    .hs-gen-out { min-width: 0; }
    .hs-gen-num { width: 26px; height: 26px; display: grid; place-items: center; font: 700 12px/1 var(--font-mono); background: var(--accent-volt); color: #121212; border: 1.5px solid #121212; }
    .hs-gen-step h3 { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
    .hs-gen-step p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
    .hs-gen-class { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .hs-gen-class code { font: 700 15px/1.3 var(--font-mono); padding: 6px 10px; background: var(--accent-volt); color: #121212; border: 1.5px solid #121212; }
    .hs-gen-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 4px; }
    .hs-gen-table th { text-align: left; font: 700 11px/1.3 var(--font-mono); text-transform: uppercase; color: var(--text-muted); padding: 6px 8px; border-bottom: 1.5px solid var(--border-strong); }
    .hs-gen-table td { padding: 8px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
    .hs-gen-table code { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); }
    .hs-gen-table ~ p { margin-top: 12px; }
    .hs-req { font: 700 11px/1 var(--font-mono); text-transform: uppercase; padding: 3px 6px; border: 1.5px solid var(--border-subtle); color: var(--text-primary); white-space: nowrap; }
    .hs-req--yes { background: var(--accent-volt); color: #121212; border-color: #121212; }
    .hs-gen-codebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 12px 14px; background: var(--bg-surface); border: 1.5px solid var(--border-strong); }
    .hs-gen-file { display: grid; gap: 2px; min-width: 0; }
    .hs-gen-file strong { font: 700 14px/1.3 var(--font-mono); color: var(--text-primary); }
    .hs-gen-file span { font: 500 12px/1.3 var(--font-mono); color: var(--text-muted); }
    .hs-gen-details { margin-top: -1.5px; border: 1.5px solid var(--border-subtle); background: var(--bg-surface); }
    .hs-gen-details summary { cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--text-primary); list-style: none; display: flex; justify-content: space-between; }
    .hs-gen-details summary::-webkit-details-marker { display: none; }
    .hs-gen-details summary::after { content: '+'; font-family: var(--font-mono); }
    .hs-gen-details[open] summary::after { content: '\2212'; }
    .hs-gen-details summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
    .hs-gen-code { max-height: 320px; overflow: auto; margin: 0; padding: 14px; background: var(--code-box-bg); color: var(--code-box-text); border-top: 1.5px solid var(--border-subtle); font: 12px/1.55 var(--font-mono); white-space: pre; tab-size: 2; }
    .hs-gen-code:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
    .hs-gen-step code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-surface-subtle); padding: 1px 5px; }
    .hs-gen-class code { background: var(--accent-volt) !important; }
    .hs-gen-rule { margin: 8px 0 10px; padding: 12px 14px; border: 1.5px solid var(--border-strong); border-left: 6px solid var(--accent-volt); background: var(--bg-surface); }
    .hs-gen-rule p { font-size: 14px; line-height: 1.6; color: var(--text-primary); }
    .hs-gen-rule p + p { margin-top: 6px; }
    .hs-gen-rule code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-surface-subtle); padding: 1px 5px; }
    .hs-gen-rule--page { margin: 0 0 24px; padding: 16px 18px; }
    .hs-gen-rule--page p { font-size: 15px; }
    .hs-gen-rule--ring { display: flex; align-items: center; gap: 18px; }
    .hs-gen-rule--ring .hs-gen-rule-text { min-width: 0; flex: 1; }
    .hs-ring { flex: none; width: 96px; height: 96px; filter: drop-shadow(0 6px 8px rgba(80, 52, 6, 0.35)) drop-shadow(0 0 6px rgba(255, 200, 80, 0.35)); animation: hs-ring-glow 3.5s ease-in-out infinite; }
    .hs-ring-band { transform-origin: 60px 60px; animation: hs-ring-turn 7s ease-in-out infinite; }
    @keyframes hs-ring-turn { 0%, 100% { transform: rotate(-8deg) scaleX(1); } 50% { transform: rotate(6deg) scaleX(0.92); } }
    @keyframes hs-ring-glow { 0%, 100% { filter: drop-shadow(0 6px 8px rgba(80, 52, 6, 0.35)) drop-shadow(0 0 4px rgba(255, 200, 80, 0.2)); } 50% { filter: drop-shadow(0 6px 8px rgba(80, 52, 6, 0.35)) drop-shadow(0 0 12px rgba(255, 200, 80, 0.6)); } }
    @media (max-width: 560px) { .hs-gen-rule--ring { flex-direction: column; align-items: flex-start; gap: 8px; } .hs-ring { width: 72px; height: 72px; } }
    @media (prefers-reduced-motion: reduce) { .hs-ring-band, .hs-ring { animation: none; } }
    .hs-gen-quote { margin: 8px 0; padding: 10px 12px; border-left: 3px solid var(--text-primary); background: var(--bg-surface-subtle); font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
    .hs-gen-list { margin: 8px 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
    .hs-gen-privacy { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
    .hs-gen-notice { display: inline; }
    .hs-gen-notice summary { display: inline; cursor: pointer; text-decoration: underline; color: var(--text-primary); }
    .hs-gen-notice[open] { display: block; }
    .hs-gen-or { display: flex; align-items: center; gap: 14px; font: 700 13px/1 var(--font-mono); text-transform: uppercase; color: var(--text-primary); }
    .hs-gen-or::before, .hs-gen-or::after { content: ''; flex: 1; height: 1.5px; background: var(--border-subtle); }
    .hs-gen-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 14px; border: 1.5px solid var(--border-strong); background: var(--bg-surface); }
    .hs-gen-cta p { flex: 1; min-width: 220px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

    .hs-sim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 12px; }
    .hs-sim-form { display: grid; gap: 6px; padding: 18px; background: #FFFFFF; color: #111827; border: 1.5px solid var(--border-strong); }
    .hs-sim-tag { font: 700 12px/1.3 var(--font-mono); color: #4D5E00; margin-bottom: 6px; }
    .hs-sim-form label { font-size: 13px; font-weight: 600; }
    .hs-sim-form input { font: inherit; padding: 8px 10px; border: 1.5px solid #111827; border-radius: 0; background: #FFFFFF; color: #111827; margin-bottom: 6px; }
    .hs-sim-form button { justify-self: start; margin-top: 6px; }
    .hs-sim-steps { list-style: none; display: grid; gap: 10px; }
    .hs-sim-steps li { display: grid; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--border-subtle); background: var(--bg-surface); }
    .hs-sim-steps strong { font-size: 14px; color: var(--text-primary); }
    .hs-sim-steps span { font: 500 12px/1.4 var(--font-mono); color: var(--text-muted); }
    .hs-sim-steps li.is-done { border-color: #121212; background: var(--accent-volt); }
    .hs-sim-steps li.is-done strong, .hs-sim-steps li.is-done span { color: #121212; }
    .hs-sim-steps li.is-active { border-color: var(--text-primary); }
    .hs-sim-json { margin-top: 16px; padding: 14px; background: var(--code-box-bg); color: var(--code-box-text); border: 1.5px solid var(--code-box-border); font: 12px/1.5 var(--font-mono); white-space: pre-wrap; overflow-x: auto; }
    @media (max-width: 900px) { .captcha-compare, .hs-sim { grid-template-columns: minmax(0, 1fr); } }

    /* ==========================================================================
       HEADER MENU (dropdowns) AND SUB-PAGES
       ========================================================================== */
    .nav-links { gap: 2px; }
    .nav-item { position: relative; }
    .nav-trigger, .nav-links .nav-link {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--text-primary); background: transparent; font: inherit; font-size: 14px; font-weight: 600;
      padding: 8px 12px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
    }
    .nav-trigger:hover, .nav-links .nav-link:hover, .nav-item.open > .nav-trigger { border-color: var(--border-subtle); }
    .nav-item.is-current > .nav-trigger { box-shadow: inset 0 -3px 0 var(--accent-volt) !important; }
    .nav-chev { transition: transform 0.15s ease; }
    .nav-item.open .nav-chev { transform: rotate(180deg); }
    .nav-menu {
      display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 120; min-width: 290px;
      background: var(--bg-surface); border: 1.5px solid var(--border-subtle); padding: 6px;
    }
    /* An invisible strip over the 6px gap, so the pointer never leaves the menu on its way down. */
    .nav-menu::before { content: ""; position: absolute; left: -1.5px; right: -1.5px; bottom: 100%; height: 10px; }
    .nav-item:last-of-type .nav-menu { left: auto; right: 0; }
    .nav-item.open > .nav-menu { display: grid; gap: 2px; }
    .nav-menu a {
      display: grid; gap: 2px; padding: 10px 12px; border: 1.5px solid transparent;
      color: var(--text-primary); text-decoration: none;
    }
    .nav-menu a strong { font-size: 14px; font-weight: 700; }
    .nav-menu a span { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
    .nav-menu a:hover, .nav-menu a:focus-visible { border-color: var(--border-subtle); background: var(--bg-base); }
    .nav-menu a[aria-current="page"] { background: var(--bg-base); box-shadow: inset 3px 0 0 var(--accent-volt) !important; }
    .nav-menu-btn { display: none; gap: 6px; }
    @media (max-width: 1180px) {
      .nav-support-text { display: none; }
      .nav-support { padding-inline: 9px; }
    }
    @media (max-width: 900px) {
      /* The menu button sits at the far right of the header bar. */
      .nav-menu-btn { display: inline-flex; order: 99; }
      body.nav-open .nav-links {
        display: grid; align-content: start; gap: 4px; position: fixed; z-index: 99; left: 0; right: 0;
        top: var(--nav-h, 64px); bottom: 0; overflow-y: auto; margin: 0; padding: 12px 16px 32px;
        background: var(--bg-surface); border-top: 2px solid var(--border-subtle);
      }
      body.nav-open { overflow: hidden; }
      body.nav-open .nav-trigger, body.nav-open .nav-links .nav-link { width: 100%; justify-content: space-between; font-size: 16px; padding: 12px; border-color: var(--border-subtle); }
      body.nav-open .nav-menu { position: static; display: grid; gap: 2px; min-width: 0; border: 0; padding: 4px 0 8px 12px; }
      /* In the panel every group is already open, so its name is a heading, not a toggle. */
      body.nav-open .nav-item > .nav-trigger, body.nav-open .nav-links .nav-link { border-color: transparent; }
      body.nav-open .nav-item > .nav-trigger { cursor: default; color: var(--text-muted); font-size: 12px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px; padding: 14px 12px 2px; }
      body.nav-open .nav-item.is-current > .nav-trigger { box-shadow: none !important; }
      body.nav-open .nav-chev { display: none; }
      body.nav-open .nav-item:last-of-type .nav-menu { right: auto; }
    }
    @media (max-width: 640px) {
      .nav-menu-btn-text { display: none; }
      .nav-menu-btn { padding-inline: 9px; }
    }
    @media (prefers-reduced-motion: reduce) { .nav-chev { transition: none; } }

    .page-hero { margin: 56px 0 0; max-width: 820px; }
    .page-hero .hub-hero-eyebrow { display: inline-block; margin-bottom: 14px; }
    .page-hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -1.2px; color: var(--text-primary); text-wrap: balance; }
    .page-hero p { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--text-secondary); max-width: 68ch; }
    .page-hero .hub-hero-ctas { margin-top: 22px; }
    .page-main { padding-bottom: 72px; }
    .page-main .site-section:first-of-type .section-heading { margin-top: 40px; }
    /* A section that starts straight after the page hero, without its own heading, still gets room. */
    .page-hero + .site-section > :first-child:not(.section-heading) { margin-top: 48px; }
    .plugin-cta {
      margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
      background: var(--bg-surface); border: 1.5px solid var(--border-subtle); box-shadow: inset 6px 0 0 var(--accent-volt) !important; padding: 22px 26px;
    }
    .plugin-cta h3 { font-size: 20px; font-weight: 800; color: var(--text-primary); }
    .plugin-cta p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); max-width: 62ch; }
    .plugin-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    @media (max-width: 640px) { .plugin-cta-actions .btn-base { width: 100%; justify-content: center; } }
    .hub-hero-desc a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-cyan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
    .hub-hero-desc a:hover { text-decoration-color: var(--text-primary); }

    /* Homepage closing call to action: a full-width lime band. */
    .cta-band { position: relative; overflow: hidden; margin: 72px 0 8px; padding: clamp(40px, 7vw, 88px) clamp(20px, 6vw, 72px); background: #D6FF00; color: #121212; border: 1.5px solid #121212; }
    .cta-band-mark { position: absolute; right: -40px; bottom: -70px; width: clamp(200px, 30vw, 380px); aspect-ratio: 526.82 / 713.34; background-color: #121212; opacity: 0.08; -webkit-mask: url(nori-mark.svg) center / contain no-repeat; mask: url(nori-mark.svg) center / contain no-repeat; pointer-events: none; }
    .cta-band-inner { position: relative; max-width: 760px; }
    .cta-band-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border: 1.5px solid #121212; }
    .cta-band-title { margin-top: 18px; font-size: clamp(40px, 7vw, 76px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #121212; }
    .cta-band-sub { margin-top: 18px; max-width: 58ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: #2A2A2A; }
    .cta-band-sub strong { color: #121212; }
    .cta-band-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
    .cta-band .cta-band-primary { background: #121212; color: #D6FF00; border: 1.5px solid #121212; }
    .cta-band .cta-band-primary:hover { background: #2A2A2A; }
    .cta-band .cta-band-secondary { background: transparent; color: #121212; border: 1.5px solid #121212; }
    .cta-band .cta-band-secondary:hover { background: rgba(18, 18, 18, 0.08); }
    .cta-band .btn-base:focus-visible { outline: 2px solid #121212; outline-offset: 3px; }
    .cta-band-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; list-style: none; padding: 0; font-size: 14px; font-weight: 600; color: #2A2A2A; }
    .cta-band-facts li { display: flex; align-items: center; gap: 8px; }
    .cta-band-facts li::before { content: ""; width: 7px; height: 7px; background: #121212; }
    @media (max-width: 640px) { .cta-band-actions .btn-base { width: 100%; justify-content: center; } }
    .log-more { margin-top: 18px; }

    /* ---------- Mobile Menu: card preview and demo (mirrors the plugin's module) ---------- */
    .snap-mm { position: relative; width: 150px; height: 190px; border: 1.5px solid var(--border-subtle); border-radius: 22px; background: var(--bg-surface-subtle); padding: 10px; overflow: hidden; }
    .snap-mm-bar { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 8px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--bg-surface); }
    .snap-mm-logo { width: 14px; height: 14px; border-radius: 4px; background: var(--text-primary); }
    .snap-mm-burger { display: grid; gap: 2px; }
    .snap-mm-burger i { display: block; width: 12px; height: 2px; background: var(--text-primary); }
    .snap-mm-card { margin-top: 6px; display: grid; gap: 0; padding: 4px 10px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--bg-surface); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .3); animation: snap-mm 3.4s cubic-bezier(.16, 1, .3, 1) infinite; transform-origin: top center; }
    .snap-mm-card span { height: 22px; border-bottom: 1px solid var(--border-subtle); position: relative; }
    .snap-mm-card span::after { content: ''; position: absolute; right: 0; top: 8px; width: 45%; height: 6px; background: var(--text-primary); }
    .snap-mm-card span.w-60::after { width: 60%; background: var(--accent-volt); height: 10px; top: 6px; border-radius: 5px; }
    .snap-mm-card span:last-child { border-bottom: 0; }
    @keyframes snap-mm { 0%, 12% { opacity: 0; transform: translateY(-6px) scale(.98); } 32%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px) scale(.98); } }

    .mm-demo-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
    .mm-demo-styles { display: flex; gap: 10px; flex-wrap: wrap; }
    .mm-phone { width: 100%; max-width: 360px; margin: 0 auto; padding: 12px; border: 1.5px solid var(--border-strong, var(--border-subtle)); border-radius: 44px; background: var(--text-primary); }
    .mm-screen { position: relative; height: 620px; overflow: hidden; border-radius: 34px; background: var(--bg-surface-subtle); isolation: isolate; }
    .mm-header { position: relative; z-index: 2; }
    .mm-bar { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
    .mm-phone[data-style="bento"] .mm-header { padding: 12px 12px 0; }
    .mm-phone[data-style="bento"] .mm-bar { border: 1px solid var(--border-subtle); border-radius: 22px; padding: 8px 8px 8px 14px; }
    .mm-logo { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--accent-volt); border: 1.5px solid var(--text-primary); }
    .mm-name { font-weight: 800; font-size: 14px; color: var(--text-primary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mm-cta { font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: var(--text-primary); color: var(--bg-surface); text-decoration: none; white-space: nowrap; }
    .mm-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; cursor: pointer; color: var(--text-primary); border-radius: 10px; -webkit-tap-highlight-color: transparent; }
    .mm-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .3s; }
    .mm-toggle svg + svg { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.8); }
    .mm-toggle.is-open svg:first-child { opacity: 0; transform: rotate(90deg) scale(.8); }
    .mm-toggle.is-open svg + svg { opacity: 1; transform: none; }
    .mm-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
    .mm-panel { position: absolute; top: 100%; left: -1px; right: -1px; height: 560px; display: flex; flex-direction: column; padding: 4px 22px 28px; background: var(--bg-surface); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-15px); transition: opacity .4s cubic-bezier(.16, 1, .3, 1), transform .4s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .4s; }
    .mm-phone[data-style="bento"] .mm-panel { top: calc(100% + 8px); left: 0; right: 0; height: auto; border: 1px solid var(--border-subtle); border-radius: 22px; padding: 2px 18px 18px; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .28); transform: translateY(-8px) scale(.98); transform-origin: top center; }
    .mm-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
    .mm-panel a:not(.mm-panel-cta) { display: block; padding: 14px 0; text-align: end; font-size: 22px; font-weight: 700; color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border-subtle); }
    .mm-phone-line { margin-top: 20px; text-align: end; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
    .mm-panel-cta { align-self: flex-end; margin-top: 10px; padding: 10px 18px; border-radius: 999px; background: var(--accent-volt); color: #121212; font-weight: 700; font-size: 14px; text-decoration: none; border: 1.5px solid #121212; }
    .mm-panel a:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
    .mm-page { position: relative; z-index: 1; display: grid; gap: 10px; padding: 12px; }
    .mm-page-hero { display: grid; gap: 10px; padding: 22px 18px; border-radius: 20px; background: var(--bg-surface); }
    .mm-page-hero b { height: 26px; width: 80%; background: var(--text-primary); border-radius: 4px; }
    .mm-page-hero i { height: 8px; background: var(--border-subtle); border-radius: 4px; }
    .mm-page-hero i.w-80 { width: 80%; }
    .mm-page-tile { height: 150px; border-radius: 20px; background: var(--bg-surface); border: 1px solid var(--border-subtle); }
    .mm-demo-status { margin-top: 12px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
    @media (prefers-reduced-motion: reduce) {
      .snap-mm-card { animation: none; }
      .mm-toggle svg, .mm-panel { transition-duration: .01s !important; transform: none !important; }
    }
    .tpl-site-grid figcaption.tpl-site-menu-cap { margin-top: 20px; }

    /* ---------- Built for MCP (homepage) ---------- */
    .mcp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
    .mcp-group { padding: 20px 22px; background: var(--bg-surface); border: 1.5px solid var(--border-subtle); }
    .mcp-group h3 { font-size: 15px; font-weight: 800; color: var(--text-primary); margin: 0 0 12px; }
    .mcp-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
    .mcp-group li { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
    .mcp-group code { display: inline-block; margin-right: 4px; font: 600 12px/1.4 var(--font-mono); color: var(--text-primary); }

    /* ---------- Using modules together (modules-together.html) ---------- */
    .pairs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
    .pairs-group { padding: 20px 22px; background: var(--bg-surface); border: 1.5px solid var(--border-subtle); }
    .pairs-group h3 { margin: 0 0 8px; font-size: 15px; }
    .pairs-group .pk { display: inline-block; font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; padding: 5px 8px; border: 1.5px solid currentColor; }
    .pk-pick-one .pk { color: var(--accent-rose); }
    .pk-steps-aside .pk { color: var(--accent-amber); }
    .pk-takes-turns .pk { color: var(--accent-blue); }
    .pk-teams-up .pk { background: var(--accent-volt); color: #121212; border-color: #121212; }
    .pk-fine .pk { color: var(--text-secondary); }
    .pairs-what { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
    .pairs-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
    .pairs-group li { font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
    .pairs-group li strong { display: block; color: var(--text-primary); font-weight: 800; }
    .pairs-group code { font: 600 12px/1.4 var(--font-mono); color: var(--text-primary); white-space: nowrap; }

    /* 0.21.0: Video & big type demos. Elementor's base styles for its Background Video element, then the plugin's module CSS. */
    .e-background-video { position: relative; overflow: hidden; display: flex; flex-direction: column; }
    .e-background-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; }
    .e-background-video__content { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; }
    .e-background-video__controls { position: absolute; inset-block-end: 16px; inset-inline-end: 16px; z-index: 2; display: flex; gap: 8px; }
    .e-background-video__play, .e-background-video__pause { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; }
    .e-background-video--playing .e-background-video__play, .e-background-video--paused .e-background-video__pause { display: none; }
/* Nori: Background Video. Builds on Elementor's own Background Video element (e-background-video).
   .bg-video-np: a tint over the video so text on top stays readable, tidy play/pause buttons, and
   playback that pauses off screen and respects reduced motion (the JS).
   .video-text-np: the video plays only inside the text (the JS draws the text as a mask). */

/* Tint: sits above the video (z-index 0, later in the stacking order) and below the content (1). */
.bg-video-np { isolation: isolate; }
.bg-video-np::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--nori-bgv-tint, #000);
	opacity: var(--nori-bgv-strength, 0.45);
}
.bg-video-np.nori-bgv--bottom::after {
	background: linear-gradient(180deg, transparent 0%, var(--nori-bgv-tint, #000) 100%);
	opacity: calc(var(--nori-bgv-strength, 0.45) * 1.7);
}
.bg-video-np.nori-bgv--side::after {
	background: linear-gradient(90deg, var(--nori-bgv-tint, #000) 0%, transparent 85%);
	opacity: calc(var(--nori-bgv-strength, 0.45) * 1.7);
}

/* Play and pause: a small frosted pill. Elementor keeps only the one that applies visible. */
.nori-bgv.nori-bgv .e-background-video__play,
.nori-bgv.nori-bgv .e-background-video__pause {
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background-color 0.2s ease;
}
.nori-bgv.nori-bgv .e-background-video__play:hover,
.nori-bgv.nori-bgv .e-background-video__pause:hover { background: rgba(0, 0, 0, 0.7); }
.nori-bgv .e-background-video__play:focus-visible,
.nori-bgv .e-background-video__pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.6); }
.nori-bgv .e-background-video__play > *,
.nori-bgv .e-background-video__pause > * { color: inherit; font: inherit; margin: 0; }

/* Video switched off (phones setting, or the visitor's data saver): no buttons for a still picture. */
.nori-bgv-off .e-background-video__controls { display: none !important; }

/* Video text: once the mask is drawn the letters are see-through, so the video shows in their shape.
   Without JavaScript, or in the editor, the text stays a normal solid color on top of the video. */
.video-text-np.nori-vt-ready .e-background-video__content * { color: transparent !important; -webkit-text-stroke: 0 !important; }
.video-text-np.nori-vt-ready .e-background-video__media {
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* In video text the buttons would sit on the letters: they show on hover and keyboard focus only. */
.video-text-np.nori-vt-ready .e-background-video__controls { opacity: 0; transition: opacity 0.2s ease; }
.video-text-np.nori-vt-ready:hover .e-background-video__controls,
.video-text-np.nori-vt-ready .e-background-video__controls:focus-within { opacity: 1; }

/* Nori: Fit Text. Put .fit-text-np on a heading: the JS sizes it to fill the width on one line.
   Until then (and in the editor) the heading keeps its own font size. */
.fit-text-np.nori-fit-ready { overflow: visible; }
.fit-text-np { max-width: 100%; }

/* Nori: Split Reveal. Put .split-reveal-np on a heading or paragraph: its words rise into place one
   after another when it scrolls into view. Words are only hidden once the JS has split them, so the
   text is always readable without JavaScript, in the editor and with reduced motion. */
.split-reveal-np.nori-sr .nori-sr-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block-end: 0.08em; margin-block-end: -0.08em; }
.split-reveal-np.nori-sr .nori-sr-w > span {
	display: inline-block;
	transform: translateY(var(--nori-sr-distance, 105%));
	opacity: 0;
	transition: transform var(--nori-sr-duration, 900ms) cubic-bezier(0.2, 0.8, 0.2, 1), opacity var(--nori-sr-duration, 900ms) ease;
}
.split-reveal-np.nori-sr.nori-sr-in .nori-sr-w > span { transform: none; opacity: 1; }
.split-reveal-np.nori-sr.nori-sr-done .nori-sr-w > span { transition: none; transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.split-reveal-np.nori-sr .nori-sr-w > span { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* Nori: Scroll Expand. Put .scroll-expand-np on a full-width block (a Background Video, an image, a
   flexbox): it starts as a framed, rounded panel and opens to the full width as it scrolls up the
   screen. Without JavaScript, in the editor and with reduced motion it stays framed. */
.scroll-expand-np {
	--nori-se-p: 0;
	clip-path: inset(0 calc((1 - var(--nori-se-p)) * var(--nori-se-inset, 40px)) round calc((1 - var(--nori-se-p)) * var(--nori-se-radius, 24px)));
	will-change: clip-path;
}
@media (max-width: 767px) {
	.scroll-expand-np { --nori-se-inset: 12px; }
}


    .vt-demo { background: var(--bg-surface); margin-top: 18px; }
    .vt-demo .e-background-video__controls { inset-block-start: 8px; inset-block-end: auto; inset-inline-end: 8px; }
    .vt-demo-word { margin: 0; font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; line-height: 1.2; font-size: 12vw; color: var(--text-primary); }
    .bgv-demo { --nori-bgv-tint: #121212; min-height: 380px; padding: 32px; margin-top: 16px; justify-content: flex-end; }
    .bgv-demo .e-background-video__content { justify-content: flex-end; gap: 12px; align-items: flex-start; }
    .bgv-demo .e-background-video__controls { inset-block-start: 16px; inset-block-end: auto; }
    .bgv-demo-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #D6FF00; }
    .bgv-demo-title { margin: 0; font-size: clamp(32px, 5vw, 64px); line-height: 1; letter-spacing: -0.03em; color: #FFFFFF; }
    .bgv-demo-btn { background: #D6FF00; color: #121212; border: 1px solid #D6FF00; }
    .sr-demo { font-size: clamp(30px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.03em; margin: 18px 0; font-weight: 500; color: var(--text-primary); }
    .se-demo { height: clamp(280px, 50vh, 520px); margin-top: 18px; padding: 24px 64px; justify-content: flex-end; }
    .se-demo .e-background-video__controls { inset-block-start: 20px; inset-block-end: auto; inset-inline-end: 60px; }
    @media (max-width: 767px) { .se-demo { padding: 20px 28px; } .se-demo .e-background-video__controls { inset-inline-end: 24px; } }
    .se-demo-pill { align-self: flex-start; margin-top: auto; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.92); color: #121212; }
    .snap-vt { display: grid; gap: 10px; justify-items: start; }
    .snap-vt b { font-size: 46px; font-weight: 900; letter-spacing: -0.04em; line-height: .9; background: linear-gradient(120deg, #555, #121212 45%, #8a8a8a 70%, #121212); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .snap-vt span { display: flex; gap: 6px; } .snap-vt i { width: 34px; height: 8px; background: #D6FF00; } .snap-vt i:nth-child(2) { width: 52px; } .snap-vt i:nth-child(3) { width: 24px; opacity: .5; }

    /* ---------- Homepage: what's inside ---------- */
    a.hub-hero-status { text-decoration: none; }
    a.hub-hero-status:hover { border-color: var(--text-primary); }
    .home-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
    .home-group { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; background: var(--bg-surface); border: 1.5px solid var(--border-subtle); color: var(--text-secondary); text-decoration: none; font-size: 14px; line-height: 1.5; transition: border-color .12s ease, transform .12s ease; }
    .home-group:hover, .home-group:focus-visible { border-color: var(--text-primary); transform: translateY(-2px); }
    .home-group strong { font-size: 17px; font-weight: 800; color: var(--text-primary); }
    .home-group-kicker { font: 700 11px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
    .lab-usage-more { margin: 10px 0 0; font-size: 14px; }

    /* ---------- Class library page (classes.html) ---------- */
    #classes .classes-controls-panel { margin-top: 0; }
    @media (prefers-reduced-motion: reduce) { .home-group { transition: none; } .home-group:hover { transform: none; } }