/* ============================================
   rajeshgo.li — Immersive portfolio
   Apple-style product pages. Demos, not text.
   ============================================ */

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #e8e8e8;
  background: #0f0f0f;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; }

/* --- Layout --- */
.container { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; }
.container-wide { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; }

/* --- Sections --- */
.section-dark { background: #0f0f0f; color: #e8e8e8; padding: 6rem 0; }
.section-light { background: #fafaf8; color: #1a1a1a; padding: 6rem 0; }
.section-accent { background: #111827; color: #e8e8e8; padding: 4rem 0; }

.section-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #3b82f6;
  margin-bottom: 1rem;
}

.section-headline {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 2.75rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.section-headline-dark { color: #1a1a1a; }

.section-sub {
  font-size: 1.125rem;
  line-height: 1.65;
  color: #999;
  max-width: 640px;
  margin-bottom: 3rem;
}
.section-light .section-sub { color: #666; }

/* --- Hero --- */
.hero {
  padding: 8rem 0 4rem;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(59,130,246,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 0%, rgba(139,92,246,0.06) 0%, transparent 50%),
    #0f0f0f;
}
.hero-intro {
  display: flex; align-items: center; gap: 2.5rem;
  max-width: 820px; margin: 0 auto 3rem;
}
.hero-headshot {
  width: 140px; height: 140px; border-radius: 50%;
  object-fit: cover; border: 3px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.hero-text { text-align: left; }
.hero-name {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 2.5rem; font-weight: 500; letter-spacing: -0.03em;
  line-height: 1.15; color: #fff; margin-bottom: 0.5rem;
}
.hero-claim {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.25rem; font-weight: 400; font-style: italic;
  color: #999; line-height: 1.45; margin-bottom: 0.75rem;
}
.hero-sub { font-size: 0.95rem; color: #666; line-height: 1.6; }

/* Stats below the intro */
.hero .stats-grid {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}

/* --- Stats Grid --- */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  text-align: center;
}
.stat-num {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 2.75rem; font-weight: 600; display: block;
  letter-spacing: -0.03em; line-height: 1.1;
  color: #fff;
}
.stat-plus {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 2.75rem; font-weight: 600; color: #fff;
  letter-spacing: -0.03em;
}
.stat-label {
  font-size: 0.8rem; color: #888; display: block; margin-top: 0.5rem;
  line-height: 1.4;
}
.stats-grid-large .stat-num { font-size: 3.5rem; }
.section-light .stat-num { color: #1a1a1a; }
.section-light .stat-label { color: #888; }

/* --- Control Room (Multi-Terminal) --- */
.control-room { margin-bottom: 3rem; position: relative; }
.cr-panes {
  display: grid; grid-template-columns: 0.8fr 1.2fr 0.8fr; gap: 8px;
}
.cr-pane {
  background: #0a0a1a; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  font-size: 0.72rem; line-height: 1.55;
}
.cr-pane-wide { }
.cr-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cr-dot { width: 8px; height: 8px; border-radius: 50%; }
.cr-dot-blue { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.5); }
.cr-dot-green { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.5); }
.cr-dot-yellow { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.5); }
.cr-title { font-size: 0.7rem; font-weight: 600; color: #ccc; }
.cr-provider {
  font-size: 0.55rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 1px 5px; border-radius: 3px;
  background: rgba(255,255,255,0.08); color: #888; margin-left: 4px;
}
.cr-body { padding: 10px 12px; min-height: 260px; }
.cr-line {
  opacity: 0; animation: crFade 0.3s ease forwards;
  animation-delay: var(--delay);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 1px 0;
}
.delay-0 { --delay: 0s; }
.delay-600 { --delay: 0.6s; }
.delay-800 { --delay: 0.8s; }
.delay-1000 { --delay: 1s; }
.delay-1400 { --delay: 1.4s; }
.delay-1600 { --delay: 1.6s; }
.delay-2000 { --delay: 2s; }
.delay-2800 { --delay: 2.8s; }
.delay-3200 { --delay: 3.2s; }
.delay-3600 { --delay: 3.6s; }
.delay-4200 { --delay: 4.2s; }
.delay-4800 { --delay: 4.8s; }
.delay-5200 { --delay: 5.2s; }
.delay-5400 { --delay: 5.4s; }
.delay-5600 { --delay: 5.6s; }
.delay-5800 { --delay: 5.8s; }
.delay-6100 { --delay: 6.1s; }
.delay-6500 { --delay: 6.5s; }
.delay-6800 { --delay: 6.8s; }
.delay-7000 { --delay: 7s; }
.delay-7200 { --delay: 7.2s; }
.delay-7400 { --delay: 7.4s; }
.delay-7800 { --delay: 7.8s; }
.delay-8000 { --delay: 8s; }
.delay-8200 { --delay: 8.2s; }
.delay-8400 { --delay: 8.4s; }
.delay-8500 { --delay: 8.5s; }
.delay-9200 { --delay: 9.2s; }
.delay-9800 { --delay: 9.8s; }
.animation-reset { animation: none !important; }
.cr-p { color: #3b82f6; margin-right: 0.4em; }
.cr-dim { color: #444; }
.cr-success { color: #22c55e; }
.cr-gh { color: #a78bfa; }
.cr-send { color: #60a5fa; }
.cr-incoming {
  background: rgba(59,130,246,0.08); border-left: 2px solid #3b82f6;
  padding: 3px 8px; margin: 2px -4px; border-radius: 0 4px 4px 0;
}
.cr-from {
  font-size: 0.6rem; font-weight: 700; color: #93c5fd;
  margin-right: 0.4em;
}

@keyframes crFade {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Message arrows */
.cr-arrows {
  display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 1rem;
}
.cr-arrow-label {
  font-size: 0.65rem; font-weight: 600; color: #3b82f6;
  background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2);
  padding: 3px 10px; border-radius: 12px;
  opacity: 0; animation: crFade 0.3s ease forwards;
  animation-delay: var(--delay);
}

/* --- SM Android App Replica (from WatchScreen.kt + Color.kt) --- */
.app-showcase { margin-bottom: 2rem; }
.app-screenshot-slot { display: flex; justify-content: center; margin-bottom: 0.75rem; }
.sm-app {
  width: 320px; background: #09090D; border-radius: 24px;
  overflow: hidden; border: 2px solid #2B2B37;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  font-family: 'Inter', system-ui, sans-serif;
}
.sma-statusbar {
  display: flex; justify-content: space-between; padding: 8px 20px 2px;
  font-size: 0.6rem; font-weight: 600; color: #F5F7FA;
}
.sma-icons { font-size: 0.45rem; }

/* Header card */
.sma-header {
  margin: 8px 12px; padding: 12px 14px;
  background: #121219; border: 1px solid #2B2B37; border-radius: 18px;
}
.sma-header-row { display: flex; justify-content: space-between; align-items: center; }
.sma-header-title {
  font-size: 1.1rem; font-weight: 600; color: #F5F7FA;
  letter-spacing: -0.02em;
}
.sma-header-btn { color: #5EE7FF; font-size: 1rem; cursor: default; }
.sma-header-sync { font-size: 0.6rem; color: #777C8B; margin-top: 2px; display: block; }

/* Session cards */
.sma-sessions { padding: 4px 12px; display: flex; flex-direction: column; gap: 8px; }
.sma-card {
  background: #121219; border: 1px solid #2B2B37; border-radius: 22px;
  padding: 12px 14px;
}
.sma-card-stopped { opacity: 0.5; }
.sma-card-row { display: flex; align-items: center; gap: 10px; }
.sma-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sma-emerald { background: #4ADE80; box-shadow: 0 0 8px rgba(74,222,128,0.4); }
.sma-amber { background: #FBAF24; box-shadow: 0 0 8px rgba(251,175,36,0.4); }
.sma-rose { background: #FB7185; box-shadow: 0 0 8px rgba(251,113,133,0.4); }
.sma-muted { background: #777C8B; }
.sma-card-info { flex: 1; min-width: 0; }
.sma-card-name { font-size: 0.82rem; font-weight: 600; color: #F5F7FA; display: block; }
.sma-card-id {
  font-family: ui-monospace, monospace; font-size: 0.62rem; color: #777C8B;
  display: block; margin-top: 1px;
}
.sma-role { color: #A78BFA; }
.sma-card-age { font-family: ui-monospace, monospace; font-size: 0.6rem; color: #777C8B; }

/* Activity chips */
.sma-card-activity { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.sma-chip {
  font-size: 0.55rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 6px; text-transform: uppercase;
}
.sma-chip-working { background: rgba(74,222,128,0.15); color: #4ADE80; }
.sma-chip-thinking { background: rgba(94,231,255,0.15); color: #5EE7FF; }
.sma-chip-idle { background: rgba(119,124,139,0.15); color: #777C8B; }
.sma-chip-running { background: rgba(74,222,128,0.1); color: #4ADE80; border: 1px solid rgba(74,222,128,0.2); }
.sma-chip-stopped { background: rgba(251,113,133,0.1); color: #FB7185; border: 1px solid rgba(251,113,133,0.2); }
.sma-chip-claude { background: rgba(240,171,252,0.12); color: #F0ABFC; }
.sma-chip-codex { background: rgba(94,231,255,0.12); color: #5EE7FF; }

.sma-card-detail {
  font-size: 0.62rem; color: #ADB2C2; margin-top: 6px;
  padding-top: 6px; border-top: 1px solid #2B2B37;
}

/* Footer */
.sma-footer { padding: 8px 12px; }
.sma-footer-badges { display: flex; gap: 6px; margin-bottom: 8px; justify-content: center; }
.sma-badge {
  font-size: 0.55rem; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; background: #1E1E28; color: #ADB2C2;
  border: 1px solid #2B2B37;
}
.sma-badge-emerald { color: #4ADE80; border-color: rgba(74,222,128,0.3); }
.sma-badge-cyan { color: #5EE7FF; border-color: rgba(94,231,255,0.3); }
.sma-footer-filter { display: flex; gap: 4px; justify-content: center; }
.sma-filter {
  font-size: 0.55rem; font-weight: 600; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 8px;
  background: #1E1E28; color: #777C8B; border: 1px solid #2B2B37;
}
.sma-filter-active {
  background: rgba(94,231,255,0.18); color: #5EE7FF;
  border-color: rgba(94,231,255,0.3);
}

/* Bottom nav */
.sma-nav {
  display: flex; margin: 8px 12px 12px; border-radius: 18px;
  background: #181820; overflow: hidden;
}
.sma-nav-item {
  flex: 1; text-align: center; padding: 10px 0; font-size: 0.65rem;
  font-weight: 600; color: #777C8B;
}
.sma-nav-active { color: #5EE7FF; background: rgba(94,231,255,0.08); }
.sma-nav-icon { font-size: 0.8rem; display: block; margin-bottom: 2px; }

.app-caption { font-size: 0.8rem; color: #666; text-align: center; font-style: italic; }

@keyframes termFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* (phone mockup removed — replaced by control room + app mockup) */

/* --- Callout Row --- */
.callout-row {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  margin: 2rem 0 1.5rem;
}
.callout {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 0.4rem 1rem;
  font-size: 0.8rem; font-weight: 500; color: #ccc;
}
.callout-row-light .callout {
  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: #555;
}

/* --- Repo Link --- */
.repo-link {
  display: inline-block; font-size: 0.9rem; font-weight: 500;
  color: #3b82f6; border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.repo-link:hover { border-bottom-color: #3b82f6; }
.repo-link-dark { color: #2563eb; }
.repo-link-dark:hover { border-bottom-color: #2563eb; }

/* --- Before / After --- */
.before-after {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  margin-bottom: 3rem;
}
.ba-panel {
  border-radius: 10px; padding: 1.5rem;
  border: 1px solid rgba(0,0,0,0.08);
}
.ba-before { background: #fff5f5; }
.ba-after { background: #f0fdf4; }
.ba-label {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 1rem; display: inline-block;
  padding: 3px 10px; border-radius: 4px;
}
.ba-label-bad { background: #fecaca; color: #991b1b; }
.ba-label-good { background: #bbf7d0; color: #166534; }
.ba-session { font-size: 0.75rem; color: #999; margin-bottom: 0.75rem; }
.ba-line { font-size: 0.9rem; margin-bottom: 0.4rem; color: #333; }
.ba-dim { color: #999; }
.ba-bad { color: #dc2626; font-weight: 500; }
.ba-good { color: #16a34a; font-weight: 500; }
.ba-briefing {
  background: #ecfdf5; border-left: 3px solid #22c55e;
  padding: 0.75rem 1rem; border-radius: 0 6px 6px 0;
  margin: 0.5rem 0; font-size: 0.85rem;
}
.ba-briefing p { margin-bottom: 0.25rem; color: #333; }
.ba-warn {
  background: #fecaca; color: #991b1b; font-size: 0.7rem; font-weight: 700;
  padding: 1px 6px; border-radius: 3px; letter-spacing: 0.05em;
}
.ba-arrow { color: #16a34a; font-weight: 600; }

/* --- Concept Registry Mockup --- */
.registry-mockup {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  overflow: hidden; margin-bottom: 2rem;
}
.registry-header {
  background: #f9fafb; border-bottom: 1px solid #e5e7eb;
  padding: 0.75rem 1.25rem; font-size: 0.8rem; font-weight: 600;
  color: #374151; letter-spacing: 0.02em;
}
.registry-entries { padding: 0.5rem 0; }
.registry-entry {
  display: grid; grid-template-columns: 50px 1fr auto 2fr;
  align-items: center; gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.85rem;
}
.registry-entry:last-child { border-bottom: none; }
.reg-id { font-family: ui-monospace, monospace; font-size: 0.75rem; color: #9ca3af; font-weight: 600; }
.reg-name { font-weight: 500; color: #111827; font-family: ui-monospace, monospace; font-size: 0.8rem; }
.reg-badge {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: 3px; text-transform: uppercase;
  text-align: center;
}
.reg-active { background: #dcfce7; color: #166534; }
.reg-dead { background: #fee2e2; color: #991b1b; }
.reg-detail { font-size: 0.8rem; color: #6b7280; }

/* ============================================
   DeskBar section
   ============================================ */

/* Product app icon — macOS squircle, soft shadow. Works on light + dark. */
.product-icon {
  width: 80px; height: 80px;
  border-radius: 18px;
  display: block;
  box-shadow:
    0 14px 32px rgba(0,0,0,0.32),
    0 2px 6px rgba(0,0,0,0.2);
}

/* Section hero — icon sits to the left of label + headline, filling the
   vertical whitespace next to a two-line headline. Headline is slightly
   tighter than the default so the icon doesn't squeeze it onto 3 lines. */
.section-hero {
  display: flex; align-items: center; gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.section-hero > .product-icon { flex-shrink: 0; }
.section-hero-text { min-width: 0; flex: 1; }
.section-hero-text > .section-label { margin-bottom: 0.35rem; }
.section-hero-text > .section-headline {
  margin-bottom: 0;
  font-size: 2.4rem;
}

/* The deskbar launcher button hosts a small version of the same icon */
.db-launch-apps img {
  width: 26px; height: 26px;
  border-radius: 5px;
  display: block;
}

/* App-icon color palette (shared by dock-compare + bigbar + switcher) */
.dc-app-c { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.dc-app-s { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.dc-app-v { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.dc-app-f { background: #e5e7eb; color: #374151; border-color: #d1d5db; }

/* --- Dock vs DeskBar comparison --- */
.dock-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  margin-bottom: 3rem;
}
.dc-panel {
  border-radius: 10px; padding: 1.5rem;
  border: 1px solid rgba(0,0,0,0.08);
}
.dc-before { background: #fff5f5; }
.dc-after { background: #f0fdf4; }
.dc-label {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 1rem; display: inline-block;
  padding: 3px 10px; border-radius: 4px;
}
.dc-label-bad { background: #fecaca; color: #991b1b; }
.dc-label-good { background: #bbf7d0; color: #166534; }

.dc-dock {
  display: flex; gap: 0.6rem; justify-content: flex-start;
  margin: 0.75rem 0 1.25rem;
}
.dc-app {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.95rem;
  border: 1px solid rgba(0,0,0,0.06);
}

.dc-winlist {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 0.35rem; margin: 0.75rem 0 1rem;
  display: flex; flex-direction: column; gap: 2px;
}
.dc-winrow {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.55rem; border-radius: 5px;
  font-size: 0.82rem; color: #374151;
}
.dc-winrow-active {
  background: rgba(59,130,246,0.12);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,0.3);
  color: #1e40af; font-weight: 500;
}
.dc-winrow-dim { opacity: 0.55; }
.dc-winrow-icon {
  width: 20px; height: 20px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.65rem;
  border: 1px solid rgba(0,0,0,0.05); flex-shrink: 0;
}
.dc-winrow-title { flex: 1; }
.dc-winrow-dot {
  width: 5px; height: 5px; border-radius: 50%; background: #3b82f6;
}
.dc-mini { color: #9ca3af; font-size: 0.7rem; }

.dc-line { font-size: 0.9rem; color: #333; margin-bottom: 0.4rem; }
.dc-line em { font-style: italic; color: #111; }
.dc-bad { color: #dc2626; }
.dc-good { color: #16a34a; font-weight: 500; }
.dc-dim { color: #999; font-size: 0.82rem; }

/* --- Big DeskBar mock --- */
.deskbar-stage {
  margin: 0 auto 2.5rem; max-width: 880px;
  padding-top: 120px; /* room for floating hover thumbnail */
}
.deskbar-fullbar-wrap { position: relative; }

.deskbar-fullbar {
  background: linear-gradient(180deg, #1a1a1a, #060606);
  border: 1px solid #000;
  border-radius: 7px;
  padding: 6px 8px;
  display: flex; align-items: center; gap: 7px;
  box-shadow:
    0 14px 36px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.4);
}
.db-zone { display: flex; align-items: center; gap: 4px; }
.db-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.08); }

/* Launcher zone */
.db-launch {
  width: 26px; height: 26px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.72rem;
  border: 1px solid rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.db-launch-apps {
  background: transparent;
  border-color: transparent;
  padding: 0;
  overflow: hidden;
}

/* Tasks zone */
.db-tasks { gap: 4px; flex-shrink: 0; }
.db-task {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 7px 4px 5px; border-radius: 5px;
  background: rgba(255,255,255,0.05);
  font-size: 0.7rem; color: #d4d4d4;
  border: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
  height: 26px;
}
.db-task-active {
  background: rgba(59, 130, 246, 0.3);
  border-color: rgba(59,130,246,0.45);
  color: #dbeafe;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(59,130,246,0.18);
}
.db-task-icon {
  width: 16px; height: 16px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.6rem;
  border: 1px solid rgba(0,0,0,0.1); flex-shrink: 0;
}
.db-task-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 78px;
}
.db-task-dot {
  width: 4px; height: 4px; border-radius: 50%; background: #93c5fd;
  box-shadow: 0 0 4px rgba(147,197,253,0.8);
  flex-shrink: 0;
}

/* System resource widget */
.db-widget {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 5px; padding: 3px 7px;
  display: flex; align-items: center; gap: 8px;
  font-size: 0.62rem;
  height: 26px;
  flex-shrink: 0;
}
.db-w-metric {
  display: flex; align-items: center; gap: 4px;
  color: #a3a3a3;
}
.db-w-label {
  font-family: ui-monospace, monospace; font-weight: 700;
  letter-spacing: 0.05em; font-size: 0.55rem;
  color: #888;
}
.db-w-bar {
  width: 22px; height: 4px; background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden;
  flex-shrink: 0;
}
.db-w-fill {
  height: 100%; background: #4ade80; border-radius: 2px;
}
.db-w-fill-amber { background: #f59e0b; }
.width-62 { width: 62%; }
.width-38 { width: 38%; }
.db-w-val {
  font-family: ui-monospace, monospace; font-size: 0.6rem;
  color: #d4d4d4; font-weight: 500;
}

/* Session-manager plugin widget */
.db-widget-plugin {
  background: linear-gradient(180deg, rgba(139,92,246,0.22), rgba(139,92,246,0.1));
  border-color: rgba(139,92,246,0.3);
  gap: 6px;
}
.db-plug-tag {
  font-family: ui-monospace, monospace; font-weight: 700;
  font-size: 0.58rem; color: #c4b5fd;
  background: rgba(139,92,246,0.3); padding: 2px 5px; border-radius: 3px;
  letter-spacing: 0.05em;
}
.db-plug-agent {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.6rem; color: #ddd6fe;
  font-family: ui-monospace, monospace;
}
.db-plug-dot {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0;
}
.db-plug-dot-green {
  background: #4ade80; box-shadow: 0 0 4px rgba(74,222,128,0.7);
}
.db-plug-dot-amber {
  background: #fbbf24; box-shadow: 0 0 4px rgba(251,191,36,0.7);
}

/* Tray zone */
.db-tray { gap: 8px; color: #a3a3a3; flex-shrink: 0; }
.db-tray-icon { font-size: 0.9rem; line-height: 1; }
.db-tray-time {
  font-family: ui-monospace, monospace; font-size: 0.7rem;
  font-weight: 500; color: #d4d4d4;
  padding-left: 2px;
}

/* Floating hover thumbnail above active task */
.db-thumb-hover {
  position: absolute;
  bottom: calc(100% + 22px); /* anchor above bar with breathing room */
  left: 23%;
  width: 132px;
  animation: dbThumbPop 0.4s ease forwards 0.5s;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.db-thumb-cap {
  margin-bottom: 5px; font-size: 0.62rem; color: #93c5fd;
  text-align: center; font-family: ui-monospace, monospace;
  letter-spacing: 0.03em;
}
.db-thumb-frame {
  background: #111; border: 1px solid #2e2e2e; border-radius: 6px;
  padding: 4px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.55);
}
.db-thumb-bar {
  height: 7px; background: rgba(255,255,255,0.1); border-radius: 3px 3px 0 0;
  margin-bottom: 3px;
}
.db-thumb-body {
  background: #1c1c1c; border-radius: 0 0 3px 3px;
  padding: 6px; display: flex; flex-direction: column; gap: 4px;
  height: 48px;
}
.db-thumb-row {
  height: 4px; background: rgba(255,255,255,0.13); border-radius: 2px; width: 100%;
}
.db-thumb-row-short { width: 55%; }
.db-thumb-tail {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #111;
  filter: drop-shadow(0 1px 0 #2e2e2e);
}
@keyframes dbThumbPop {
  to { opacity: 1; transform: translateY(0); }
}

/* Zone labels under the bar */
.deskbar-labels {
  display: flex; justify-content: space-between;
  margin: 0.75rem 0.25rem 0;
  font-size: 0.65rem; color: #999;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.02em;
  gap: 0.5rem;
}
.dbl { white-space: nowrap; }

/* --- Option+Tab switcher mock --- */
.switcher-mock {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 1.5rem; margin-bottom: 2rem;
}
.switcher-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 1.25rem;
  font-size: 0.85rem;
}
.switcher-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 26px; padding: 0 8px;
  font-family: ui-monospace, monospace; font-size: 0.78rem; font-weight: 600;
  background: #f3f4f6; border: 1px solid #d1d5db;
  border-bottom-width: 2px;
  border-radius: 5px; color: #374151;
}
.switcher-plus { color: #9ca3af; font-weight: 600; }
.switcher-label {
  margin-left: 0.5rem; color: #6b7280; font-size: 0.8rem;
  font-style: italic;
}

.switcher-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.sw-card {
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 7px;
  padding: 0.55rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.sw-card-active {
  background: rgba(59,130,246,0.06);
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.sw-preview {
  height: 64px; border-radius: 4px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid #e5e7eb;
}
.sw-preview-c { background: linear-gradient(135deg, #fef9c3, #fef3c7); border-color: #fde68a; }
.sw-preview-s { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #bfdbfe; }
.sw-preview-v { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-color: #ddd6fe; }
.sw-pv-bar {
  height: 5px; background: rgba(0,0,0,0.1); border-radius: 2px;
  margin-bottom: 2px;
}
.sw-pv-line {
  height: 3px; background: rgba(0,0,0,0.12); border-radius: 2px; width: 100%;
}
.sw-pv-short { width: 55%; }
.sw-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: #374151;
}
.sw-icon {
  width: 18px; height: 18px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.62rem;
  border: 1px solid rgba(0,0,0,0.05); flex-shrink: 0;
}
.sw-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switcher-caption {
  margin-top: 1rem; text-align: center; font-size: 0.85rem;
  color: #6b7280; line-height: 1.55;
}

/* ============================================
   Backup Manager section
   ============================================ */

.bm-grid {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Terminal mockup */
.bm-terminal {
  background: #0a0a0a; border: 1px solid #1f1f1f;
  border-radius: 9px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.bm-term-bar {
  background: #1a1a1a; border-bottom: 1px solid #2a2a2a;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 6px;
}
.bm-term-dot {
  width: 11px; height: 11px; border-radius: 50%;
  flex-shrink: 0;
}
.bm-term-dot-red { background: #ff5f57; }
.bm-term-dot-yellow { background: #febc2e; }
.bm-term-dot-green { background: #28c840; }
.bm-term-title {
  flex: 1; text-align: center; font-size: 0.72rem;
  color: #737373; letter-spacing: 0.02em;
  margin-right: 32px; /* visual balance against the dots */
}
.bm-term-body {
  padding: 1rem 1.25rem 1.1rem; font-size: 0.78rem; color: #d4d4d4;
  line-height: 1.5;
}
.bm-line { display: flex; align-items: baseline; gap: 6px; }
.bm-prompt { color: #4ade80; font-weight: 600; }
.bm-dim { color: #737373; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.65rem; margin-bottom: 0.35rem; }

.bm-row {
  display: grid; grid-template-columns: 140px 1fr;
  align-items: baseline; gap: 10px;
  padding: 2px 0;
}
.bm-key { color: #737373; font-size: 0.72rem; }
.bm-val { color: #e8e8e8; }
.bm-muted { color: #737373; font-size: 0.7rem; margin-left: 4px; }
.bm-check { color: #4ade80; font-size: 0.72rem; margin-left: 4px; }
.bm-sep {
  height: 1px; background: #2a2a2a; margin: 0.65rem 0 0.1rem;
}

.bm-run {
  display: grid; grid-template-columns: 1.4fr auto 1fr 0.7fr;
  align-items: center; gap: 8px;
  padding: 3px 0;
  font-size: 0.74rem;
  color: #d4d4d4;
}
.bm-run-date { color: #93c5fd; }
.bm-run-files { color: #999; text-align: left; }
.bm-run-size { color: #d4d4d4; text-align: right; font-variant-numeric: tabular-nums; }
.bm-tag {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 3px;
  text-align: center; min-width: 42px;
}
.bm-tag-delta { background: rgba(59,130,246,0.18); color: #93c5fd; }
.bm-tag-full { background: rgba(245,158,11,0.18); color: #fcd34d; }

/* Column wrapper + labels (dual-layer architecture) */
.bm-col { display: flex; flex-direction: column; }
.bm-col-label {
  font-size: 0.7rem; color: #999;
  font-family: ui-monospace, monospace;
  margin-bottom: 0.55rem;
  display: flex; align-items: center; gap: 0.5rem;
  letter-spacing: 0.02em;
}
.bm-col-tag {
  font-weight: 700; font-size: 0.6rem;
  padding: 2px 7px; border-radius: 3px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.bm-col-tag-rust { background: rgba(202, 88, 41, 0.2); color: #f0b58d; border: 1px solid rgba(202, 88, 41, 0.4); }
.bm-col-tag-swift { background: rgba(240, 81, 56, 0.18); color: #fb9c8a; border: 1px solid rgba(240, 81, 56, 0.4); }

/* Native macOS SwiftUI app mockup */
.bm-app {
  background: #1c1c1e; border: 1px solid #000;
  border-radius: 9px; overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  flex: 1;
}
.bm-app-chrome {
  background: linear-gradient(180deg, #353537, #2a2a2c);
  border-bottom: 1px solid #0a0a0a;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 6px;
}
.bm-app-dot {
  width: 11px; height: 11px; border-radius: 50%;
  flex-shrink: 0;
}
.bm-app-dot-red { background: #ff5f57; }
.bm-app-dot-yellow { background: #febc2e; }
.bm-app-dot-green { background: #28c840; }
.bm-app-title {
  flex: 1; text-align: center; font-size: 0.78rem;
  color: #d4d4d4; font-weight: 500;
  margin-right: 16px;
}
.bm-app-menu {
  font-size: 0.85rem; color: #888; cursor: default;
}
.bm-app-body {
  display: grid; grid-template-columns: 130px 1fr;
  flex: 1;
}
.bm-app-side {
  background: #232325; border-right: 1px solid #0a0a0a;
  padding: 0.75rem 0;
  display: flex; flex-direction: column;
}
.bm-app-nav {
  display: flex; align-items: center; gap: 8px;
  padding: 0.4rem 0.85rem; margin: 0 0.5rem;
  border-radius: 5px;
  font-size: 0.78rem; color: #a3a3a3;
}
.bm-app-nav-active {
  background: rgba(59, 130, 246, 0.22);
  color: #dbeafe; font-weight: 500;
}
.bm-app-nav-icon {
  width: 14px; text-align: center; font-size: 0.78rem;
  opacity: 0.85;
}
.bm-app-side-foot {
  margin-top: auto; padding: 0.65rem 0.85rem;
  border-top: 1px solid #2a2a2c;
}
.bm-app-menubar {
  font-size: 0.62rem; color: #737373;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.bm-app-main {
  padding: 1.1rem 1.25rem 1rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.bm-app-status {
  display: flex; align-items: center; gap: 0.75rem;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 7px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.35rem;
}
.bm-app-status-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: #4ade80; color: #052e16;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
  flex-shrink: 0;
}
.bm-app-status-title {
  font-size: 0.85rem; font-weight: 600; color: #e8e8e8;
}
.bm-app-status-sub {
  font-size: 0.72rem; color: #999; margin-top: 1px;
}
.bm-app-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 0.78rem; padding: 0.18rem 0;
  border-bottom: 1px solid #2a2a2c;
}
.bm-app-row:last-of-type { border-bottom: none; }
.bm-app-row-label { color: #999; }
.bm-app-row-val {
  color: #e8e8e8;
  font-family: ui-monospace, monospace;
  font-size: 0.74rem;
}
.bm-app-ok { color: #4ade80; }
.bm-app-actions {
  display: flex; gap: 0.5rem; margin-top: 0.5rem;
}
.bm-app-btn {
  font-family: inherit; font-size: 0.78rem; font-weight: 500;
  padding: 0.4rem 0.85rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px; color: #d4d4d4;
  cursor: default;
}
.bm-app-btn-primary {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border-color: #1d4ed8; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Pipeline diagram */
.bm-pipeline {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; margin: 0 auto 2rem;
  flex-wrap: wrap;
}
.bm-stage {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
}
.bm-stage-key {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.3);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.1), 0 4px 12px rgba(245,158,11,0.08);
}
.bm-stage-icon { font-size: 1.1rem; }
.bm-stage-name {
  color: #d4d4d4; font-family: ui-monospace, monospace;
  font-size: 0.78rem;
}
.bm-stage-key .bm-stage-name { color: #fcd34d; }
.bm-arrow { color: #525252; font-weight: 600; font-size: 0.9rem; }

/* Link inside .section-sub (e.g. the codex link in SM section) */
.sub-link {
  color: #3b82f6; border-bottom: 1px solid rgba(59,130,246,0.3);
  transition: border-color 0.2s;
}
.sub-link:hover { border-bottom-color: #3b82f6; }

/* ============================================
   Office Automate section
   ============================================ */

.oa-dashboard {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 1.5rem 1.5rem 1.25rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 28px rgba(0,0,0,0.06);
}
.oa-dash-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 0.75rem;
}
.oa-dash-title {
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #6b7280;
}
.oa-dash-presence {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #dcfce7; color: #166534;
  padding: 0.3rem 0.85rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600;
  font-family: ui-monospace, monospace;
}
.oa-dash-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22,163,74,0.7);
  animation: oaPulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes oaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
  50% { box-shadow: 0 0 0 7px rgba(22,163,74,0); }
}

/* Vitals tiles */
.oa-vitals {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.oa-tile {
  background: #f9fafb; border: 1px solid #f3f4f6;
  border-radius: 8px; padding: 0.75rem 0.5rem;
  text-align: center;
  display: flex; flex-direction: column; gap: 0.15rem;
  min-width: 0;
}
.oa-tile-val {
  font-family: ui-monospace, monospace;
  font-size: 1.25rem; font-weight: 700;
  color: #111827; line-height: 1.1;
}
.oa-good { color: #16a34a; }
.oa-tile-unit {
  font-size: 0.58rem; color: #9ca3af;
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.oa-tile-unit sub { font-size: 0.85em; vertical-align: sub; }
.oa-tile-unit sup { font-size: 0.85em; vertical-align: super; }

/* Controls strip */
.oa-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.7rem 0;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 1rem;
}
.oa-strip-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem;
}
.oa-strip-label {
  font-family: ui-monospace, monospace;
  font-size: 0.62rem; font-weight: 700;
  color: #9ca3af; letter-spacing: 0.05em;
}
.oa-strip-val { color: #374151; }

/* Project leverage */
.oa-leverage-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.65rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.oa-leverage-title {
  font-size: 0.78rem; font-weight: 600; color: #374151;
}
.oa-leverage-time {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem; color: #2563eb;
  font-weight: 500;
}
.oa-lev-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1.8fr;
  align-items: center; gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.8rem;
}
.oa-lev-row:last-of-type { border-bottom: none; }
.oa-lev-name {
  font-family: ui-monospace, monospace;
  color: #111827; font-weight: 500;
}
.oa-lev-commits { color: #6b7280; font-size: 0.76rem; }
.oa-lev-sessions {
  color: #6b7280; font-size: 0.74rem;
  font-family: ui-monospace, monospace;
  text-align: right;
}
.oa-lev-foot {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  margin-top: 0.75rem;
}
.oa-lev-chip {
  background: #eff6ff; color: #1e40af;
  padding: 0.25rem 0.65rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 500;
  font-family: ui-monospace, monospace;
}

/* Loop flow diagram */
.oa-loop {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.oa-loop-col {
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.oa-loop-col-state {
  background: linear-gradient(180deg, #ecfeff, #dbeafe);
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.08);
}
.oa-loop-label {
  font-size: 0.62rem; font-weight: 700;
  color: #9ca3af; text-transform: uppercase;
  letter-spacing: 0.1em;
}
.oa-loop-label-key { color: #1e40af; }
.oa-loop-items {
  display: flex; flex-direction: column; gap: 0.35rem;
}
.oa-loop-item {
  font-size: 0.78rem; color: #374151;
  font-family: ui-monospace, monospace;
}
.oa-loop-out {
  color: #15803d; font-weight: 500;
}
.oa-loop-state {
  display: flex; flex-direction: column; gap: 0.2rem;
  margin-top: 0.25rem;
}
.oa-loop-state-line {
  font-size: 0.95rem; font-weight: 600; color: #111827;
  font-family: ui-monospace, monospace;
}
.oa-loop-state-sub {
  font-size: 0.72rem; color: #6b7280;
}
.oa-loop-arrow {
  align-self: center;
  font-size: 1.25rem; color: #9ca3af;
  font-weight: 600;
}
.oa-loop-caption {
  margin-top: 0.4rem;
  font-size: 0.72rem; color: #1e40af;
  font-style: italic;
}

/* --- Org Chart --- */
.orgchart {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; margin: 3rem auto; max-width: 500px;
}
.org-row { display: flex; gap: 2rem; justify-content: center; }
.org-node {
  padding: 0.6rem 1.25rem; border-radius: 8px;
  font-size: 0.8rem; font-weight: 600; text-align: center;
  border: 1px solid rgba(255,255,255,0.15);
}
.org-product { background: rgba(139, 92, 246, 0.15); color: #c4b5fd; border-color: rgba(139,92,246,0.3); }
.org-em { background: rgba(59, 130, 246, 0.15); color: #93c5fd; border-color: rgba(59,130,246,0.3); }
.org-architect { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border-color: rgba(245,158,11,0.3); }
.org-engineer { background: rgba(34, 197, 94, 0.15); color: #86efac; border-color: rgba(34,197,94,0.3); }
.org-scout { background: rgba(236, 72, 153, 0.15); color: #f9a8d4; border-color: rgba(236,72,153,0.3); }
.org-connector-down {
  width: 1px; height: 28px; background: rgba(255,255,255,0.15);
}
.org-connector-spread {
  width: 1px; height: 28px; background: rgba(255,255,255,0.15);
}

.insight-callout {
  margin: 3rem auto 2rem; max-width: 600px; text-align: center;
}
.insight-quote {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.15rem; font-style: italic; color: #999; line-height: 1.6;
}

/* --- Showcase Grid --- */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.showcase-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  overflow: hidden; transition: box-shadow 0.2s;
}
a.showcase-card { text-decoration: none; color: inherit; cursor: pointer; }
.showcase-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.showcase-card h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.1rem; font-weight: 500; padding: 1.25rem 1.25rem 0.25rem;
}
.showcase-card h3 a { color: #1a1a1a; transition: color 0.2s; }
.showcase-card h3 a:hover { color: #3b82f6; }
.showcase-card > p { font-size: 0.85rem; line-height: 1.55; color: #666; padding: 0 1.25rem 1.25rem; }
.showcase-card-compact { padding: 1.25rem; }
.showcase-card-compact h3 { padding: 0 0 0.25rem; }
.showcase-card-compact > p { padding: 0; }

/* --- Dashboard Mock --- */
.showcase-demo { padding: 1.25rem; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.dashboard-mock { display: flex; flex-direction: column; gap: 0.75rem; }
.dash-row { display: flex; gap: 1rem; justify-content: center; }
.dash-sensor { text-align: center; }
.dash-value {
  font-family: ui-monospace, monospace; font-size: 1.5rem; font-weight: 700;
  color: #111; display: block; line-height: 1.2;
}
.dash-green { color: #16a34a; }
.dash-unit { font-size: 0.65rem; color: #999; text-transform: uppercase; letter-spacing: 0.05em; }
.dash-state {
  text-align: center; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.15em; padding: 4px 12px; border-radius: 4px;
  display: inline-block; margin: 0 auto;
}
.dash-present { background: #dcfce7; color: #166534; }
.stat-live {
  font-size: 0.6rem; color: #3b82f6; font-weight: 500;
  letter-spacing: 0.02em;
}

/* --- Taskbar Mock --- */
.taskbar-mock {
  background: #2d2d2d; border-radius: 6px; padding: 6px 8px;
  display: flex; gap: 4px; align-items: center; position: relative;
}
.tb-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 4px; font-size: 0.7rem;
  color: #ccc; background: rgba(255,255,255,0.06); cursor: default;
}
.tb-active { background: rgba(59, 130, 246, 0.25); color: #93c5fd; }
.tb-dim { opacity: 0.4; }
.tb-icon {
  width: 16px; height: 16px; background: rgba(255,255,255,0.1);
  border-radius: 3px; display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700;
}
.tb-title { white-space: nowrap; }
.tb-thumb {
  position: absolute; top: -60px; left: 20px;
  background: #1a1a1a; border: 1px solid #444; border-radius: 6px;
  padding: 4px; width: 120px; height: 50px;
  opacity: 0; animation: thumbPop 0.3s ease forwards 2s;
}
.tb-thumb-inner {
  background: #2a2a2a; border-radius: 4px; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem; color: #666;
}
@keyframes thumbPop {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Engram showcase demo --- */
.engram-demo {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.3rem;
  font-family: ui-monospace, monospace;
}
.eg-node {
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  display: flex; flex-direction: column; gap: 2px;
  width: 80%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.eg-watcher {
  width: auto;
  flex-direction: row; align-items: center; gap: 6px;
  background: #eff6ff; border-color: #bfdbfe;
}
.eg-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 0 rgba(59,130,246,0.5);
  animation: egDot 2s ease-in-out infinite;
}
@keyframes egDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(59,130,246,0); }
}
.eg-node-name { font-size: 0.7rem; font-weight: 600; color: #1e40af; }
.eg-index-title {
  font-size: 0.6rem; font-weight: 700;
  color: #9ca3af; letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.eg-index-row {
  font-size: 0.65rem; color: #374151;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eg-arrow {
  color: #9ca3af; font-size: 0.9rem;
  line-height: 1;
  display: inline-flex; align-items: center; gap: 4px;
}
.eg-arrow-label {
  font-size: 0.58rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: #9ca3af;
}
.eg-arrow-fan { color: #9ca3af; }
.eg-concepts {
  display: flex; gap: 6px;
}
.eg-concept {
  background: #ecfdf5; color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.65rem; font-weight: 600;
  font-family: ui-monospace, monospace;
}

/* --- Specialist Grid --- */
.specialist-grid {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.specialist {
  font-size: 0.65rem; font-weight: 600; padding: 4px 10px;
  border-radius: 4px; background: #e0e7ff; color: #3730a3;
}
.sp-adversary { background: #fef3c7; color: #92400e; }

/* --- Writing --- */
.writing-blog-link { color: #3b82f6; border-bottom: 1px solid rgba(59,130,246,0.3); }
.writing-blog-link:hover { border-bottom-color: #3b82f6; }

/* --- Writing Grid (matches blog card style) --- */
.writing-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
}
.writing-featured {
  grid-column: 1 / -1;
}
.writing-card {
  display: flex; flex-direction: column;
  background: #121219; border: 1px solid #2B2B37; border-radius: 14px;
  padding: 0; transition: border-color 0.2s, background 0.2s;
  text-decoration: none; color: inherit; min-height: 200px;
  overflow: hidden;
}
.writing-card:hover {
  border-color: rgba(94,231,255,0.25); background: #181820;
}
.writing-banner {
  height: 6px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 14px 14px 0 0;
}
.writing-featured .writing-banner { height: 8px; }
.writing-banner-default { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
.writing-banner-short-stories { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.writing-banner-travelogue { background: linear-gradient(135deg, #22c55e, #0ea5e9); }
.writing-banner-opinion { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.writing-banner-academic { background: linear-gradient(135deg, #3b82f6, #06b6d4); }
.writing-banner-miscellaneous { background: linear-gradient(135deg, #6366f1, #a78bfa); }
.writing-banner-tech { background: linear-gradient(135deg, #14b8a6, #22d3ee); }
.writing-banner-telecom { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.writing-banner-aiml { background: linear-gradient(135deg, #f43f5e, #fb923c); }
.writing-card-body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.writing-featured .writing-card {
  padding: 0;
}
.writing-card h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.3rem; font-weight: 500; color: #F5F7FA;
  margin-bottom: 0.6rem; line-height: 1.3; letter-spacing: -0.02em;
}
.writing-featured .writing-card h3 { font-size: 2rem; }
.writing-card p {
  font-size: 0.9rem; line-height: 1.6; color: #ADB2C2;
  margin-bottom: 0.5rem; flex: 1;
}
.writing-featured .writing-card p { font-size: 1rem; max-width: 640px; }
.writing-meta {
  display: flex; gap: 0.75rem; align-items: center;
  margin-bottom: 0.5rem; flex-wrap: wrap;
}
.writing-tag {
  font-size: 0.55rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: #5EE7FF;
  background: rgba(94,231,255,0.1); padding: 2px 8px; border-radius: 4px;
}
.writing-date {
  font-size: 0.7rem; color: #777C8B; font-family: ui-monospace, monospace;
}
.writing-readtime { margin-left: auto; }
.writing-read {
  font-size: 0.8rem; font-weight: 500; color: #5EE7FF; margin-top: auto;
}
.writing-loading { color: #777C8B; font-size: 0.9rem; grid-column: 1 / -1; text-align: center; padding: 2rem 0; }
.repo-link-spaced { margin-top: 1.5rem; display: inline-block; }

.nav-blog-link {
  background: rgba(59,130,246,0.12); padding: 2px 10px; border-radius: 6px;
  color: #3b82f6 !important; font-size: 0.8rem !important;
  line-height: 1; display: inline-flex; align-items: center;
}

/* --- Resume --- */
.resume-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem;
}
.resume-section-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: #5EE7FF; margin-bottom: 1.5rem;
}
.resume-item {
  margin-bottom: 1.75rem; padding-left: 1.25rem;
  border-left: 1px solid rgba(255,255,255,0.06);
}
.resume-current { border-left-color: #5EE7FF; }
.resume-date {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem; font-weight: 600; color: #777C8B;
  margin-bottom: 0.25rem;
}
.resume-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.1rem; font-weight: 500; color: #F5F7FA;
  margin-bottom: 0.15rem; line-height: 1.3;
}
.resume-org {
  font-size: 0.85rem; color: #5EE7FF; margin-bottom: 0.4rem;
  font-weight: 500;
}
.resume-desc {
  font-size: 0.85rem; color: #ADB2C2; line-height: 1.55;
}
.resume-desc a { color: #5EE7FF; }
.patent-list p {
  font-size: 0.8rem; color: #ADB2C2; line-height: 1.5;
  padding: 0.2rem 0; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.patent-list p:last-child { border-bottom: none; }
.resume-quote {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.95rem; font-style: italic; color: #999;
  line-height: 1.55; border-left: 2px solid #3b82f6;
  padding: 0.5rem 1rem; margin: 0 0 0.5rem;
  background: rgba(255,255,255,0.02); border-radius: 0 6px 6px 0;
}
.resume-quoter {
  font-size: 0.75rem; color: #777C8B;
}

@media (max-width: 767px) {
  .resume-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* --- Story --- */
.story-section-bg { border-top: 1px solid #e5e7eb; }
.story-graf {
  font-size: 1.05rem; line-height: 1.75; color: #333;
  margin-bottom: 1.25rem;
}
.story-graf a { color: #2563eb; border-bottom: 1px solid rgba(37,99,235,0.3); }
.story-graf a:hover { border-bottom-color: #2563eb; }
.story-graf-em {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.2rem; font-style: italic; color: #555;
  border-left: 3px solid #3b82f6; padding-left: 1.25rem;
  margin-top: 2rem;
}

/* --- Connect --- */
.connect { text-align: center; padding: 5rem 0; }
.connect-text { font-size: 1rem; color: #999; max-width: 540px; margin: 0 auto 2rem; }
.connect-links { display: flex; justify-content: center; gap: 2rem; }
.connect-links a {
  font-weight: 500; color: #3b82f6;
  border-bottom: 1px solid rgba(59,130,246,0.4);
  padding-bottom: 2px; transition: border-color 0.2s;
}
.connect-links a:hover { border-bottom-color: #3b82f6; }

/* --- Footer --- */
.footer {
  padding: 1.5rem 0; text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #0f0f0f;
}
.footer p { font-size: 0.8rem; color: #555; }

/* --- Fade-in --- */
.fade-in {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ============================
   RESPONSIVE
   ============================ */

@media (max-width: 960px) {
  .showcase-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .hero { padding: 6.5rem 0 3rem; }
  .hero-intro { flex-direction: column; text-align: center; gap: 1.5rem; }
  .hero-text { text-align: center; }
  .hero-headshot { width: 100px; height: 100px; }
  .hero-name { font-size: 2rem; }
  .hero-claim { font-size: 1.1rem; }
  .section-headline { font-size: 2rem; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .stat-num { font-size: 2rem; }
  .stats-grid-large .stat-num { font-size: 2.5rem; }
  .stat-plus { font-size: 2rem; }

  .cr-panes { grid-template-columns: 1fr; }
  .cr-body { min-height: auto; }
  .sm-app { width: 100%; max-width: 320px; }
  .writing-grid { grid-template-columns: 1fr; }
  .writing-featured { grid-column: 1; }
  .writing-featured .writing-card h3 { font-size: 1.5rem; }
  .writing-featured .writing-card { padding: 1.5rem; }

  .before-after { grid-template-columns: 1fr; }
  .showcase-grid { grid-template-columns: 1fr; }

  /* Section hero — keep horizontal on mobile, shrink icon + headline */
  .section-hero { gap: 0.9rem; margin-bottom: 1.25rem; }
  .section-hero > .product-icon { width: 56px; height: 56px; border-radius: 13px; }
  .section-hero-text > .section-headline { font-size: 1.9rem; }

  /* Office Automate mobile */
  .oa-vitals { grid-template-columns: repeat(3, 1fr); }
  .oa-strip { grid-template-columns: 1fr; }
  .oa-loop { grid-template-columns: 1fr; }
  .oa-loop-arrow { transform: rotate(90deg); align-self: center; }
  .oa-lev-row { grid-template-columns: 1fr 1fr; }
  .oa-lev-sessions { grid-column: 1 / -1; text-align: left; }

  /* Backup Manager mobile */
  .bm-grid { grid-template-columns: 1fr; }
  .bm-pipeline { gap: 0.4rem; }
  .bm-stage { padding: 0.5rem 0.75rem; font-size: 0.75rem; }
  .bm-stage-name { font-size: 0.7rem; }
  .bm-row { grid-template-columns: 110px 1fr; gap: 6px; }
  .bm-run { grid-template-columns: 1fr auto; gap: 6px; }
  .bm-run-files, .bm-run-size { grid-column: span 1; }

  /* DeskBar mobile */
  .dock-compare { grid-template-columns: 1fr; }
  .switcher-grid { grid-template-columns: repeat(2, 1fr); }
  .deskbar-fullbar { flex-wrap: wrap; padding: 8px; gap: 6px; }
  .db-tasks { flex-wrap: wrap; }
  .db-widget { font-size: 0.58rem; }
  .db-widget .db-w-bar { width: 22px; }
  .deskbar-labels { display: none; }
  .db-thumb-hover { display: none; }

  .registry-entry { grid-template-columns: 45px 1fr auto; }
  .reg-detail { grid-column: 1 / -1; margin-top: 0.25rem; }

  .orgchart { transform: scale(0.9); }

  .connect-links { flex-direction: column; align-items: center; gap: 1rem; }
  .callout-row { gap: 0.5rem; }
  .callout { font-size: 0.7rem; padding: 0.3rem 0.75rem; }

  .section-dark, .section-light { padding: 4rem 0; }
}

/* --- Auto dark mode for light sections --- */
@media (prefers-color-scheme: dark) {
  .section-light {
    background: #181818;
    color: #e8e8e8;
  }
  .section-light .section-sub { color: #999; }
  .section-light .stat-num { color: #e8e8e8; }
  .section-light .stat-label { color: #737373; }
  .section-headline-dark { color: #e8e8e8; }

  /* Showcase cards */
  .showcase-card {
    background: #1f1f1f;
    border-color: #333;
  }
  .showcase-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
  .showcase-card h3 { color: #e8e8e8; }
  .showcase-card h3 a { color: #e8e8e8; }
  .showcase-card > p { color: #999; }

  /* Before/after panels (Engram) */
  .ba-before { background: #1c1111; }
  .ba-after { background: #111c14; }
  .ba-label-bad { background: #4c1111; color: #fca5a5; }
  .ba-label-good { background: #11402a; color: #86efac; }

  /* Callout row on light bg */
  .callout-row-light .callout {
    background: #1f1f1f;
    border-color: #333;
    color: #e8e8e8;
  }

  /* Story section */
  .story-section-bg { border-top-color: #333; }
  .story-graf { color: #d4d4d4; }
  .story-graf-em { color: #e8e8e8; }

  /* Registry mockup (Engram) */
  .registry-mockup { background: #1a1a1a; border-color: #333; }
  .registry-header { background: #222; color: #e8e8e8; border-bottom-color: #333; }
  .registry-entry { border-bottom-color: #2a2a2a; }
  .reg-name { color: #d4d4d4; }
  .reg-detail { color: #999; }

  /* Showcase demo areas */
  .showcase-demo { background: #111; border-bottom-color: #333; }

  /* Dashboard mock (office-automation card) */
  .dashboard-mock { background: #111; }
  .dash-value { color: #e8e8e8; }
  .dash-green { color: #4ade80; }
  .dash-unit { color: #737373; }
  .dash-present { background: #11402a; color: #86efac; }

  /* Taskbar mock */
  .taskbar-mock { background: #111; border-color: #333; }
  .tb-btn { background: #1a1a1a; border-color: #333; color: #d4d4d4; }
  .tb-thumb { background: #1a1a1a; border-color: #333; }
  .tb-thumb-inner { background: #222; color: #737373; }

  /* Specialist grid (health retreat card) */
  .specialist { background: #1a1a1a; border-color: #333; color: #d4d4d4; }
  .sp-adversary { background: #2a1a1a; border-color: #4c1111; color: #fca5a5; }

  /* Engram demo */
  .eg-node { background: #1a1a1a; border-color: #2e2e2e; }
  .eg-watcher { background: #1e2a44; border-color: #2c3e63; }
  .eg-node-name { color: #93c5fd; }
  .eg-index-title { color: #737373; }
  .eg-index-row { color: #d4d4d4; }
  .eg-arrow, .eg-arrow-label, .eg-arrow-fan { color: #737373; }
  .eg-concept { background: #11402a; color: #86efac; border-color: #1f6b3f; }

  /* Engram before/after panels */
  .ba-panel { border-color: #333; }
  .ba-line { color: #d4d4d4; }
  .ba-dim { color: #737373; }
  .ba-bad { color: #fca5a5; }
  .ba-good { color: #86efac; }
  .ba-briefing { background: #111; border-color: #333; }
  .ba-warn { background: #4c1111; color: #fca5a5; }

  /* Engram registry */
  .reg-active { background: #11402a; color: #86efac; }
  .reg-dead { background: #4c1111; color: #fca5a5; }

  /* --- DeskBar dark mode --- */

  /* App-icon palette (muted for dark) */
  .dc-app-c { background: #3b2a0f; color: #fcd34d; border-color: #5a3f17; }
  .dc-app-s { background: #1e2a44; color: #93c5fd; border-color: #2c3e63; }
  .dc-app-v { background: #2b1e44; color: #c4b5fd; border-color: #3e2c63; }
  .dc-app-f { background: #2a2a2a; color: #d4d4d4; border-color: #3a3a3a; }

  /* Dock vs DeskBar comparison */
  .dc-before { background: #1c1111; }
  .dc-after { background: #111c14; }
  .dc-panel { border-color: #333; }
  .dc-label-bad { background: #4c1111; color: #fca5a5; }
  .dc-label-good { background: #11402a; color: #86efac; }
  .dc-line { color: #d4d4d4; }
  .dc-line em { color: #f5f5f5; }
  .dc-bad { color: #fca5a5; }
  .dc-good { color: #86efac; }
  .dc-dim { color: #737373; }

  .dc-winlist { background: #1a1a1a; border-color: #2e2e2e; }
  .dc-winrow { color: #d4d4d4; }
  .dc-winrow-active {
    background: rgba(59,130,246,0.18);
    box-shadow: inset 0 0 0 1px rgba(59,130,246,0.4);
    color: #93c5fd;
  }
  .dc-mini { color: #737373; }

  /* Big DeskBar mock — already dark, only minor tweaks */
  .deskbar-stage-caption { color: #737373; }
  .deskbar-fullbar {
    background: linear-gradient(180deg, #232323, #161616);
    border-color: #000;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .deskbar-labels { color: #737373; }

  /* Switcher mock */
  .switcher-mock { background: #1a1a1a; border-color: #333; }
  .switcher-kbd { background: #262626; border-color: #404040; color: #d4d4d4; }
  .switcher-plus { color: #737373; }
  .switcher-label { color: #999; }
  .sw-card { background: #1f1f1f; border-color: #2e2e2e; }
  .sw-card-active {
    background: rgba(59,130,246,0.1);
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
  }
  .sw-preview { background: #262626; border-color: #333; }
  .sw-preview-c { background: linear-gradient(135deg, #3b2a0f, #2a1f0a); border-color: #5a3f17; }
  .sw-preview-s { background: linear-gradient(135deg, #1e2a44, #14202e); border-color: #2c3e63; }
  .sw-preview-v { background: linear-gradient(135deg, #2b1e44, #1d142e); border-color: #3e2c63; }
  .sw-pv-bar, .sw-pv-line { background: rgba(255,255,255,0.18); }
  .sw-meta { color: #d4d4d4; }
  .switcher-caption { color: #999; }

  /* --- Office Automate dark mode --- */
  .oa-dashboard { background: #1a1a1a; border-color: #333; box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
  .oa-dash-title { color: #999; }
  .oa-dash-presence { background: #11402a; color: #86efac; }
  .oa-tile { background: #232323; border-color: #2e2e2e; }
  .oa-tile-val { color: #e8e8e8; }
  .oa-good { color: #4ade80; }
  .oa-tile-unit { color: #737373; }
  .oa-strip { border-color: #2e2e2e; }
  .oa-strip-label { color: #737373; }
  .oa-strip-val { color: #d4d4d4; }
  .oa-leverage-title { color: #d4d4d4; }
  .oa-leverage-time { color: #93c5fd; }
  .oa-lev-row { border-color: #2e2e2e; }
  .oa-lev-name { color: #e8e8e8; }
  .oa-lev-commits, .oa-lev-sessions { color: #999; }
  .oa-lev-chip { background: #1e2a44; color: #93c5fd; }

  .oa-loop-col { background: #1a1a1a; border-color: #2e2e2e; }
  .oa-loop-col-state {
    background: linear-gradient(180deg, #14202e, #1e2a44);
    border-color: #2c3e63;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
  }
  .oa-loop-label { color: #737373; }
  .oa-loop-label-key { color: #93c5fd; }
  .oa-loop-item { color: #d4d4d4; }
  .oa-loop-out { color: #86efac; }
  .oa-loop-state-line { color: #e8e8e8; }
  .oa-loop-state-sub { color: #999; }
  .oa-loop-arrow { color: #525252; }
  .oa-loop-caption { color: #93c5fd; }
}