/* ===== Nori site animations (shared across index.html and role pages) ===== */
    /* ===== Slack Mock (shared) ===== */
    .slack-mock {
      max-width: 560px;
      margin: 0 auto;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      text-align: left;
      background: var(--surface);
    }
    .slack-mock-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--surface-raised);
      flex-shrink: 0;
    }
    .slack-mock-hash {
      font-size: 16px;
      color: var(--text-muted);
      font-weight: 700;
    }
    .slack-mock-channel {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slack-mock-body {
      padding: 14px 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }
    .slack-msg {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .slack-avatar {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
    }
    .slack-avatar-nori { background: #42be65; }
    .slack-msg-content { flex: 1; min-width: 0; }
    .slack-msg-header {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 3px;
    }
    .slack-msg-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
    }
    .slack-msg-time {
      font-size: 11px;
      color: var(--text-muted);
    }
    .slack-msg-app {
      font-size: 10px;
      color: var(--text-muted);
      background: var(--surface);
      padding: 1px 5px;
      border-radius: 3px;
    }
    .slack-msg-text {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.55;
    }
    .slack-msg-text code {
      font-size: 12px;
      padding: 1px 5px;
    }
    .mention {
      color: #42be65;
      background: rgba(66, 190, 101, 0.15);
      padding: 1px 5px;
      border-radius: 4px;
      font-weight: 500;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
    .slack-progress {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--text-muted);
      background: var(--surface);
      border-radius: 6px;
      padding: 10px 12px;
      margin-top: 8px;
      line-height: 1.7;
    }
    .slack-progress .done { color: #42be65; }
    .slack-pr-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      padding: 6px 12px;
      background: rgba(120, 169, 255, 0.1);
      border: 1px solid rgba(120, 169, 255, 0.25);
      border-radius: 6px;
      font-size: 13px;
      color: #78a9ff;
      text-decoration: none;
      font-weight: 500;
    }
    .slack-file-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      padding: 6px 12px;
      background: rgba(66, 190, 101, 0.1);
      border: 1px solid rgba(66, 190, 101, 0.25);
      border-radius: 6px;
      font-size: 13px;
      color: #42be65;
      text-decoration: none;
      font-weight: 500;
    }
    .slack-action-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      padding: 6px 12px;
      background: rgba(66, 190, 101, 0.1);
      border: 1px solid rgba(66, 190, 101, 0.25);
      border-radius: 6px;
      font-size: 13px;
      color: #42be65;
      text-decoration: none;
      font-weight: 500;
    }
    .slack-control-card {
      margin-top: 8px;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
    }
    .slack-control-status {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      background: var(--surface);
      font-size: 12px;
      color: var(--text-secondary);
    }
    .slack-control-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #42be65;
    }
    .slack-control-buttons {
      display: flex;
      border-top: 1px solid var(--border);
    }
    .slack-control-btn {
      flex: 1;
      padding: 8px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      text-align: center;
      background: transparent;
    }
    .slack-control-btn + .slack-control-btn {
      border-left: 1px solid var(--border);
    }

    /* ===== Hero Chat Animation ===== */
    .hero-animation-container {
      max-width: 560px;
      margin: 0 auto;
      border-radius: 10px;
    }
    #hero-chat-animation {
      transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    #hero-chat-body {
      max-height: 240px;
      overflow: hidden;
      transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #hero-chat-body.fade-out,
    #team-chat-body.fade-out,
    #security-chat-body.fade-out,
    #dev-chat-body.fade-out,
    .slack-mock-body.fade-out {
      opacity: 0;
    }
    .hero-chat-msg {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      opacity: 0;
      transform: translateY(8px);
      transition:
        opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
      flex-shrink: 0;
      margin-bottom: 0;
      will-change: opacity, transform;
    }
    .hero-chat-msg.enter {
      opacity: 1;
      transform: translateY(0);
      will-change: auto;
    }
    .hero-chat-avatar {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      flex-shrink: 0;
      overflow: hidden;
    }
    .hero-chat-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero-chat-avatar svg { display: block; }
    .hero-chat-avatar-fallback {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
    }
    .hero-chat-cursor {
      display: inline-block;
      width: 2px;
      height: 1em;
      background: var(--text-secondary);
      vertical-align: text-bottom;
      animation: hero-cursor-blink 1s step-end infinite;
      margin-left: 1px;
      opacity: 0.85;
    }
    @keyframes hero-cursor-blink {
      0%, 100% { opacity: 0.85; }
      50% { opacity: 0; }
    }
    .hero-chat-spinner {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 20px;
      animation: hero-spinner-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes hero-spinner-in {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .hero-spinner-dots {
      display: flex;
      gap: 5px;
      align-items: center;
      height: 8px;
    }
    .hero-spinner-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent);
      animation: hero-dot-pulse 1.2s ease-in-out infinite both;
    }
    .hero-spinner-dot:nth-child(1) { animation-delay: 0s; }
    .hero-spinner-dot:nth-child(2) { animation-delay: 0.15s; }
    .hero-spinner-dot:nth-child(3) { animation-delay: 0.3s; }
    @keyframes hero-dot-pulse {
      0%, 100% { transform: translateY(0); opacity: 0.35; }
      50% { transform: translateY(-2px); opacity: 1; }
    }
    .hero-spinner-status {
      font-size: 12px;
      color: var(--text-muted);
      font-style: italic;
      letter-spacing: 0.01em;
    }
    .hero-chat-plan {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--text-muted);
      background: var(--surface-raised);
      border-radius: 6px;
      padding: 10px 12px;
      margin-top: 8px;
      line-height: 1.7;
      max-height: 120px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
      mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    }
    .hero-int-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 1px 6px 1px 4px;
      margin: 0 1px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: var(--surface-raised);
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      line-height: 1.4;
      white-space: nowrap;
      vertical-align: middle;
      transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
    }
    .hero-int-pill-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 13px;
      height: 13px;
      flex-shrink: 0;
      color: var(--text-muted);
    }
    .hero-int-pill-icon svg { width: 13px; height: 13px; display: block; }
    .hero-int-pill-mono {
      border-radius: 3px;
      color: #fff;
      font-size: 8px;
      font-weight: 700;
      line-height: 1;
    }
    .hero-int-pill--lit {
      border-color: var(--accent);
      background: rgba(66, 190, 101, 0.12);
      color: var(--text);
    }
    .hero-int-pill--lit .hero-int-pill-icon { color: var(--accent); }
    .hero-spinner-status .hero-int-pill { font-style: normal; }
    .hero-task-result {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 2px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.5;
    }
    .hero-task-check {
      color: var(--accent);
      font-weight: 700;
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-chat-msg,
      .team-chat-msg {
        opacity: 1;
        transform: none;
        transition: none !important;
        animation: none !important;
        will-change: auto;
      }
      .hero-chat-msg.enter,
      .team-chat-msg.enter {
        opacity: 1;
        transform: none;
      }
      .hero-int-pill {
        transition: none !important;
      }
      .hero-chat-spinner,
      .hero-spinner-dot,
      .slack-perm,
      .slack-perm-snap {
        animation: none !important;
      }
      .hero-spinner-dot {
        opacity: 1;
        transform: none;
      }
      .hero-chat-cursor {
        animation: none !important;
        opacity: 1;
      }
      .slack-perm {
        opacity: 1;
        transform: none;
      }
      .slack-mock-channel {
        transition: none !important;
      }
      #hero-chat-body,
      #team-chat-body,
      #security-chat-body,
      #dev-chat-body,
      .slack-mock-body {
        transition: none !important;
      }
      #hero-chat-animation {
        transition: none !important;
        transform: none !important;
      }
    }

    /* ===== Team Chat Animation ===== */
    .team-animation-container {
      max-width: 560px;
      height: 360px;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 10px;
    }
    #team-chat-body {
      max-height: 320px;
      overflow: hidden;
      transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .team-chat-msg {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      opacity: 0;
      transform: translateY(8px);
      transition:
        opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
      flex-shrink: 0;
      margin-bottom: 0;
      will-change: opacity, transform;
    }
    .team-chat-msg.enter {
      opacity: 1;
      transform: translateY(0);
      will-change: auto;
    }

    /* ===== Security Animation ===== */
    #security-chat-body {
      min-height: 0;
      max-height: 320px;
      overflow: hidden;
      transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slack-perm {
      margin-top: 8px;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      font-size: 13px;
      font-weight: 500;
      background: var(--surface-raised);
      animation: slack-perm-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes slack-perm-in {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .slack-perm-snap {
      animation: slack-perm-snap-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes slack-perm-snap-in {
      from { opacity: 0; transform: translateY(3px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .slack-perm-row {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 12px;
      line-height: 1.4;
      color: var(--text-secondary);
    }
    .slack-perm-row + .slack-perm-row {
      border-top: 1px solid var(--border);
    }
    .slack-perm-deny { background: rgba(250, 68, 83, 0.08); }
    .slack-perm-allow { background: rgba(66, 190, 101, 0.08); }
    .slack-perm-icon {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
    }
    .slack-perm-deny .slack-perm-icon { background: rgba(250, 68, 83, 0.2); color: #fa4453; }
    .slack-perm-allow .slack-perm-icon { background: rgba(66, 190, 101, 0.2); color: #42be65; }
    .slack-perm-deny .slack-perm-text {
      text-decoration: line-through;
      text-decoration-color: rgba(250, 68, 83, 0.55);
      color: #c43b47;
    }
    .slack-perm-allow .slack-perm-text { color: #2f9e54; }
    /* Hard stop (e.g. conversation interrupt): decisive, no strikethrough */
    .slack-perm-stop {
      background: rgba(250, 68, 83, 0.12);
    }
    .slack-perm-stop .slack-perm-text {
      text-decoration: none;
      font-weight: 600;
      color: #fa4453;
    }

    /* ===== Developer Animation ===== */
    #dev-chat-body {
      max-height: 360px;
      overflow: hidden;
      transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ===== Concept visuals (role capability rows) ===== */
    .concept-viz {
      position: relative;
      height: 300px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .concept-viz-label {
      position: absolute;
      top: 12px;
      left: 14px;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    /* Scopes: Reed allowed, Sandy denied — clear allow/deny beat */
    .viz-scopes {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: min(88%, 300px);
      margin-top: 18px;
    }
    .viz-scope-resource {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 8px;
      padding: 6px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface-raised);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--text-secondary);
      animation: viz-scope-resource 4.8s ease-in-out infinite;
    }
    .viz-scope-resource-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      animation: viz-scope-dot 4.8s ease-in-out infinite;
    }
    .viz-scope-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-raised);
      opacity: 0.32;
      transform: translateY(8px) scale(0.98);
    }
    .viz-scope-row.is-allowed {
      animation: viz-scope-allow 4.8s ease-in-out infinite;
    }
    .viz-scope-row.is-denied {
      animation: viz-scope-deny 4.8s ease-in-out infinite;
    }
    .viz-scope-avatar {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }
    .viz-scope-avatar.a { background: #ee5396; }
    .viz-scope-avatar.b { background: #08bdba; }
    .viz-scope-avatar.c { background: #4589ff; }
    .viz-scope-meta { flex: 1; min-width: 0; }
    .viz-scope-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.2;
    }
    .viz-scope-team {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .viz-scope-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 4px 9px;
      border-radius: 999px;
      flex-shrink: 0;
      opacity: 0;
      transform: scale(0.85);
    }
    .viz-scope-status.ok {
      color: #42be65;
      background: rgba(66, 190, 101, 0.14);
      animation: viz-scope-badge-ok 4.8s ease-in-out infinite;
    }
    .viz-scope-status.no {
      color: #fa4453;
      background: rgba(250, 68, 83, 0.12);
      animation: viz-scope-badge-no 4.8s ease-in-out infinite;
    }
    .viz-scope-mark {
      font-size: 12px;
      line-height: 1;
    }
    @keyframes viz-scope-resource {
      0%, 8% { opacity: 0.45; }
      16%, 88% { opacity: 1; }
      96%, 100% { opacity: 0.45; }
    }
    @keyframes viz-scope-dot {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.15); }
    }
    @keyframes viz-scope-allow {
      0%, 10% {
        opacity: 0.32;
        transform: translateY(8px) scale(0.98);
        border-color: var(--border);
        background: var(--surface-raised);
      }
      18%, 82% {
        opacity: 1;
        transform: translateY(0) scale(1);
        border-color: rgba(66, 190, 101, 0.5);
        background: rgba(66, 190, 101, 0.08);
      }
      92%, 100% {
        opacity: 0.32;
        transform: translateY(8px) scale(0.98);
        border-color: var(--border);
        background: var(--surface-raised);
      }
    }
    @keyframes viz-scope-deny {
      0%, 34% {
        opacity: 0.32;
        transform: translateY(8px) scale(0.98);
        border-color: var(--border);
        background: var(--surface-raised);
      }
      42% {
        opacity: 1;
        transform: translateX(-4px) scale(1);
        border-color: rgba(250, 68, 83, 0.45);
        background: rgba(250, 68, 83, 0.07);
      }
      48% { transform: translateX(4px) scale(1); }
      54%, 82% {
        opacity: 1;
        transform: translateX(0) scale(1);
        border-color: rgba(250, 68, 83, 0.45);
        background: rgba(250, 68, 83, 0.07);
      }
      92%, 100% {
        opacity: 0.32;
        transform: translateY(8px) scale(0.98);
        border-color: var(--border);
        background: var(--surface-raised);
      }
    }
    @keyframes viz-scope-badge-ok {
      0%, 16% { opacity: 0; transform: scale(0.85); }
      24%, 82% { opacity: 1; transform: scale(1); }
      92%, 100% { opacity: 0; transform: scale(0.85); }
    }
    @keyframes viz-scope-badge-no {
      0%, 40% { opacity: 0; transform: scale(0.85); }
      50%, 82% { opacity: 1; transform: scale(1); }
      92%, 100% { opacity: 0; transform: scale(0.85); }
    }

    /* Tokens: angry robot trapped in sandbox, keys outside */
    .viz-tokens {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .viz-sandbox {
      position: absolute;
      left: 22px;
      top: 50%;
      width: 148px;
      height: 148px;
      margin-top: -74px;
      border: 3px solid var(--accent);
      border-radius: 14px;
      background: rgba(66, 190, 101, 0.06);
      overflow: hidden;
      animation: viz-sandbox-pulse 2s ease-in-out infinite;
    }
    .viz-sandbox-tag {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      text-align: center;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      z-index: 2;
    }
    .viz-robot {
      position: absolute;
      left: 50%;
      top: 42%;
      width: 56px;
      height: 56px;
      margin: -28px 0 0 -28px;
      animation: viz-robot-rage 1.6s ease-in-out infinite;
      z-index: 1;
    }
    .viz-robot-head {
      width: 44px;
      height: 36px;
      margin: 0 auto;
      background: var(--text);
      border-radius: 10px 10px 8px 8px;
      position: relative;
    }
    .viz-robot-eye {
      position: absolute;
      top: 12px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #fa4453;
      animation: viz-robot-blink 1.6s ease-in-out infinite;
    }
    .viz-robot-eye.l { left: 9px; }
    .viz-robot-eye.r { right: 9px; }
    .viz-robot-brow {
      position: absolute;
      top: 7px;
      width: 12px;
      height: 3px;
      background: #fa4453;
      border-radius: 2px;
    }
    .viz-robot-brow.l { left: 7px; transform: rotate(18deg); }
    .viz-robot-brow.r { right: 7px; transform: rotate(-18deg); }
    .viz-robot-mouth {
      position: absolute;
      left: 50%;
      bottom: 7px;
      width: 14px;
      height: 6px;
      margin-left: -7px;
      border-bottom: 3px solid #fa4453;
      border-radius: 0 0 8px 8px;
    }
    .viz-robot-body {
      width: 34px;
      height: 18px;
      margin: 4px auto 0;
      background: var(--text-secondary);
      border-radius: 6px;
      position: relative;
    }
    .viz-robot-arm {
      position: absolute;
      right: -10px;
      top: 5px;
      width: 18px;
      height: 6px;
      border-radius: 999px;
      background: var(--text-secondary);
      transform-origin: left center;
      animation: viz-robot-reach 1.6s ease-in-out infinite;
    }
    .viz-impact {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(250, 68, 83, 0.4);
      opacity: 0;
      pointer-events: none;
    }
    .viz-impact.t { top: 8px; left: 50%; margin-left: -6px; animation: viz-impact 1.6s ease-in-out infinite; }
    .viz-impact.r { right: 8px; top: 42%; margin-top: -6px; animation: viz-impact 1.6s 0.35s ease-in-out infinite; }
    .viz-impact.l { left: 8px; top: 50%; margin-top: -6px; animation: viz-impact 1.6s 0.7s ease-in-out infinite; }
    .viz-impact.b { bottom: 28px; left: 50%; margin-left: -6px; animation: viz-impact 1.6s 1.05s ease-in-out infinite; }
    .viz-tokens-barrier {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 2px;
      height: 120px;
      margin: -60px 0 0 -1px;
      background: repeating-linear-gradient(
        to bottom,
        var(--border) 0 6px,
        transparent 6px 12px
      );
      opacity: 0.7;
    }
    .viz-tokens-barrier::before,
    .viz-tokens-barrier::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 10px;
      height: 10px;
      margin-left: -5px;
      border: 2px solid var(--border);
      border-radius: 50%;
      background: var(--surface);
    }
    .viz-tokens-barrier::before { top: -6px; }
    .viz-tokens-barrier::after { bottom: -6px; }
    .viz-keys {
      position: absolute;
      right: 22px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      animation: viz-keys-float 2.4s ease-in-out infinite;
    }
    .viz-key {
      width: 38px;
      height: 16px;
      border: 2px solid #f1c21b;
      border-radius: 999px;
      position: relative;
      background: rgba(241, 194, 27, 0.12);
    }
    .viz-key::before {
      content: "";
      position: absolute;
      left: 4px;
      top: 50%;
      width: 6px;
      height: 6px;
      margin-top: -3px;
      border: 2px solid #f1c21b;
      border-radius: 50%;
    }
    .viz-key::after {
      content: "";
      position: absolute;
      right: 5px;
      top: 50%;
      width: 8px;
      height: 2px;
      margin-top: -1px;
      background: #f1c21b;
    }
        .viz-tokens .viz-key:nth-child(2) {
      animation: viz-key-wiggle 2.4s ease-in-out infinite;
      animation-delay: 0.2s;
    }
    .viz-keys-label {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
      color: #f1c21b;
      letter-spacing: 0.04em;
    }
    .viz-keys-note {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--text-muted);
      letter-spacing: 0.04em;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface-raised);
      animation: viz-keys-note 2.4s ease-in-out infinite;
    }
    @keyframes viz-sandbox-pulse {
      0%, 100% {
      }
      50% {
      }
    }
    @keyframes viz-robot-rage {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      12% { transform: translate(18px, -2px) rotate(8deg); }
      18% { transform: translate(22px, -2px) rotate(10deg); }
      28% { transform: translate(-8px, 4px) rotate(-8deg); }
      42% { transform: translate(-12px, -8px) rotate(-6deg); }
      56% { transform: translate(10px, 10px) rotate(7deg); }
      70% { transform: translate(-10px, 6px) rotate(-10deg); }
      84% { transform: translate(8px, -6px) rotate(6deg); }
    }
    @keyframes viz-robot-reach {
      0%, 100% { transform: rotate(0deg) scaleX(1); }
      12%, 18% { transform: rotate(-18deg) scaleX(1.35); }
      28% { transform: rotate(12deg) scaleX(0.9); }
      56% { transform: rotate(-8deg) scaleX(1.1); }
    }
    @keyframes viz-robot-blink {
      0%, 45%, 55%, 100% { transform: scaleY(1); }
      50% { transform: scaleY(0.15); }
    }
    @keyframes viz-impact {
      0%, 58%, 100% { opacity: 0; transform: scale(0.35); }
      66% { opacity: 1; transform: scale(1.35); }
      82% { opacity: 0; transform: scale(1.7); }
    }
    @keyframes viz-keys-float {
      0%, 100% { transform: translateY(-50%); }
      50% { transform: translateY(calc(-50% - 8px)); }
    }
    @keyframes viz-key-wiggle {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(-8deg); }
    }
    @keyframes viz-keys-note {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; border-color: rgba(241, 194, 27, 0.35); color: #f1c21b; }
    }

    /* Audit traces — real rows, no display:contents overlap */
    .viz-audit {
      width: min(92%, 320px);
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .viz-audit-live {
      display: inline-flex;
      align-items: center;
      align-self: flex-end;
      gap: 6px;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #42be65;
    }
    .viz-audit-live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #42be65;
      animation: viz-audit-pulse 1.4s ease-out infinite;
    }
    .viz-audit-table {
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      background: var(--surface-raised);
      font-family: var(--mono);
      font-size: 12px;
      line-height: 1.2;
    }
    .viz-audit-head,
    .viz-audit-row {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) 64px;
      align-items: center;
    }
    .viz-audit-head span,
    .viz-audit-row span {
      padding: 9px 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    .viz-audit-head {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }
    .viz-audit-head span {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .viz-audit-row {
      border-bottom: 1px solid var(--border);
      border-left: 3px solid transparent;
      transition:
        background 0.35s ease,
        border-color 0.35s ease,
        opacity 0.35s ease;
      opacity: 0.42;
    }
    .viz-audit-row:last-child {
      border-bottom: 0;
    }
    .viz-audit-row span {
      color: var(--text-secondary);
    }
    .viz-audit-row.is-live {
      opacity: 1;
      background: rgba(66, 190, 101, 0.1);
      border-left-color: #42be65;
    }
    .viz-audit-row.is-live span {
      color: var(--text);
    }
    .viz-audit-row.is-live span:first-child {
      color: #42be65;
      font-weight: 600;
    }
    @keyframes viz-audit-pulse {
      0% { opacity: 1; }
      70% { opacity: 0.45; }
      100% { opacity: 1; }
    }

    /* Policy / compliance interrupt */
    .viz-policy {
      width: min(90%, 300px);
      margin-top: 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: stretch;
      position: relative;
    }
    .viz-policy-req,
    .viz-policy-result {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      background: var(--surface-raised);
      font-size: 14px;
      line-height: 1.4;
    }
    .viz-policy-req {
      color: var(--text-secondary);
      position: relative;
      overflow: hidden;
      animation: viz-policy-in 4s ease-in-out infinite;
    }
    .viz-policy-req .mention {
      color: #42be65;
      font-weight: 600;
    }
    .viz-policy-scan {
      position: absolute;
      left: 16px;
      right: 16px;
      top: 36px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, #fa4453, transparent);
      opacity: 0;
      animation: viz-policy-scan 4s ease-in-out infinite;
      pointer-events: none;
      z-index: 2;
    }
    .viz-policy-result {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: #fa4453;
      border-color: rgba(250, 68, 83, 0.45);
      background: rgba(250, 68, 83, 0.08);
      animation: viz-policy-block 4s ease-in-out infinite;
      min-height: 64px;
    }
    .viz-policy-copy {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .viz-policy-result strong {
      display: block;
      font-size: 14px;
      font-weight: 700;
      color: #fa4453;
      letter-spacing: -0.01em;
    }
    .viz-policy-result em {
      display: block;
      font-style: normal;
      font-size: 12px;
      color: var(--text-muted);
    }
    .viz-policy-x {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(250, 68, 83, 0.2);
      color: #fa4453;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
      animation: viz-policy-x 4s ease-in-out infinite;
    }
    @keyframes viz-policy-in {
      0%, 8% {
        opacity: 0;
        transform: translateY(-10px);
        border-color: var(--border);
      }
      18%, 62% {
        opacity: 1;
        transform: translateY(0);
        border-color: var(--border);
      }
      70%, 100% {
        opacity: 0.45;
        transform: translateY(0);
        border-color: rgba(250, 68, 83, 0.35);
        background: rgba(250, 68, 83, 0.04);
      }
    }
    @keyframes viz-policy-scan {
      0%, 28% { opacity: 0; transform: scaleX(0.2); }
      34% { opacity: 1; transform: scaleX(1); }
      42% { opacity: 0; transform: scaleX(1); }
      100% { opacity: 0; transform: scaleX(0.2); }
    }
    @keyframes viz-policy-block {
      0%, 38% {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
      }
      48% {
        opacity: 1;
        transform: translateY(0) scale(1.02);
      }
      56%, 82% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      92%, 100% {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
      }
    }
    @keyframes viz-policy-x {
      0%, 38% { transform: scale(0.6) rotate(-20deg); }
      48% { transform: scale(1.15) rotate(0deg); }
      56%, 82% { transform: scale(1) rotate(0deg); }
      92%, 100% { transform: scale(0.6) rotate(-20deg); }
    }

    /* Blast radius hero visual */
    .viz-blast {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .viz-blast-ring {
      position: absolute;
      left: 50%;
      top: 52%;
      border: 1px dashed rgba(66, 190, 101, 0.45);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: viz-blast-pulse 2.8s ease-in-out infinite;
    }
    .viz-blast-ring.r1 { width: 90px; height: 90px; }
    .viz-blast-ring.r2 { width: 150px; height: 150px; opacity: 0.55; animation-delay: 0.2s; }
    .viz-blast-ring.r3 { width: 210px; height: 210px; opacity: 0.3; animation-delay: 0.4s; }
    .viz-blast-box {
      position: absolute;
      left: 50%;
      top: 52%;
      width: 72px;
      height: 72px;
      margin: -36px 0 0 -36px;
      border: 2px solid var(--accent);
      border-radius: 12px;
      background: rgba(66, 190, 101, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 4px;
      z-index: 2;
    }
    .viz-blast-agent {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: var(--accent);
      color: #04120a;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 12px;
    }
    .viz-blast-caption {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      color: var(--accent);
    }
    .viz-blast-out {
      position: absolute;
      font-family: var(--mono);
      font-size: 10px;
      color: var(--text-muted);
      opacity: 0.7;
    }
    .viz-blast-out.a { top: 22px; left: 18px; }
    .viz-blast-out.b { top: 28px; right: 18px; }
    .viz-blast-out.c { bottom: 24px; left: 24px; }
    .viz-blast-out.d { bottom: 28px; right: 22px; }
    @keyframes viz-blast-pulse {
      0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
      50% { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
    }

    /* Eng: PR ship */
    .viz-pr {
      width: min(88%, 280px);
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-raised);
      overflow: hidden;
    }
    .viz-pr-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }
    .viz-pr-badge {
      font-family: var(--mono);
      font-size: 10px;
      padding: 2px 7px;
      border-radius: 999px;
      background: rgba(66, 190, 101, 0.16);
      color: #42be65;
      animation: viz-pr-pop 2.8s ease-in-out infinite;
    }
    .viz-pr-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
    .viz-pr-line {
      height: 8px;
      border-radius: 4px;
      background: var(--border);
      width: 100%;
      opacity: 0.7;
    }
    .viz-pr-line.s { width: 62%; }
    .viz-pr-line.m { width: 84%; }
    .viz-pr-checks { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
    .viz-pr-check {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--text-secondary);
      opacity: 0.3;
      animation: viz-check-in 2.8s ease-in-out infinite;
    }
    .viz-pr-check:nth-child(1) { animation-delay: 0.2s; }
    .viz-pr-check:nth-child(2) { animation-delay: 0.55s; }
    .viz-pr-check:nth-child(3) { animation-delay: 0.9s; }
    .viz-pr-check i {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: rgba(66, 190, 101, 0.2);
      color: #42be65;
      font-style: normal;
      font-size: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
    }
    @keyframes viz-pr-pop {
      0%, 20% { opacity: 0.2; transform: scale(0.9); }
      35%, 100% { opacity: 1; transform: scale(1); }
    }
    @keyframes viz-check-in {
      0%, 15% { opacity: 0.2; }
      30%, 100% { opacity: 1; }
    }

    /* Eng: one governed environment */
    .viz-govern {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: min(88%, 280px);
    }
    .viz-govern-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 8px;
      text-align: center;
      background: var(--surface-raised);
      font-size: 11px;
      color: var(--text-muted);
      opacity: 0.35;
      animation: viz-govern-dim 3.6s ease-in-out infinite;
    }
    .viz-govern-card.main {
      grid-column: 1 / -1;
      opacity: 1;
      border-color: rgba(66, 190, 101, 0.45);
      background: rgba(66, 190, 101, 0.1);
      color: var(--text);
      font-weight: 600;
      animation: none;
    }
    .viz-govern-card.main span {
      display: block;
      font-family: var(--mono);
      font-size: 10px;
      color: var(--accent);
      margin-top: 4px;
      font-weight: 500;
    }
    @keyframes viz-govern-dim {
      0%, 100% { opacity: 0.25; }
      50% { opacity: 0.45; }
    }

    /* Eng: frontier models cycling */
    .viz-frontier {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      width: min(90%, 300px);
    }
    .viz-model {
      font-family: var(--mono);
      font-size: 12px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--surface-raised);
      color: var(--text-secondary);
      opacity: 0.35;
      animation: viz-model-cycle 4s ease-in-out infinite;
    }
    .viz-model:nth-child(1) { animation-delay: 0s; }
    .viz-model:nth-child(2) { animation-delay: 0.5s; }
    .viz-model:nth-child(3) { animation-delay: 1s; }
    .viz-model:nth-child(4) { animation-delay: 1.5s; }
    .viz-model:nth-child(5) { animation-delay: 2s; }
    .viz-model:nth-child(6) { animation-delay: 2.5s; }
    @keyframes viz-model-cycle {
      0%, 12% { opacity: 0.3; border-color: var(--border); color: var(--text-secondary); }
      20%, 35% { opacity: 1; border-color: rgba(66, 190, 101, 0.5); color: var(--text); background: rgba(66, 190, 101, 0.1); }
      45%, 100% { opacity: 0.3; border-color: var(--border); color: var(--text-secondary); }
    }

    /* Eng: keys at cost */
    .viz-keys-cost {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
    .viz-keys-cost .viz-key-row {
      display: flex;
      gap: 10px;
    }
    .viz-keys-cost .viz-key {
      width: 40px;
      height: 16px;
    }
    .viz-cost-pill {
      font-family: var(--mono);
      font-size: 12px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(66, 190, 101, 0.45);
      background: rgba(66, 190, 101, 0.12);
      color: var(--accent);
      animation: viz-pr-pop 2.4s ease-in-out infinite;
    }
    .viz-markup {
      font-size: 12px;
      color: var(--text-muted);
      text-decoration: line-through;
      opacity: 0.7;
    }

    /* Ops: end-to-end pipeline */
    .viz-stack {
      position: relative;
      width: min(88%, 280px);
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-left: 22px;
      margin-top: 8px;
    }
    .viz-stack-rail {
      position: absolute;
      left: 5px;
      top: 18px;
      bottom: 18px;
      width: 2px;
      border-radius: 2px;
      background: var(--border);
      overflow: hidden;
    }
    .viz-stack-rail::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: -30%;
      height: 40%;
      background: linear-gradient(
        to bottom,
        transparent,
        rgba(66, 190, 101, 0.15),
        #42be65,
        rgba(66, 190, 101, 0.15),
        transparent
      );
      animation: viz-stack-flow 3.2s ease-in-out infinite;
    }
    .viz-stack-layer {
      position: relative;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px 12px 16px;
      background: var(--surface-raised);
      opacity: 0.35;
      transform: translateX(-6px);
      animation: viz-stack-in 3.2s ease-in-out infinite;
    }
    .viz-stack-layer:nth-child(2) { animation-delay: 0s; }
    .viz-stack-layer:nth-child(3) { animation-delay: 0.55s; }
    .viz-stack-layer:nth-child(4) { animation-delay: 1.1s; }
    .viz-stack-dot {
      position: absolute;
      left: -21px;
      top: 50%;
      width: 10px;
      height: 10px;
      margin-top: -5px;
      border-radius: 50%;
      border: 2px solid var(--border);
      background: var(--surface);
      z-index: 1;
      animation: viz-stack-dot 3.2s ease-in-out infinite;
    }
    .viz-stack-layer:nth-child(2) .viz-stack-dot { animation-delay: 0s; }
    .viz-stack-layer:nth-child(3) .viz-stack-dot { animation-delay: 0.55s; }
    .viz-stack-layer:nth-child(4) .viz-stack-dot { animation-delay: 1.1s; }
    .viz-stack-title {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.25;
    }
    .viz-stack-meta {
      display: block;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      margin-top: 3px;
      font-family: var(--mono);
    }
    .viz-stack-logos {
      display: flex;
      gap: 6px;
      margin-top: 8px;
      align-items: center;
    }
    .viz-stack-logos img {
      width: 18px;
      height: 18px;
      object-fit: contain;
      background: #fff;
      border-radius: 4px;
      padding: 2px;
      border: 1px solid var(--border);
    }
    @keyframes viz-stack-in {
      0%, 8% {
        opacity: 0.3;
        transform: translateX(-6px);
        border-color: var(--border);
        background: var(--surface-raised);
      }
      22%, 100% {
        opacity: 1;
        transform: translateX(0);
        border-color: rgba(66, 190, 101, 0.4);
        background: rgba(66, 190, 101, 0.08);
      }
    }
    @keyframes viz-stack-dot {
      0%, 8% {
        border-color: var(--border);
        background: var(--surface);
      }
      22%, 100% {
        border-color: #42be65;
        background: #42be65;
      }
    }
    @keyframes viz-stack-flow {
      0% { transform: translateY(0); opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { transform: translateY(280%); opacity: 0; }
    }

    /* AI: shield layers */
    .viz-shield {
      width: 140px;
      height: 160px;
      position: relative;
    }
    .viz-shield-ring {
      position: absolute;
      inset: 0;
      border: 2px solid rgba(66, 190, 101, 0.25);
      border-radius: 50% 50% 46% 46%;
      animation: viz-shield-pulse 2.4s ease-in-out infinite;
    }
    .viz-shield-ring.r2 { inset: 16px; animation-delay: 0.2s; }
    .viz-shield-ring.r3 { inset: 32px; animation-delay: 0.4s; border-color: var(--accent); background: rgba(66, 190, 101, 0.1); }
    .viz-shield-core {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--mono);
      font-size: 11px;
      color: var(--accent);
      font-weight: 700;
      letter-spacing: 0.06em;
    }
    @keyframes viz-shield-pulse {
      0%, 100% { transform: scale(1); opacity: 0.7; }
      50% { transform: scale(1.04); opacity: 1; }
    }

    /* AI: observability bars */
    .viz-obs {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      height: 120px;
      width: min(80%, 220px);
    }
    .viz-obs-bar {
      flex: 1;
      border-radius: 6px 6px 2px 2px;
      background: rgba(66, 190, 101, 0.35);
      animation: viz-obs-bar 2s ease-in-out infinite;
    }
    .viz-obs-bar:nth-child(1) { height: 40%; animation-delay: 0s; }
    .viz-obs-bar:nth-child(2) { height: 70%; animation-delay: 0.15s; }
    .viz-obs-bar:nth-child(3) { height: 55%; animation-delay: 0.3s; }
    .viz-obs-bar:nth-child(4) { height: 90%; animation-delay: 0.45s; }
    .viz-obs-bar:nth-child(5) { height: 60%; animation-delay: 0.6s; }
    @keyframes viz-obs-bar {
      0%, 100% { transform: scaleY(0.85); opacity: 0.55; }
      50% { transform: scaleY(1); opacity: 1; }
    }

    /* Ops: logo marquee (Viktor / Tasklet style — real brands + many more) */
    .concept-viz-logos {
      padding: 28px 0 12px;
      align-items: stretch;
      justify-content: center;
    }
    .viz-logo-marquee {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }
    .viz-logo-row {
      overflow: hidden;
      width: 100%;
    }
    .viz-logo-track {
      display: flex;
      gap: 10px;
      width: max-content;
      animation: viz-logo-scroll 32s linear infinite;
    }
    .viz-logo-row.reverse .viz-logo-track {
      animation-name: viz-logo-scroll-reverse;
      animation-duration: 38s;
    }
    .viz-logo-item {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 9px;
    }
    .viz-logo-item img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    .viz-logo-more {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      text-align: center;
      padding: 12px 16px;
      border-radius: 14px;
      border: 1px solid rgba(66, 190, 101, 0.45);
      background: var(--surface);
      min-width: 168px;
      animation: viz-logo-more-pulse 2.8s ease-in-out infinite;
    }
    .viz-logo-more strong {
      display: block;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--accent);
      line-height: 1.2;
    }
    .viz-logo-more span {
      display: block;
      margin-top: 4px;
      font-size: 11px;
      line-height: 1.3;
      color: var(--text-muted);
    }
    @keyframes viz-logo-scroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    @keyframes viz-logo-scroll-reverse {
      from { transform: translateX(-50%); }
      to { transform: translateX(0); }
    }
    @keyframes viz-logo-more-pulse {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-50%, -50%) scale(1.03); }
    }

    /* Ops: stay in Slack — terminal dies, Slack takes the frame */
    .viz-slack-only {
      position: relative;
      width: min(92%, 300px);
      height: 210px;
      margin-top: 18px;
    }
    .viz-slack-only-term,
    .viz-slack-only-panel {
      position: absolute;
      inset: 0;
      border-radius: 12px;
      overflow: hidden;
    }
    .viz-slack-only-term {
      border: 1px solid var(--border);
      background: #11151a;
      color: #c6c6c6;
      padding: 0;
      display: flex;
      flex-direction: column;
      animation: viz-slack-only-term 5s ease-in-out infinite;
    }
    .viz-slack-only-term-bar {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 8px 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.04);
    }
    .viz-slack-only-term-bar i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #3d4450;
      display: block;
    }
    .viz-slack-only-term-bar i:nth-child(1) { background: #ff5f57; }
    .viz-slack-only-term-bar i:nth-child(2) { background: #febc2e; }
    .viz-slack-only-term-bar i:nth-child(3) { background: #28c840; }
    .viz-slack-only-term-bar em {
      margin-left: 6px;
      font-style: normal;
      font-size: 11px;
      font-weight: 600;
      color: #8b919a;
    }
    .viz-slack-only-term-line,
    .viz-slack-only-term-err {
      font-family: var(--mono);
      font-size: 12px;
      padding: 0 14px;
      line-height: 1.5;
    }
    .viz-slack-only-term-line {
      margin-top: 18px;
      color: #d4d4d4;
    }
    .viz-slack-only-term-err {
      color: #fa4453;
      margin-top: 4px;
    }
    .viz-slack-only-term-x {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 56px;
      font-weight: 700;
      color: #fa4453;
      background: rgba(250, 68, 83, 0.12);
      animation: viz-slack-only-x 5s ease-in-out infinite;
      pointer-events: none;
    }
    .viz-slack-only-panel {
      border: 1px solid rgba(66, 190, 101, 0.45);
      background: var(--surface-raised);
      display: flex;
      flex-direction: column;
      animation: viz-slack-only-panel 5s ease-in-out infinite;
    }
    .viz-slack-only-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 9px 12px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
    }
    .viz-slack-only-hash {
      color: var(--text-muted);
      font-weight: 700;
    }
    .viz-slack-only-chip {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #42be65;
      background: rgba(66, 190, 101, 0.12);
      border: 1px solid rgba(66, 190, 101, 0.35);
      border-radius: 999px;
      padding: 2px 8px;
    }
    .viz-slack-only-body {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 12px;
      flex: 1;
    }
    .viz-slack-only-msg,
    .viz-slack-only-reply {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .viz-slack-only-msg {
      animation: viz-slack-only-msg 5s ease-in-out infinite;
    }
    .viz-slack-only-reply {
      animation: viz-slack-only-reply 5s ease-in-out infinite;
    }
    .viz-slack-only-avatar {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: #4589ff;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .viz-slack-only-avatar.nori {
      background: #42be65;
    }
    .viz-slack-only-msg strong,
    .viz-slack-only-reply strong {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
      margin-bottom: 3px;
    }
    .viz-slack-only-msg p {
      margin: 0;
      font-size: 12px;
      line-height: 1.4;
      color: var(--text-secondary);
    }
    .viz-slack-only-file {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 2px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(66, 190, 101, 0.35);
      background: rgba(66, 190, 101, 0.08);
    }
    .viz-slack-only-file-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: #42be65;
      color: #fff;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .viz-slack-only-file b {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.2;
    }
    .viz-slack-only-file em {
      display: block;
      margin-top: 2px;
      font-style: normal;
      font-size: 11px;
      color: #42be65;
      font-weight: 600;
    }
    @keyframes viz-slack-only-term {
      0%, 28% {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
      }
      40%, 100% {
        opacity: 0;
        transform: scale(0.96);
        pointer-events: none;
      }
    }
    @keyframes viz-slack-only-x {
      0%, 12% { opacity: 0; transform: scale(0.6); }
      20%, 32% { opacity: 1; transform: scale(1); }
      40%, 100% { opacity: 0; transform: scale(1.05); }
    }
    @keyframes viz-slack-only-panel {
      0%, 34% {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
        pointer-events: none;
      }
      46%, 92% {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
      }
      98%, 100% {
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
      }
    }
    @keyframes viz-slack-only-msg {
      0%, 48% { opacity: 0; transform: translateY(6px); }
      56%, 92% { opacity: 1; transform: translateY(0); }
      98%, 100% { opacity: 0; }
    }
    @keyframes viz-slack-only-reply {
      0%, 62% { opacity: 0; transform: translateY(6px); }
      72%, 92% { opacity: 1; transform: translateY(0); }
      98%, 100% { opacity: 0; }
    }

    /* Ops: end-to-end pipeline — Connect → Ask → Deliver */
    .viz-pipeline {
      width: min(94%, 320px);
      margin-top: 28px;
      display: grid;
      grid-template-columns: 1fr 20px 1fr 20px 1fr;
      align-items: stretch;
      gap: 0;
    }
    .viz-pipeline-stage {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-raised);
      padding: 14px 8px 12px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      min-height: 132px;
      opacity: 0.35;
    }
    .viz-pipeline-stage.s1 { animation: viz-pipeline-stage 4.8s ease-in-out infinite; }
    .viz-pipeline-stage.s2 { animation: viz-pipeline-stage 4.8s ease-in-out infinite; animation-delay: 1.2s; }
    .viz-pipeline-stage.s3 { animation: viz-pipeline-stage 4.8s ease-in-out infinite; animation-delay: 2.4s; }
    .viz-pipeline-icons {
      display: flex;
      gap: 4px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 8px;
      min-height: 24px;
    }
    .viz-pipeline-icons img {
      width: 22px;
      height: 22px;
      object-fit: contain;
      background: #fff;
      border-radius: 6px;
      padding: 3px;
      border: 1px solid var(--border);
    }
    .viz-pipeline-stage strong {
      display: block;
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .viz-pipeline-stage span {
      display: block;
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.2;
    }
    .viz-pipeline-arrow {
      position: relative;
      align-self: center;
      height: 3px;
      background: var(--border);
      border-radius: 99px;
      overflow: hidden;
    }
    .viz-pipeline-arrow i {
      position: absolute;
      inset: 0 auto 0 0;
      width: 50%;
      background: linear-gradient(90deg, transparent, #42be65, transparent);
      animation: viz-pipeline-arrow 4.8s ease-in-out infinite;
    }
    .viz-pipeline-arrow.a1 i { animation-delay: 0.8s; }
    .viz-pipeline-arrow.a2 i { animation-delay: 2s; }
    @keyframes viz-pipeline-stage {
      0%, 10% {
        opacity: 0.35;
        border-color: var(--border);
        background: var(--surface-raised);
        transform: scale(0.97);
      }
      18%, 72% {
        opacity: 1;
        border-color: rgba(66, 190, 101, 0.5);
        background: rgba(66, 190, 101, 0.08);
        transform: scale(1);
      }
      86%, 100% {
        opacity: 0.5;
        border-color: var(--border);
        background: var(--surface-raised);
        transform: scale(0.98);
      }
    }
    @keyframes viz-pipeline-arrow {
      0%, 8% { transform: translateX(-120%); opacity: 0; }
      22%, 50% { opacity: 1; }
      70%, 100% { transform: translateX(240%); opacity: 0; }
    }

    /* Ops: eng ticket → Slack — single-slot crossfade, no stacking overlap */
    .viz-swap {
      position: relative;
      width: min(92%, 300px);
      height: 168px;
      margin-top: 18px;
    }
    .viz-swap-scene {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
    }
    .viz-swap-scene.is-old {
      animation: viz-swap-old 4.6s ease-in-out infinite;
    }
    .viz-swap-scene.is-new {
      animation: viz-swap-new 4.6s ease-in-out infinite;
    }
    .viz-swap-kicker {
      display: block;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .viz-swap-kicker.good {
      color: #42be65;
    }
    .viz-swap-card {
      border-radius: 12px;
      padding: 16px 16px 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      border: 1px solid var(--border);
      background: var(--surface-raised);
    }
    .viz-swap-card.old {
      border-color: rgba(250, 68, 83, 0.3);
      background: rgba(250, 68, 83, 0.06);
    }
    .viz-swap-card.new {
      border-color: rgba(66, 190, 101, 0.4);
      background: rgba(66, 190, 101, 0.08);
      gap: 10px;
    }
    .viz-swap-id {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      color: #fa4453;
      letter-spacing: 0.04em;
    }
    .viz-swap-card.old strong {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .viz-swap-card.old em {
      font-style: normal;
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .viz-swap-card.new p {
      margin: 0;
      font-size: 14px;
      line-height: 1.4;
      color: var(--text);
    }
    .viz-swap-done {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #42be65;
    }
    .viz-swap-check {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(66, 190, 101, 0.2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
    }
    @keyframes viz-swap-old {
      0%, 34% {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
      46%, 100% {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
      }
    }
    @keyframes viz-swap-new {
      0%, 38% {
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
      }
      50%, 88% {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
      96%, 100% {
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
      }
    }

    /* Ops: standardized */
    .viz-standard {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: min(88%, 280px);
    }
    .viz-standard-card {
      border: 1px solid rgba(66, 190, 101, 0.35);
      border-radius: 10px;
      padding: 14px 10px;
      text-align: center;
      background: rgba(66, 190, 101, 0.08);
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      animation: viz-int-pulse 2.8s ease-in-out infinite;
    }
    .viz-standard-card:nth-child(2) { animation-delay: 0.2s; }
    .viz-standard-card:nth-child(3) { animation-delay: 0.4s; }
    .viz-standard-card:nth-child(4) { animation-delay: 0.6s; }
    .viz-standard-card span {
      display: block;
      margin-top: 4px;
      font-size: 10px;
      font-weight: 500;
      color: var(--accent);
      font-family: var(--mono);
    }

    @media (prefers-reduced-motion: reduce) {
      .concept-viz *,
      .concept-viz *::before,
      .concept-viz *::after {
        animation: none !important;
      }
      .viz-scope-row,
      .viz-scope-resource,
      .viz-scope-status,
      .viz-audit-row,
      .viz-audit-row span,
      .viz-audit-live,
      .viz-pr-check,
      .viz-model,
      .viz-stack-layer,
      .viz-stack-dot,
      .viz-logo-track,
      .viz-logo-more,
      .viz-slack-only-term,
      .viz-slack-only-term-x,
      .viz-slack-only-panel,
      .viz-slack-only-msg,
      .viz-slack-only-reply,
      .viz-pipeline-stage,
      .viz-pipeline-arrow i,
      .viz-swap-scene,
      .viz-door-team,
      .viz-standard-card,
      .viz-policy-req,
      .viz-policy-result,
      .viz-policy-scan,
      .viz-policy-x,
      .viz-keys-note,
      .viz-bubble,
      .viz-cost-pill,
      .viz-pr-badge {
        opacity: 1 !important;
        transform: none !important;
      }
      .viz-pipeline-stage,
      .viz-slack-only-panel,
      .viz-swap-scene.is-new {
        opacity: 1 !important;
        transform: none !important;
        border-color: rgba(66, 190, 101, 0.45) !important;
      }
      .viz-slack-only-term,
      .viz-slack-only-term-x,
      .viz-swap-scene.is-old {
        opacity: 0 !important;
      }
      .viz-stack-layer {
        border-color: rgba(66, 190, 101, 0.4) !important;
        background: rgba(66, 190, 101, 0.08) !important;
      }
      .viz-stack-dot {
        border-color: #42be65 !important;
        background: #42be65 !important;
      }
      .viz-scope-row.is-allowed {
        border-color: rgba(66, 190, 101, 0.5) !important;
        background: rgba(66, 190, 101, 0.08) !important;
      }
      .viz-scope-row.is-denied {
        border-color: rgba(250, 68, 83, 0.45) !important;
        background: rgba(250, 68, 83, 0.07) !important;
      }
      .viz-audit-row.is-live {
        opacity: 1 !important;
        background: rgba(66, 190, 101, 0.1) !important;
        border-left-color: #42be65 !important;
      }
      .viz-policy-result {
        border-color: rgba(250, 68, 83, 0.45) !important;
        background: rgba(250, 68, 83, 0.08) !important;
      }
    }