@font-face {
      font-family: 'SF Pro';
      src: local('-apple-system'), local('SF Pro Display'), local('SF Pro Text');
    }

    :root {
      /* Stronger than the built-in CSS keywords, which are too weak to read as intentional */
      --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    }

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

    html, body {
      height: 100%;
      overflow: hidden;
      overscroll-behavior: none;
    }
    body {
      font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', BlinkMacSystemFont, sans-serif;
      -webkit-font-smoothing: antialiased;
      background-color: #FDFCFC;
      background-image: radial-gradient(#ECE9E9 1px, transparent 1px);
      background-size: 12px 12px;
      width: 100vw;
      min-height: 100vh;
      position: relative;
    }

    /* ── Nav ── */
    .nav {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 2100;
    }

    .nav-left {
      display: flex;
      align-items: center;
      gap: 48px;
    }

    .nav-logo {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.9px;
      color: #000;
      white-space: nowrap;
    }

    .nav-project {
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
    }

    .nav-project-name {
      font-size: 14px;
      font-weight: 400;
      color: #000;
    }

    .nav-project-arrow {
      width: 16px; height: 16px;
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 20px;
    }

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

   
    .avatar-stack {
      display: flex;
      align-items: center;
      position: relative;
    }

    .avatar-stack .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid white;
      overflow: hidden;
      background: #e0dbd6;
      position: relative;
      flex-shrink: 0;
    }

    .avatar-stack .avatar + .avatar {
      margin-left: -12px;
    }

    .avatar-stack .avatar:nth-child(1) { z-index: 5; }
    .avatar-stack .avatar:nth-child(2) { z-index: 4; }
    .avatar-stack .avatar:nth-child(3) { z-index: 3; }
    .avatar-stack .avatar:nth-child(4) { z-index: 2; }

    .avatar img,
    .current-user img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    .current-user {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid white;
      overflow: hidden;
      flex-shrink: 0;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      height: 32px;
      border-radius: 999px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      white-space: nowrap;
      transition: opacity 0.15s;
    }

    .btn:hover { opacity: 0.8; }

    .btn-share {
      background: #f5f3f1;
      color: #2f342e;
      border: 1px solid rgba(0,0,0,0.05);
    }

    .btn-export {
      background: #000;
      color: #fff;
      padding: 12px 14px;
      border-radius: 100px;
    }

    /* ── Left Toolbar ── */
    .toolbar {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: #f5f3f1;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 999px;
  padding: 12px 6px; /* equal top & bottom */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 100;
  transition: opacity 0.3s ease;
}
    body:has(.export-backdrop.visible) .toolbar {
      opacity: 0;
      pointer-events: none;
    }

.toolbar-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: background 0.15s, box-shadow 0.15s;
  padding: 0;
}

.toolbar-btn:hover {
  background: #ffffff;
}

.toolbar-btn.active {
  background: #ffffff;
}

.toolbar-btn img {
      width: 20px; height: 20px;
      display: block;
    }

    .toolbar-btn.icon40 img { width: 40px; height: 40px; }

    .toolbar-divider {
  width: calc(100% - 8px); /* 4px left + 4px right inset */
  height: 1px; /* 1pt stroke */
  background: rgba(0, 0, 0, 0.10);
  margin: 2px 0; /* subtle breathing space */
}

    /* ── Canvas background ── */
    .canvas {
      position: fixed;
      inset: 0;
      width: 100%;
      background: transparent;
      pointer-events: none;
    }

    /* ── Modal overlay ── */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5000;
    }

    .modal {
      width: 530px;
      background: #fff;
      border: 0.5px solid rgba(0,0,0,0.1);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 4px 24px 0 rgba(0,0,0,0.04);
      position: relative;
      z-index: 0;
    }

    /* Gradient blobs at top of modal */
    .modal-blob {
      position: absolute;
      pointer-events: none;
      border-radius: 50%;
      filter: blur(48px);
      opacity: 0.65;
      will-change: transform;
      z-index: 0;
    }

    .modal-blob-left {
      width: 360px; height: 260px;
      left: -40px;
      top: -80px;
      background: radial-gradient(ellipse at 40% 50%, #d8b4fe 0%, #e9d5ff 40%, transparent 75%);
      animation: blob-float-vertical 7s ease-in-out infinite;
    }

    .modal-blob-right {
      width: 400px; height: 260px;
      right: -40px;
      top: -80px;
      background: radial-gradient(ellipse at 100% 60%, #d9f99d 0%, #ecfccb 40%, transparent 75%);
      animation: blob-float-vertical 9s ease-in-out infinite 0.5s;
    }

    @keyframes blob-float-vertical {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
    }

    .modal-title {
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      color: #000;
      padding: 32px 0px 0px 0px;
      position: relative;
      z-index: 2;
      line-height: 16.5px;
      font-variation-settings: 'wdth' 100;
    }

    .drop-zone {
      margin: 28px 23.5px 0;
      background: #fafafa;
      border: 1px dashed rgba(0,0,0,0.1);
      border-radius: 12px;
      height: 224px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 24px;
      padding: 16px;
      cursor: pointer;
      transition: background 0.15s;
      position: relative;
      z-index: 2;
    }

    .drop-zone:hover { background: #f3f3f2; }

    .drop-zone-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .folder-icon {
      width: 20px; height: 20px;
    }

    .drop-text {
      font-size: 16px;
      font-weight: 500;
      color: #000;
      font-variation-settings: 'wdth' 100;
    }

    .drop-subtext {
      font-size: 12px;
      font-weight: 400;
      color: rgba(0,0,0,0.4);
      font-variation-settings: 'wdth' 100;
    }

    .drop-subtext a {
      color: rgba(0,0,0,0.4);
      text-decoration: underline;
    }

    .source-chips {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
    }

    .source-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 9px 13px;
      background: #fff;
      border: none;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      color: #2f342e;
      cursor: pointer;
      transition: background 0.15s;
      white-space: nowrap;
      font-variation-settings: 'wdth' 100;
    }

    .source-chip:hover { background: #f5f5f4; }

    .source-chip-icon {
      width: 16px; height: 16px;
      border-radius: 4px;
      flex-shrink: 0;
      overflow: hidden;
    }

    .source-chip-icon img {
      width: 100%; height: 100%;
      object-fit: cover;
    }

    .link-icon {
      width: 16px; height: 16px;
    }

    /* Button group */
    .btn-group {
      display: flex;
      gap: 8px;
      padding: 20px 23.5px 24px;
      height: 88px;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .btn-later {
      width: 160px;
      height: 48px;
      background: #f2f0ef;
      border-radius: 100px;
      border: none;
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
      color: rgba(0,0,0,0.8);
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s;
    }

    .btn-later:hover { background: #e9e7e5; }

    .btn-continue {
      flex: 1;
      height: 48px;
      background: #000;
      border-radius: 100px;
      border: none;
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
      color: #fff;
      cursor: pointer;
      transition: opacity 0.15s;
    }

    .btn-continue:hover { opacity: 0.85; }

    /* ── Bottom Nav ── */
    .bottom-nav {
      position: fixed;
      bottom: 0; right: 0;
      padding: 20px;
      display: flex;
      gap: 12px;
      align-items: center;
      z-index: 100;
    }

    .sort-btn {
      background: #f5f3f1;
      border: 1px solid rgba(0,0,0,0.05);
      border-radius: 999px;
      padding: 0 12px;
      height: 35px;
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      color: #2f342e;
      cursor: pointer;
      font-variation-settings: 'wdth' 100;
      transition: transform 160ms var(--ease-out);
    }
    .sort-btn:active { transform: scale(0.97); }

    .zoom-btn {
      background: #f5f3f1;
      border: 1px solid rgba(175,179,171,0.2);
      border-radius: 999px;
      padding: 9px 0;
      width: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      color: #2f342e;
      cursor: pointer;
      font-variation-settings: 'wdth' 100;
    }

    /* ── Tooltip ── */
    .sort-wrap { position: relative; }

    .tooltip {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: #3a3a3a;
      color: #f6f6f6;
      font-family: inherit;
      font-size: 12px;
      font-weight: 500;
      padding: 10px 12px;
      border-radius: 12px;
      white-space: nowrap;
      z-index: 150;
      box-shadow: 0 2px 10px rgba(0,0,0,0.14);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s;
      font-variation-settings: 'wdth' 100;
    }

    /* Downward triangle arrow flush below tooltip box */
    .tooltip::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
      width: 0; height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 5px solid #3a3a3a;
    }

    /* ── Sort popup ── */
    .sort-popup {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 0;
      width: 148px;
      background: #fff;
      border: 1px solid rgba(0,0,0,0.06);
      /* Nested radius: row radius (8) + panel padding (6) */
      border-radius: 14px;
      padding: 6px;
      z-index: 151;
      /* Grows out of the button's bottom-left corner, which it's flush with */
      transform-origin: bottom left;
      opacity: 0;
      visibility: hidden;
      transform: translateY(4px) scale(0.96);
      /* Exit is quicker than enter — the system responding, not the user deciding */
      transition: opacity 130ms var(--ease-out),
                  transform 130ms var(--ease-out),
                  visibility 0s linear 130ms;
    }
    .sort-popup.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      transition: opacity 180ms var(--ease-out),
                  transform 180ms var(--ease-out),
                  visibility 0s;
    }

    .sort-popup-options {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    /* Selected pill — slides between rows rather than cross-fading in place */
    .sort-popup-thumb {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 34px;
      border-radius: 8px;
      background: rgba(0,0,0,0.06);
      pointer-events: none;
      transition: transform 130ms var(--ease-in-out);
    }
    .sort-popup-thumb.no-anim { transition: none; }

    .sort-popup-option {
      position: relative;
      display: flex;
      align-items: center;
      gap: 6px;
      height: 34px;
      padding: 0 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(0,0,0,0.5);
      cursor: pointer;
      font-family: inherit;
      font-variation-settings: 'wdth' 100;
      opacity: 0;
      transition: opacity 150ms var(--ease-out),
                  transform 140ms var(--ease-out),
                  color 150ms ease;
    }
    .sort-popup.open #sortOptPerson {
      opacity: 1;
      transition: opacity 150ms var(--ease-out) 20ms,
                  transform 140ms var(--ease-out),
                  color 150ms ease;
    }
    .sort-popup.open #sortOptTheme {
      opacity: 1;
      transition: opacity 150ms var(--ease-out) 55ms,
                  transform 140ms var(--ease-out),
                  color 150ms ease;
    }
    .sort-popup-option.selected { color: #000; }

    /* The pill itself is the hover affordance — it slides under whichever row the
       pointer is on, so only one row is ever filled. Press darkens it in place;
       scaling the row instead would desync it from the pill underneath. */
    .sort-popup-options:active .sort-popup-thumb { background: rgba(0,0,0,0.09); }

    @media (hover: hover) and (pointer: fine) {
      .sort-popup-option:hover { color: #000; }
    }

    .sort-opt-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      display: block;
    }

    @media (prefers-reduced-motion: reduce) {
      .sort-popup {
        transform: none;
        transition: opacity 130ms ease, visibility 0s linear 130ms;
      }
      .sort-popup.open {
        transform: none;
        transition: opacity 130ms ease, visibility 0s;
      }
      .sort-popup-thumb { transition: none; }
      .sort-btn:active { transform: none; }
    }

    /* ── Canvas world (zoomable container for all boards) ── */
    #canvasWorld {
      position: fixed;
      inset: 0;
      z-index: 1001;
      pointer-events: none;
      transform-origin: top left;
      transition: transform 0.8s ease;
    }

    /* ── Canvas image section ── */
    #canvasSection {
      position: absolute;
      left: 120px;
      top: 160px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.6s ease;
      transform: scale(0.66);
      transform-origin: top left;
    }

    #canvasSection.visible { opacity: 1; }

    .canvas-section-label {
      font-size: 16px; /* counteracts 0.66 board scale so rendered size ≥ 10px */
      font-weight: 500;
      color: rgba(0,0,0,0.6);
      margin-bottom: 12px;
      font-variation-settings: 'wdth' 100;
    }

    .canvas-frame {
      position: relative;
      background: rgba(249, 247, 247, 0.2);
      border: 0.5px solid rgba(0,0,0,0.1);
      border-radius: 16px;
      overflow: hidden;
      transition: background 0.72s ease;
    }
    /* Soft synced breath while the conflict panel is reading the board */
    .canvas-frame.cp-board-shine .canvas-slot {
      animation: cp-board-breathe 4.2s ease-in-out infinite;
    }
    @keyframes cp-board-breathe {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.72; }
    }

    .canvas-slot {
      position: absolute;
      border-radius: 10px;
      overflow: hidden;
      background: rgba(245,243,241,0.5);
    }

    .canvas-slot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Shimmer flare for Sable's empty slots — all in sync, no stagger */
    .sable-slot {
      background-color: #f0eeec;
      background-image: linear-gradient(90deg, #f0eeec 0px, #f6f5f3 120px, #f0eeec 240px);
      background-size: 600px 100%;
      animation: slot-shimmer 2.6s ease-in-out infinite;
    }
    .sable-slot.filled {
      animation: none;
      background: transparent;
    }
    @keyframes slot-shimmer {
      0%   { background-position: -300px 0; }
      100% { background-position: 900px 0; }
    }

    /* ── Text cards (Priya + Leo) ── */
    .text-card {
      background: #fff;
      border: 1px solid rgba(0,0,0,0.06);
      border-radius: 20px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.06);
      padding: 20px;
    }
    /* Priya: single card hugging content */
    .priya-text-card {
      width: 400px;
    }
    /* Leo: two cards side by side */
    .leo-cards-row {
      display: flex;
      gap: 12px;
    }
    .leo-text-card {
      min-width: 250px;
      max-width: 325px;
      flex-shrink: 0;
    }

    .text-card-title {
      font-size: 12px;
      font-weight: 400;
      color: rgba(0,0,0,0.6);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 14px;
      font-family: inherit;
      line-height: 1.5;
    }
    .text-card-body {
      font-size: 17px;
      font-weight: 400;
      color: #000;
      line-height: 1.6;
      font-family: inherit;
    }
    .text-card-body strong { font-weight: 700; }
    .text-card-body .dim { opacity: 0.8; margin-top: 10px; }

    /* ── Zoom indicator ── */
    /* ── Team cursors ── */
    .team-cursor {
      position: fixed;
      pointer-events: none;
      z-index: 1100;
      opacity: 0;
      transition: opacity 0.8s ease;
    }
    .team-cursor.visible { opacity: 1; }
    body:has(.export-backdrop.visible) .team-cursor {
      opacity: 0;
    }
    .team-cursor-label {
      position: absolute;
      top: 20px;
      left: 14px;
      padding: 6px 10px;
      border-radius: 999px;
      border-top-left-radius: 3px;
      font-size: 12px;
      font-weight: 500;
      color: #fff;
      white-space: nowrap;
      font-family: inherit;
      font-variation-settings: 'wdth' 100;
      line-height: 1;
    }

    /* ── Stacked deck ── */
    .deck-container {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1200px;
      pointer-events: none;
    }

    .deck-card {
      position: absolute;
      width: 320px;
      border-radius: 40px;
      overflow: hidden;
      background: #fff;
      transform-origin: bottom center;
    }

    .deck-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
    }

    /* ── Atmospheric gradient overlay ── */
    .atm-overlay {
      position: fixed;
      inset: 0;
      z-index: 999;
      pointer-events: none;
      overflow: hidden;
      opacity: 0;
      transition: opacity 0.8s ease;
    }

    .atm-overlay.visible { opacity: 1; }

    .atm-blob {
      position: absolute;
      will-change: transform;
    }

    .atm-blob-1 {
      left: -10%; top: -10%;
      width: 60vw; height: 65vw;
      max-width: 800px; max-height: 850px;
      border-radius: 40% 60% 70% 30%;
      background: #C7A2FF;
      filter: blur(120px);
      opacity: 0.5;
      animation: atm1 35s ease-in-out infinite;
    }

    .atm-blob-2 {
      right: -10%; top: -5%;
      width: 55vw; height: 50vw;
      max-width: 750px; max-height: 700px;
      border-radius: 60% 40% 30% 70%;
      background: #D5FF3C;
      filter: blur(120px);
      opacity: 0.4;
      animation: atm2 40s ease-in-out infinite;
    }

    .atm-blob-3 {
      right: -20%; bottom: -20%;
      width: 70vw; height: 75vw;
      max-width: 900px; max-height: 950px;
      border-radius: 50% 50% 40% 60%;
      background: #C7A2FF;
      filter: blur(140px);
      opacity: 0.5;
      animation: atm3 45s ease-in-out infinite;
    }

    .atm-blob-4 {
      left: -15%; bottom: -15%;
      width: 60vw; height: 55vw;
      max-width: 850px; max-height: 800px;
      border-radius: 30% 70% 60% 40%;
      background: #D5FF3C;
      filter: blur(130px);
      opacity: 0.4;
      animation: atm4 38s ease-in-out infinite;
    }

    .atm-blob-5 {
      left: 20%; top: 20%;
      width: 45vw; height: 45vw;
      max-width: 650px; max-height: 650px;
      border-radius: 45% 55% 45% 55%;
      background: #C7A2FF;
      filter: blur(120px);
      opacity: 0.3;
      animation: atm5 50s ease-in-out infinite;
    }

    @keyframes atm1 {
      0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
      33%  { transform: translate(25vw, 20vh) scale(1.4) rotate(120deg); }
      66%  { transform: translate(-10vw, 30vh) scale(0.9) rotate(240deg); }
      100% { transform: translate(0, 0) scale(1) rotate(360deg); }
    }
    @keyframes atm2 {
      0%   { transform: translate(0, 0) scale(0.9) rotate(360deg); }
      33%  { transform: translate(-30vw, 25vh) scale(1.3) rotate(240deg); }
      66%  { transform: translate(15vw, -10vh) scale(1.1) rotate(120deg); }
      100% { transform: translate(0, 0) scale(0.9) rotate(0deg); }
    }
    @keyframes atm3 {
      0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
      33%  { transform: translate(-25vw, -20vh) scale(0.8) rotate(-120deg); }
      66%  { transform: translate(20vw, -30vh) scale(1.2) rotate(-240deg); }
      100% { transform: translate(0, 0) scale(1) rotate(-360deg); }
    }
    @keyframes atm4 {
      0%   { transform: translate(0, 0) scale(1.1) rotate(0deg); }
      33%  { transform: translate(20vw, -25vh) scale(0.9) rotate(180deg); }
      66%  { transform: translate(-25vw, 20vh) scale(1.2) rotate(270deg); }
      100% { transform: translate(0, 0) scale(1.1) rotate(360deg); }
    }
    @keyframes atm5 {
      0%   { transform: translate(0, 0) scale(0.8) rotate(0deg); }
      33%  { transform: translate(20vw, -15vh) scale(1.4) rotate(90deg); }
      66%  { transform: translate(-15vw, 25vh) scale(0.9) rotate(180deg); }
      100% { transform: translate(0, 0) scale(0.8) rotate(360deg); }
    }

    /* ── Teammate boards ── */
    .teammate-section {
      position: absolute;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.8s ease;
      transform: scale(0.66);
      transform-origin: top left;
    }
    .teammate-section.visible { opacity: 1; }

    .theme-section {
      position: absolute;
      pointer-events: auto;
      opacity: 0;
      transform: scale(0.66);
      transform-origin: top left;
    }
    .theme-board-num {
      font-size: 16px;
      font-weight: 500;
      color: #000;
      margin-bottom: 6px;
      font-variation-settings: 'wdth' 100;
      letter-spacing: -0.2px;
      line-height: 1.3;
    }
    .theme-board-title {
      font-size: 16px;
      font-weight: 500;
      color: #000;
      margin-bottom: 6px;
      font-variation-settings: 'wdth' 100;
      letter-spacing: -0.2px;
      line-height: 1.3;
    }
    .theme-board-desc {
      font-size: 13px;
      font-weight: 400;
      color: rgba(0,0,0,0.60);
      margin-bottom: 10px;
      font-variation-settings: 'wdth' 100;
      max-width: 360px;
      line-height: 1.5;
    }

    /* ── Export overlay ── */
    .export-backdrop {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      background: rgba(255,255,255,0.35);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .export-backdrop.visible {
      opacity: 1;
      pointer-events: all;
    }

    .export-panel {
      width: 530px;
      height: 640px;
      background: #fff;
      border: 0.5px solid rgba(0,0,0,0.08);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.03);
      position: absolute;
      display: flex;
      flex-direction: column;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    /* Only the open overlay may receive input. `.active` on a hidden
       backdrop still hit-tests (opacity 0 ≠ pointer-events none) and
       was swallowing clicks/scroll on the conflict panel underneath. */
    .export-backdrop.visible .export-panel.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* scroll wrapper — edge fades follow scroll, no pop-on/off */
    .export-scroll-wrap {
      flex: 1;
      min-height: 0;
      position: relative;
      overflow: hidden;
      z-index: 1;
      margin-top: 12px;
      --fade-top: 0;
      --fade-bot: 1;
    }
    .export-scroll-wrap::before,
    .export-scroll-wrap::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      height: 40px;
      z-index: 2;
      pointer-events: none;
    }
    .export-scroll-wrap::before {
      top: 0;
      background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0.72) 38%, transparent 100%);
      opacity: var(--fade-top);
    }
    .export-scroll-wrap::after {
      bottom: 0;
      background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0.72) 38%, transparent 100%);
      opacity: var(--fade-bot);
    }
    /* gradient blobs — using Figma exact positions */
    .export-blob {
      position: absolute;
      pointer-events: none;
      z-index: 0;
    }
    .export-blob-left {
      /* Ellipse26 purple: left:-354.5 top:-126.5 w:772 h:127 */
      width: 772px; height: 127px;
      left: -354.5px; top: -126.5px;
      background: radial-gradient(ellipse at 60% 80%, #c7a2ff 0%, #ddc4ff 50%, transparent 75%);
      filter: blur(40px);
      opacity: 0.7;
      border-radius: 50%;
    }
    .export-blob-right {
      /* Ellipse27 green: left:277.5 top:-126.5 w:418 h:127 */
      width: 418px; height: 127px;
      left: 277.5px; top: -126.5px;
      background: radial-gradient(ellipse at 40% 80%, #d5ff3c 0%, #e8ffaa 50%, transparent 75%);
      filter: blur(36px);
      opacity: 0.6;
      border-radius: 50%;
    }

    /* panel header (fixed, not scrolling) */
    .export-col {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      padding: 12px 16px 0;
      margin-top: 4px;
      gap: 10px;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    .export-header {
      padding: 16px 12px 0 16px;
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .export-header-copy {
      flex: 1;
      min-width: 0;
      padding-top: 12px;
    }
    .export-close {
      width: 28px; height: 28px; flex-shrink: 0;
      margin-top: 8px;
      display: flex; align-items: center; justify-content: center;
      border: none; background: transparent; border-radius: 8px;
      color: rgba(0,0,0,0.38); cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    .export-close:hover { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.7); }
    .export-close:active { transform: scale(0.96); }
    .export-title {
      font-size: 18px;
      font-weight: 600;
      color: #000;
      letter-spacing: -0.3px;
      margin-bottom: 0;
      line-height: 1.3;
      font-variation-settings: 'wdth' 100;
    }
    .export-subtitle {
      font-size: 14px;
      font-weight: 400;
      color: #9b9b9b;
      font-variation-settings: 'wdth' 100;
      margin-top: 8px;
      text-align: left;
      margin-bottom: 0;
    }

    /* scroll area */
    .export-scroll {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 4px 16px 16px;
      position: relative;
      z-index: 1;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .export-scroll::-webkit-scrollbar { display: none; }

    /* cards inside scroll */
    .ep-card {
      background: #fafafa;
      border-radius: 12px;
      padding: 16px 12px 12px;
      margin-bottom: 12px;
    }
    .ep-card:last-child { margin-bottom: 0; }

    /* "Add notes" card */
    .ep-card-dashed {
      background: #FAFAFA;
      border-radius: 12px;
      padding: 14px 12px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      cursor: pointer;
      outline: none;
      position: relative;
    }
    .ep-card-dashed .ep-card-icon {
      width: 20px;
      height: 20px;
    }
    .ep-card-dashed .ep-card-title {
      font-size: 14px;
      line-height: 20px;
      color: rgba(0,0,0,0.35);
    }

    /* sections inside scroll (panel 2) */
    .ep-section {
      padding: 18px 0;
      border-top: 1px solid rgba(0,0,0,0.06);
    }
    .ep-section:first-child { border-top: none; }

    /* card header: icon + title inline, then desc + content indented to same left as title */
    .ep-card-heading {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 0;
    }
    .ep-card-icon {
      width: 20px; height: 20px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ep-card-icon img,
    .ep-card-icon svg { width: 20px; height: 20px; object-fit: contain; color: #D079F2; display: block; }
    .ep-card-title {
      font-size: 16px;
      font-weight: 500;
      color: #000;
      font-variation-settings: 'wdth' 100;
    }
    /* indent content (desc, images, swatches, checklist) to align with title text (icon 20px + gap 8px = 28px) */
    .ep-card-body {
      padding-left: 28px;
    }
    .ep-card-desc {
      font-size: 13px;
      font-weight: 400;
      color: rgba(0,0,0,0.45);
      line-height: 1.5;
      margin-top: 4px;
      margin-bottom: 12px;
      font-variation-settings: 'wdth' 100;
    }

    /* image row */
    .ep-image-row {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .ep-image-row::-webkit-scrollbar { display: none; }
    .ep-image-thumb {
      border-radius: 8px;
      object-fit: cover;
      background: #f0eeec;
      flex-shrink: 0;
    }
    .ep-image-thumb.sq100 { width: 100px; height: 100px; }
    .ep-image-thumb.rect80 { width: 80px; height: 100px; }

    /* color swatches — named chips, 3×2 */
    .ep-swatch-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .ep-swatch {
      background: var(--swatch);
      color: var(--ink);
      border-radius: 10px;
      padding: 10px 11px 11px;
      min-height: 58px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 3px;
      min-width: 0;
    }
    .ep-swatch-name {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: -0.2px;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-variation-settings: 'wdth' 100;
    }
    .ep-swatch-hex {
      font-size: 10px;
      font-weight: 400;
      color: var(--ink-soft);
      letter-spacing: 0.01em;
      line-height: 1.2;
      font-variant-numeric: tabular-nums;
      font-variation-settings: 'wdth' 100;
    }

    /* action items / checkboxes */
    .ep-checklist {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 16px;
    }
    .ep-check-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .ep-check-box {
      width: 16px; height: 16px;
      border-radius: 5px;
      border: 1.5px solid rgba(0,0,0,0.18);
      flex-shrink: 0;
      background: #fff;
      margin-top: 2px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s;
      user-select: none;
    }
    .ep-check-box.checked {
      background: #000;
      border-color: #000;
    }
    .ep-check-box .ep-check-mark {
      display: none;
      width: 10px; height: 10px;
    }
    .ep-check-box.checked .ep-check-mark {
      display: block;
    }
    .ep-check-main {
      font-size: 15px;
      font-weight: 400;
      color: #000;
      font-variation-settings: 'wdth' 100;
      line-height: 1.4;
      margin-top: -1px;
    }
    .ep-check-sub {
      font-size: 12px;
      color: rgba(0,0,0,0.4);
      font-variation-settings: 'wdth' 100;
      margin-top: 2px;
    }

    /* section headings for panel 2 */
    .ep-section-heading {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
    }
    .ep-section-icon {
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ep-section-title {
      font-size: 15px;
      font-weight: 600;
      color: #000;
      font-variation-settings: 'wdth' 100;
    }
    .ep-section-desc {
      font-size: 13px;
      color: rgba(0,0,0,0.45);
      line-height: 1.5;
      margin-bottom: 14px;
      padding-left: 38px;
      font-variation-settings: 'wdth' 100;
    }

    /* method selection cards */
    .ep-method {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px;
      border-radius: 12px;
      cursor: pointer;
      margin-bottom: 8px;
      transition: background 0.15s;
    }
    .ep-method.selected {
      background: #f0ffd4;
    }
    .ep-method:not(.selected):hover { background: #fafaf9; }
    .ep-method-icon {
      width: 40px; height: 40px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      font-size: 18px;
    }
    .ep-method-icon.green { background: #9EF01A; }
    .ep-method-icon.gray  { background: rgba(0,0,0,0.06); }
    .ep-method-icon svg {
      width: 24px;
      height: 24px;
      display: block;
      color: #000;
    }
    .ep-method.not-selected .ep-method-icon { background: rgba(0,0,0,0.06) !important; }
    .ep-method.not-selected .ep-method-icon img,
    .ep-method.not-selected .ep-method-icon svg { opacity: 0.35; }
    .ep-method.selected .ep-method-icon { background: #9EF01A !important; }
    .ep-method.selected .ep-method-icon img,
    .ep-method.selected .ep-method-icon svg { opacity: 1; }
    .ep-method-title {
      font-size: 15px;
      font-weight: 600;
      color: #000;
      font-variation-settings: 'wdth' 100;
    }
    .ep-method.not-selected .ep-method-title { color: rgba(0,0,0,0.35); }
    .ep-method-subtitle {
      font-size: 12px;
      color: rgba(0,0,0,0.45);
      margin-top: 2px;
      font-variation-settings: 'wdth' 100;
    }

    /* system prompt preview box */
    .ep-prompt-preview {
      background: #fafafa;
      border: 0.5px solid rgba(0,0,0,0.05);
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 0;
      overflow: hidden;
      font-size: 12px;
      color: rgba(0,0,0,0.7);
      line-height: 1.55;
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .ep-prompt-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .ep-prompt-body::-webkit-scrollbar { display: none; }
    .ep-format-tag {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 2;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      line-height: 1;
      text-transform: uppercase;
      color: rgba(0,0,0,0.5);
      background: #fff;
      border: none;
      border-radius: 4px;
      padding: 4px 7px;
      pointer-events: none;
      font-variation-settings: 'wdth' 100;
      font-variant-numeric: tabular-nums;
    }
    .ep-prompt-h1 {
      font-size: 14px;
      font-weight: 700;
      color: #1a2a4a;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: 8px;
      padding-right: 48px;
    }
    .ep-prompt-h2 {
      font-size: 13px;
      font-weight: 700;
      color: #1a2a4a;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      margin: 12px 0 6px;
      padding-top: 12px;
      border-top: 1px solid rgba(0,0,0,0.1);
    }
    .ep-prompt-preview ul { padding-left: 16px; }
    .ep-prompt-preview li { margin-bottom: 4px; }

    /* footer buttons (fixed, not scrolling) */
    .export-footer {
      display: flex;
      gap: 10px;
      padding: 16px;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }
    .ep-btn-discard {
      width: 160px;
      height: 48px;
      background: #f2f0ef;
      border-radius: 100px;
      border: none;
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
      color: rgba(0,0,0,0.8);
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s;
    }
    .ep-btn-discard:hover { background: #e9e7e5; }
    .ep-btn-primary {
      flex: 1;
      height: 48px;
      background: #000;
      border-radius: 100px;
      border: none;
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
      color: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: opacity 0.15s;
    }
    .ep-btn-primary svg {
      width: 16px;
      height: 16px;
      display: block;
      flex-shrink: 0;
    }
    .ep-btn-primary:hover { opacity: 0.85; }

    /* ── Conflict Detection Panel ── */
    #conflictPanel {
      pointer-events: none;
      /* Coral = unresolved, green = resolved. Shell is Linear-like: gray
         frame, white well, 20px outer radius. */
      --cp-amber: #C45C4A;
      --cp-amber-soft: #FFF0F0;
      --cp-green: #2E9E5B;
      --cp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      position: fixed;
      top: 50%;
      left: calc(100vw + 20px);
      transform: translateY(6px) scale(0.97);
      transform-origin: center center;
      width: 470px;
      height: 620px;
      border-radius: 20px;
      background: #FAFAFA;
      border: 0.5px solid rgba(0,0,0,0.08);
      box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.03);
      z-index: 1500;
      opacity: 0;
      /* Arrive in place — never tween `left` (that reads as a slide from off-canvas). */
      transition: opacity 180ms var(--cp-ease-out),
                  transform 180ms var(--cp-ease-out);
    }
    #conflictPanel.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
      transition: opacity 280ms var(--cp-ease-out),
                  transform 280ms var(--cp-ease-out);
    }
    @media (prefers-reduced-motion: reduce) {
      #conflictPanel,
      #conflictPanel.visible {
        transform: none;
        transition: opacity 200ms ease;
      }
    }
    /* Dismissed: accent drains, whole card desaturates */
    #conflictPanel.drained {
      filter: saturate(0.06);
      transition: filter 0.3s ease, opacity 0.3s ease;
    }
    .cp-inner {
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
      border-radius: 20px;
      overflow: hidden;
      background: transparent;
      padding: 0 0 10px;
      -webkit-font-smoothing: antialiased;
    }
    .cp-well {
      position: relative;
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      background: #ffffff;
      border-radius: 12px;
      overflow: hidden;
      margin: 0 10px;
    }
    .cp-well::before,
    .cp-well::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      height: 24px;
      z-index: 3;
      pointer-events: none;
    }
    .cp-well::before {
      top: 0;
      background: linear-gradient(to bottom, #fff 0%, transparent 100%);
    }
    .cp-well::after {
      bottom: 0;
      background: linear-gradient(to top, #fff 0%, transparent 100%);
    }

    /* Transient affordance feedback (source jumps, reference opens) */
    .cp-hint {
      position: absolute; left: 50%; bottom: 16px;
      transform: translateX(-50%) translateY(6px);
      background: rgba(0,0,0,0.82); color: #fff;
      border-radius: 100px; padding: 7px 13px;
      font-size: 11px; font-weight: 500; white-space: nowrap;
      opacity: 0; pointer-events: none; z-index: 5;
      transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.23,1,0.32,1);
    }
    .cp-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* Page-level direction-saved toast — bottom center of the viewport (Sonner) */
    .cp-page-toast {
      position: fixed;
      left: 50%;
      bottom: 88px;
      z-index: 10000;
      display: flex;
      align-items: center;
      gap: 8px;
      transform: translateX(-50%) translateY(10px) scale(0.97);
      opacity: 0;
      pointer-events: none;
      background: #fff;
      color: #000;
      border: 0.5px solid rgba(0, 0, 0, 0.08);
      border-radius: 100px;
      padding: 10px 16px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      line-height: 18px;
      letter-spacing: -0.01em;
      white-space: nowrap;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
      transition: opacity 280ms cubic-bezier(0.23, 1, 0.32, 1),
                  transform 280ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .cp-page-toast-icon {
      width: 14px; /* line-height 18px − 4px */
      height: 14px;
      flex-shrink: 0;
      display: block;
    }
    .cp-page-toast-label {
      display: block;
    }
    .cp-page-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
    }

    /* Header is full-bleed across the gray frame so the pixel field reaches
       the panel's rounded top corners with no inset edge. */
    .cp-header {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 12px 14px 16px;
      flex-shrink: 0;
      overflow: hidden;
      background: #FAFAFA;
    }
    .cp-pixel-field {
      position: absolute; inset: 0; z-index: 0;
      display: block; width: 100%; height: 100%; pointer-events: none;
    }
    /* Gray wash over the pixels — strongest at the bottom edge, fades out upward */
    .cp-header::after {
      content: '';
      position: absolute; inset: 0; z-index: 0;
      pointer-events: none;
      background: linear-gradient(to top, #FAFAFA 0%, rgba(250, 250, 250, 0.7) 35%, transparent 100%);
    }
    .cp-header > *:not(.cp-pixel-field) { position: relative; z-index: 1; }
    .cp-close {
      width: 28px; height: 28px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border: none; background: transparent; border-radius: 8px;
      color: rgba(0,0,0,0.38); cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    .cp-close:hover { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.7); }
    .cp-close:active { transform: scale(0.96); }

    .cp-title-slot { position: relative; flex: 1; min-width: 0; min-height: 0; }
    .cp-title {
      font-size: 13.5px; font-weight: 500; color: #1a1a1a;
      letter-spacing: -0.2px; line-height: 1.3;
      white-space: nowrap;
    }
    .cp-title.enter { animation: cp-title-in 0.2s cubic-bezier(0.23,1,0.32,1) both; }
    .cp-title.exit {
      position: absolute; inset: 0;
      animation: cp-title-out 0.15s ease both;
    }
    @keyframes cp-title-in  { from { opacity: 0; transform: translateY(8px);  } to { opacity: 1; transform: none; } }
    @keyframes cp-title-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }

    /* Scroll body — masked at both edges so text never hard-cuts */
    .cp-flow,
    .cp-rail-summary {
      flex: 0 0 auto;
    }
    .cp-flow.sliding {
      will-change: transform;
    }
    .cp-body {
      flex: 1; min-height: 0; overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      scrollbar-width: none;
      padding: 18px 14px 20px;
      display: flex; flex-direction: column;
    }
    .cp-body.hidden { display: none; }
    /* Finished sequence: pin the rail to the top, no leftover floor spacer */
    .cp-body.settled {
      padding-top: 24px;
      justify-content: flex-start;
    }
    .cp-body.settled .cp-spacer {
      display: none;
    }
    .cp-body::-webkit-scrollbar { display: none; }
    /* One spacer above the stack pins it to the floor of the well.
       After Brief settles it is frozen so later collapses lift content up. */
    .cp-spacer {
      flex: 1 1 0; min-height: 0;
    }
    .cp-spacer.released {
      flex: none;
    }

    /* ── Stage A: reference scan strip ──
       Fade only — images leave flow so height can close without cropping. */
    .cp-scan-slot {
      --cp-scan-exit: 560ms;
      --cp-scan-exit-ease: cubic-bezier(0.33, 0, 0.2, 1);
      position: relative;
      margin-top: 10px;
      overflow: visible;
      transition: height var(--cp-scan-exit) var(--cp-scan-exit-ease),
                  margin-top var(--cp-scan-exit) var(--cp-scan-exit-ease);
    }
    .cp-scan-slot.collapse {
      height: 0 !important;
      margin-top: 0;
    }
    .cp-scan {
      --cp-glare-dur: 2s;
      position: relative;
      display: flex; gap: 5px;
      overflow: visible;
      opacity: 1;
      transition: opacity var(--cp-scan-exit) var(--cp-scan-exit-ease);
    }
    .cp-scan-slot.collapse .cp-scan {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      opacity: 0;
      pointer-events: none;
    }
    .cp-scan-tile {
      position: relative; flex: 1 1 0; min-width: 0; height: 66px;
      border-radius: 8px; overflow: hidden; background: #F4F2F1;
      outline: 1px solid rgba(0,0,0,0.05); outline-offset: -1px;
      opacity: 0; transform: translateY(6px);
      transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
                  transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .cp-scan-tile.show { opacity: 0.6; transform: translateY(0); }
    .cp-scan-tile.out {
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
    }
    .cp-scan-tile.scanned { opacity: 0.4; }
    .cp-scan-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* Brief alone reads at full opacity; refs stay at 60% until scanned */
    .cp-scan.phase-brief .cp-scan-doc {
      flex: 0 0 72px;
    }
    .cp-scan.phase-brief .cp-scan-doc.show { opacity: 1; }
    /* Soft white light glare — one pass left→right, synced with text shine */
    .cp-scan.scanning::after {
      content: ''; position: absolute; top: 0; bottom: 0; left: 0;
      width: 42%; z-index: 2; pointer-events: none;
      background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 35%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.08) 65%,
        transparent 100%);
      animation: cp-glare var(--cp-glare-dur) cubic-bezier(0.23, 1, 0.32, 1) both;
    }
    @keyframes cp-glare {
      from { transform: translateX(-120%); }
      to   { transform: translateX(280%); }
    }
    .cp-scan-doc {
      display: flex; flex-direction: column; justify-content: flex-end;
      gap: 4px; padding: 8px;
      background: #FAFAFA;
      outline-color: rgba(0,0,0,0.06);
    }
    .cp-scan-doc-icon {
      position: absolute; top: 6px; right: 6px;
      width: 14px; height: 14px;
      color: rgba(0,0,0,0.28);
      pointer-events: none;
    }
    .cp-scan-doc-line { height: 2px; border-radius: 2px; background: rgba(0,0,0,0.08); }
    .cp-scan-doc-label {
      font-size: 9px; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase; color: rgba(0,0,0,0.32); margin-top: 2px;
    }

    /* ── Beats ──
       No node or connector: the shimmer carries the working state, and every
       beat shares the body's left edge so nothing shifts as steps advance. */
    .cp-beat {
      --cp-beat-gap: 10px;
      --cp-beat-gap-folded: 10px;
      position: relative;
      padding-bottom: var(--cp-beat-gap);
      opacity: 0; transform: translateY(6px);
      transition: opacity 400ms cubic-bezier(0.23,1,0.32,1),
                  transform 400ms cubic-bezier(0.23,1,0.32,1);
    }
    .cp-beat.show { opacity: 1; transform: translateY(0); }
    .cp-beat-content {
      margin-top: 14px;
    }
    .cp-beat.folded > .cp-beat-content {
      margin-top: 0;
    }
    /* Collapsed scan slot must not leave the 14px content inset */
    .cp-beat-content:has(.cp-scan-slot.collapse) {
      margin-top: 0;
    }
    /* Thinking line — text swap + shimmer, replacing the typewriter.
       A line never types or erases: it lifts in, the light band travels the
       glyphs once, and the next line displaces it. Defaults measured from the
       reference status line. */
    .cp-beat-text {
      --cp-swap-offset: 8px;
      --cp-swap-enter: 480ms;
      --cp-swap-exit: 280ms;
      --cp-swap-width: 400ms;
      --cp-shine-dur: 3.4s;     /* full loop including the quiet gap */
      --cp-glare-dur: 2s;       /* matched to image-row glare / shine-sync */
      --cp-swap-ease: cubic-bezier(0.05, 0.9, 0.1, 1); /* softer ease-out settle */
      --cp-ink: #8E8E8E;        /* consistent status gray — no darker ink */
      --cp-ink-dim: #A8A8A8;    /* soft shine band only, same gray family */
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 13px; line-height: 1.5; min-height: 19px;
    }
    .cp-beat-chevron {
      flex-shrink: 0;
      width: 14px;
      height: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
      border-radius: 4px;
      background: transparent;
      color: #8E8E8E;
      cursor: pointer;
      transition: color 0.15s ease;
    }
    .cp-beat-chevron:hover { color: rgba(0,0,0,0.55); }
    .cp-beat-chevron:active { transform: scale(0.96); }
    .cp-beat-chevron svg {
      display: block;
      transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1);
      transform: rotate(0deg); /* right — folded / collapsed */
    }
    .cp-beat:not(.folded) > .cp-beat-text .cp-beat-chevron svg {
      transform: rotate(90deg); /* down — expanded */
    }
    .cp-beat.folded { padding-bottom: var(--cp-beat-gap-folded); }
    .cp-beat.folded > .cp-beat-content {
      display: none;
    }
    /* Width is set in px from a measured string, since `auto` can't animate */
    .cp-line-swap {
      position: relative; display: inline-block; vertical-align: top;
      height: 1.5em; max-width: 100%;
      overflow: hidden;
      transition: width var(--cp-swap-width) var(--cp-swap-ease);
      will-change: width;
    }
    .cp-swap-line {
      position: absolute; inset: 0;
      white-space: nowrap; line-height: 1.5em;
      background-image: linear-gradient(100deg,
        var(--cp-ink)     0%,
        var(--cp-ink)     34%,
        var(--cp-ink-dim) 50%,
        var(--cp-ink)     66%,
        var(--cp-ink)     100%);
      background-size: 280% 100%;
      background-position: 120% 0;
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
    }
    .cp-swap-line.shine { animation: cp-shine var(--cp-shine-dur) linear infinite; }
    /* One-shot shine locked to the image-row glare duration */
    .cp-swap-line.shine-sync {
      animation: cp-shine-sync var(--cp-glare-dur, 2s) linear both;
    }
    @keyframes cp-shine {
      0%   { background-position: 120% 0; }
      45%  { background-position: -60% 0; }
      100% { background-position: -60% 0; }   /* pause before the next pass */
    }
    @keyframes cp-shine-sync {
      from { background-position: 120% 0; }
      to   { background-position: -60% 0; }
    }
    .cp-swap-line.enter { animation: cp-line-in  var(--cp-swap-enter) var(--cp-swap-ease) both; }
    .cp-swap-line.exit  {
      animation: cp-line-out var(--cp-swap-exit) var(--cp-swap-ease) both;
      pointer-events: none;
    }
    @keyframes cp-line-in {
      from { opacity: 0; transform: translateY(var(--cp-swap-offset)); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes cp-line-out {
      from { opacity: 1; transform: none; }
      to   { opacity: 0; transform: translateY(calc(var(--cp-swap-offset) * -0.9)); }
    }
    /* A settled line keeps the same gray — never darkens */
    .cp-swap-line.done {
      background-image: none;
      color: #8E8E8E;
    }

    /* Settled labels stay visible; supporting content folds under per-step chevrons. */

    .cp-rail-summary {
      position: relative; display: flex; align-items: center; gap: 7px;
      margin-bottom: 13px;
      font-size: 12.5px; color: rgba(0,0,0,0.4);
      opacity: 0; transform: translateY(4px);
      transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.23,1,0.32,1);
    }
    .cp-rail-summary.show { opacity: 1; transform: translateY(0); }
    .cp-rail-summary.resolved { color: var(--cp-green); }

    /* Narrative */
    .cp-narrative {
      font-size: 13.5px; line-height: 1.6; color: rgba(0,0,0,0.72);
      margin-top: 2px; text-wrap: pretty;
      opacity: 0; transform: translateY(4px);
      transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.23,1,0.32,1);
    }
    .cp-narrative.show { opacity: 1; transform: translateY(0); }
    .cp-narrative + .cp-narrative { margin-top: 8px; }
    .cp-narrative p { margin: 0; }
    .cp-narrative p + p { margin-top: 8px; }
    .cp-narrative strong { font-weight: 600; color: rgba(0,0,0,0.88); }

    /* ── Stage B: stacked source cards (Figma 1853:2044 / 1853:2066) ── */
    .cp-evidence {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      margin-top: 8px;
    }
    .cp-src-card {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 20px;
      padding: 16px 12px 12px;
      background: #FAFAFA;
      border: 0.5px solid rgba(0,0,0,0.05);
      border-radius: 14px;
      overflow: hidden;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.23,1,0.32,1);
    }
    .cp-src-card.show { opacity: 1; transform: translateY(0); }
    /* Loading skeleton — same geometry as the blue brief card */
    .cp-src-skel-icon {
      width: 27px;
      height: 27px;
      border-radius: 6px;
      background: linear-gradient(90deg, #E6E4E2 25%, #EFEDEC 50%, #E6E4E2 75%);
      background-size: 1200px 100%;
      animation: shimmer 1.6s ease-in-out infinite;
    }
    .cp-src-skel-foot {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
    }
    .cp-src-skel-avatar {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      flex-shrink: 0;
      background: linear-gradient(90deg, #E6E4E2 25%, #EFEDEC 50%, #E6E4E2 75%);
      background-size: 1200px 100%;
      animation: shimmer 1.6s ease-in-out infinite;
    }
    .cp-src-card.cp-src-skel .cp-src-quote {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .cp-src-wash {
      position: absolute;
      left: -1px; top: -1px; right: -1px;
      height: 80px;
      pointer-events: none;
      z-index: 0;
    }
    /* Coral wash — image fill + FAFAFA fade bottom→top across the wash frame */
    .cp-src-card.coral .cp-src-wash {
      background-image: url('Asstes/Conflict/wash-coral.png');
      background-size: 100% 100%;
      background-position: center top;
      background-repeat: no-repeat;
    }
    .cp-src-card.coral .cp-src-wash::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        #FAFAFA 0%,
        rgba(250, 250, 250, 0) 100%
      );
      pointer-events: none;
    }
    /* Blue wash — none while loading; fades in with content on reveal */
    .cp-src-card.blue.cp-src-skel .cp-src-wash {
      background: none;
      opacity: 0;
    }
    .cp-src-card.blue .cp-src-wash {
      background: linear-gradient(180deg,
        #4FA7FF 0%,
        rgba(165, 209, 253, 0.7) 50%,
        rgba(250, 250, 250, 0) 100%);
      opacity: 0;
      transition: opacity 0.65s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .cp-src-card.blue.show .cp-src-wash {
      opacity: 1;
    }
    /* Icon sits top-left over the wash (Figma 40px → ~36px in panel) */
    .cp-src-hero {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: auto;
      flex-shrink: 0;
    }
    .cp-src-hero-icon {
      width: 27px;
      height: 27px;
      display: block;
      object-fit: contain;
    }
    .cp-src-body {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
    }
    .cp-src-copy {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .cp-src-title {
      margin: 0;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.25;
      color: #000;
      letter-spacing: -0.2px;
    }
    .cp-src-sub {
      margin: 0;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.35;
      color: #000;
      opacity: 0.6;
    }
    .cp-src-thumbs {
      display: flex;
      gap: 6px;
      padding: 0 2px;
      width: 100%;
    }
    .cp-src-thumb {
      flex: 1 1 0;
      min-width: 0;
      aspect-ratio: 1;
      max-height: 104px;
      padding: 0;
      border: none;
      border-radius: 7px;
      overflow: hidden;
      background: #F4F2F1;
      cursor: pointer;
      transition: transform 0.15s ease;
    }
    .cp-src-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .cp-src-quotes {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }
    .cp-src-quote {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      padding: 14px 12px 8px;
      background: #F2F2F2;
      border-radius: 8px;
    }
    .cp-src-quote-text {
      margin: 0;
      font-size: 14px;
      font-style: italic;
      font-weight: 400;
      line-height: 1.4;
      color: #000;
      opacity: 0.8;
      text-wrap: pretty;
    }
    .cp-src-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-left: 2px;
      width: 100%;
      margin-top: auto;
    }
    .cp-src-card.blue .cp-src-quote .cp-src-foot {
      margin-top: 0;
    }
    .cp-src-person {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }
    .cp-src-avatar {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }
    .cp-src-avatar.lg {
      width: 26px;
      height: 26px;
    }
    .cp-src-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .cp-src-name {
      font-size: 13px;
      font-weight: 400;
      color: #000;
      opacity: 0.56;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cp-src-link {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      padding: 0;
      border: none;
      border-radius: 6px;
      background: rgba(0,0,0,0.05);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      cursor: pointer;
      transition: background-color 0.15s ease, transform 0.12s ease;
    }
    .cp-src-link:hover { background: rgba(0,0,0,0.08); }
    .cp-src-link:active { transform: scale(0.96); }
    .cp-src-link-icon {
      width: 14px;
      height: 14px;
      display: block;
    }
    @media (hover: hover) and (pointer: fine) {
      .cp-src-thumb:hover { transform: scale(1.03); }
    }

    /* ── Stage C: skeletons share the real card's geometry ── */
    @keyframes shimmer {
      0%   { background-position: -600px 0; }
      100% { background-position:  600px 0; }
    }
    .skel-line {
      border-radius: 4px; height: 9px;
      background: linear-gradient(90deg, #E6E4E2 25%, #EFEDEC 50%, #E6E4E2 75%);
      background-size: 1200px 100%;
      animation: shimmer 1.6s ease-in-out infinite;
    }
    .skel-title       { height: 11px; width: 64%; }
    .skel-desc.short  { width: 72%; }
    .skel-consequence { width: 52%; height: 8px; margin-top: 4px; opacity: 0.65; }
    .skel-check {
      width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
      border: 1.5px solid rgba(0,0,0,0.1); box-sizing: border-box;
    }

    /* ── Stage C: side-by-side direction cards (Figma 1852:1985 / 1986) ── */
    .cp-paths {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 8px;
      margin-top: 10px;
    }
    .cp-path-skel {
      flex: 1 1 0;
      min-width: 0;
      background: #FAFAFA;
      border: 0.5px solid rgba(0,0,0,0.05);
      border-radius: 12px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .cp-path-skel.show { opacity: 1; }
    .cp-path-skel-media {
      height: 72px;
      border-radius: 6px;
      background: linear-gradient(90deg, #E6E4E2 25%, #EFEDEC 50%, #E6E4E2 75%);
      background-size: 1200px 100%;
      animation: shimmer 1.6s ease-in-out infinite;
    }
    .cp-path-skel-col {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .cp-path {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 8px;
      background: #FAFAFA;
      border: none;
      border-radius: 12px;
      text-align: left;
      color: inherit;
      cursor: pointer;
      overflow: hidden;
      opacity: 0;
      transform: translateY(10px) scale(0.98);
      transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .cp-path.show { opacity: 1; transform: translateY(0) scale(1); }
    .cp-path:active { transform: scale(0.97); }
    @media (hover: hover) and (pointer: fine) {
      .cp-paths:has(.cp-path.show:hover) .cp-path.show {
        transition: opacity 180ms ease, transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
      }
      .cp-paths:has(.cp-path.show:hover) .cp-path.show:not(:hover) {
        opacity: 0.8;
      }
    }
    /* Selected path: no outline — prefer closes the panel instead */
    .cp-path-media {
      position: relative;
      width: 100%;
      height: 88px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      background: #F2F2F2;
    }
    .cp-path-media.split {
      display: flex;
    }
    .cp-path-media.split img {
      width: 50%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .cp-path-media.photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .cp-path-copy {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 2px 2px 0;
      min-width: 0;
      flex: 0 0 auto;
    }
    .cp-path-label {
      font-size: 10px; /* 2px smaller than .cp-path-desc */
      font-weight: 400;
      line-height: 1.3;
      color: #8E8E8E;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .cp-path-title {
      font-size: 14px;
      font-weight: 600;
      color: #000;
      line-height: 1.3;
      letter-spacing: -0.15px;
    }
    .cp-path-desc {
      font-size: 12px;
      font-weight: 400;
      line-height: 1.4;
      color: #000;
      opacity: 0.6;
      text-wrap: pretty;
    }
    /* Figma 1852:1962 — black pill CTA on each direction */
    .cp-path-prefer {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: 30px; /* +10px card gap = 40px below the description */
      padding: 8px 10px;
      border: none;
      border-radius: 999px;
      background: #000;
      color: #fff;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.35;
      white-space: nowrap;
      cursor: pointer;
      transition: opacity 0.15s ease, transform 0.12s ease;
    }
    .cp-path-prefer:hover { opacity: 0.85; }
    .cp-path-prefer:active { transform: scale(0.97); opacity: 0.85; }

    /* Rationale capture when the non-recommended path wins */
    .cp-why {
      flex: 1 1 100%;
      width: 100%;
      max-height: 0; opacity: 0; overflow: hidden;
      transition: max-height 0.3s cubic-bezier(0.23,1,0.32,1),
                  opacity 0.2s ease, margin-top 0.3s ease;
    }
    .cp-why.show { max-height: 96px; opacity: 1; margin-top: 4px; }
    .cp-why-label { font-size: 11px; color: rgba(0,0,0,0.4); margin-bottom: 5px; }
    .cp-why-input {
      width: 100%; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px;
      padding: 8px 10px; font-family: inherit; font-size: 12.5px; color: #000;
      background: #fff; resize: none;
      transition: border-color 0.15s ease;
    }
    .cp-why-input:focus { outline: none; border-color: rgba(0,0,0,0.3); }

    /* Dismissed state */
    .cp-dismissed {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 12px;
      padding: 20px 22px 26px; text-align: center;
      opacity: 0; transition: opacity 0.3s ease;
    }
    .cp-dismissed.show { opacity: 1; }
    .cp-dismissed-line { font-size: 12.5px; color: rgba(0,0,0,0.45); }
    .cp-dismissed-line .cp-dot-sep { margin: 0 6px; opacity: 0.4; }
    .cp-undo {
      background: none; border: none; padding: 0; font: inherit; cursor: pointer;
      color: rgba(0,0,0,0.7); text-decoration: underline; text-underline-offset: 2px;
    }
    .cp-dismiss-prompt { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(0,0,0,0.28); }
    .cp-dismiss-reasons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
    .cp-reason-chip {
      background: rgba(0,0,0,0.04); border: none; border-radius: 100px;
      padding: 7px 12px; font-family: inherit; font-size: 11px;
      color: rgba(0,0,0,0.55); cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    .cp-reason-chip:hover  { background: rgba(0,0,0,0.08); }
    .cp-reason-chip.picked { background: #000; color: #fff; }

    @media (prefers-reduced-motion: reduce) {
      .cp-flow {
        transition: none !important;
        transform: none !important;
      }
      .cp-beat, .cp-src-card, .cp-path, .cp-scan-tile {
        transition: opacity 0.2s ease !important;
        transform: none !important;
      }
      .cp-scan-slot {
        transition: height 0.2s ease, margin-top 0.2s ease !important;
      }
      .cp-scan-slot.collapse .cp-scan {
        transform: none;
      }
      .skel-line, .cp-scan.scanning::after,
      .cp-swap-line.shine, .cp-swap-line.shine-sync,
      .canvas-frame.cp-board-shine .canvas-slot { animation: none; }
      .cp-swap-line.enter, .cp-swap-line.exit { animation-duration: 1ms; }
      .cp-page-toast {
        transition: opacity 200ms ease !important;
        transform: translateX(-50%) !important;
      }
      .cp-page-toast.show {
        transform: translateX(-50%) !important;
      }
    }

    /* Theme board hover tooltip */
    #theme-tip img#tip-check { transition: transform 0.1s ease, opacity 0.1s ease; }
    #theme-tip img#tip-check:hover { transform: scale(1.15); opacity: 0.75; }

    /* Todo connector — child of .theme-section, scales with board */
    .theme-todo-connector {
      position: absolute;
      left: 0;
      top: 100%;
      width: 460px; /* match .canvas-frame */
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
    }
    .theme-todo-line {
      width: 1.5px;
      height: 0;
      background: rgba(0,0,0,0.22);
      transition: height 0.4s cubic-bezier(0.23,1,0.32,1);
      flex-shrink: 0;
    }
    .theme-todo-line.grow { height: 36px; }
    .theme-todo-card {
      width: 100%;
      background: rgba(245,243,241,0.96);
      border: 0.5px solid rgba(0,0,0,0.12);
      border-radius: 11px;
      padding: 16px 26px 24px;
      box-sizing: border-box;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .theme-todo-card.show { opacity: 1; transform: translateY(0); }
    .theme-todo-badge {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      opacity: 0.5;
      margin-bottom: 8px;
      color: #000;
      line-height: normal;
    }
    .theme-todo-title {
      font-size: 14px;
      font-weight: 500;
      color: #000;
      margin-bottom: 6px;
      line-height: normal;
      letter-spacing: -0.2px;
    }
    .theme-todo-desc {
      font-size: 13px;
      font-weight: 400;
      opacity: 0.55;
      color: #000;
      line-height: normal;
    }

    /* Inline check icon in theme board num */
    .theme-board-num {
      display: flex;
      align-items: center;
    }
    .num-check {
      display: inline-block;
      flex-shrink: 0;
    }