/* Extracted from public/index.html on 2026-05-27 during public/ rebuild. */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            /* Surfaces */
            --bg: #f7f5f0;
            --bg-panel: #f0ede6;
            --bg-card: #ffffff;
            --bg-inset: #ede9e2;
            --border: #e7e5e0;

            /* Text — muted bumped from #a8a29e (2.4:1) to hit AA on bg */
            --text-primary: #1c1917;
            --text-secondary: #78716c;
            --text-muted: #807a72;

            /* Accent — single chromatic; reserve washes for selected state */
            --accent: #059669;
            --accent-hover: #047857;
            --accent-light: rgba(5, 150, 105, 0.12);
            --accent-ring: rgba(5, 150, 105, 0.4);

            /* Viz semantic palette — warm = source/upstream, cool = process,
               accent = reconciled. Multi-source vizs (ZAIS) use warm/warm-deep/cool
               for three sources so the palette stays in family. */
            --viz-warm: #b45309;
            --viz-warm-fill: rgba(180, 83, 9, 0.16);
            --viz-warm-deep: #7c2d12;
            --viz-warm-deep-fill: rgba(124, 45, 18, 0.16);
            --viz-cool: #1f617d;
            --viz-cool-fill: rgba(31, 97, 125, 0.16);
            --viz-accent: var(--accent);
            --viz-accent-fill: var(--accent-light);

            /* Keyword + tag (Phase 4 will rework usage; tokens kept until then) */
            --kw-bg: rgba(5, 150, 105, 0.09);
            --kw-text: #047857;
            --pill-bg: rgba(5, 150, 105, 0.08);
            --pill-text: #059669;
            --pill-border: rgba(5, 150, 105, 0.22);
            --tag-text: var(--text-secondary);
            --tag-border: var(--border);

            /* Tooltip */
            --tooltip-bg: #1c1917;
            --tooltip-text: #f5f3ef;

            /* Type scale — 6 steps */
            --fs-xs: 0.7rem;
            --fs-sm: 0.78rem;
            --fs-base: 0.88rem;
            --fs-md: 0.95rem;
            --fs-lg: 1.15rem;
            --fs-xl: 1.9rem;

            /* Line heights */
            --lh-tight: 1.2;
            --lh-snug: 1.45;
            --lh-relaxed: 1.6;

            /* Tracking */
            --tracking-eyebrow: 0.08em;

            /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32) */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 24px;
            --space-6: 32px;

            /* Radii */
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;

            /* Button physical depth */
            --btn-depth: 3px;
            --btn-depth-sm: 2px;

            --shadow-color: 150deg 15% 30%;
            --shadow-low:
                0 1px 2px hsl(var(--shadow-color) / 0.18),
                0 2px 4px hsl(var(--shadow-color) / 0.12);
            --shadow-medium:
                0 2px 4px hsl(var(--shadow-color) / 0.14),
                0 4px 8px hsl(var(--shadow-color) / 0.12),
                0 8px 16px hsl(var(--shadow-color) / 0.10),
                0 12px 24px hsl(var(--shadow-color) / 0.07);
            --shadow-high:
                0 4px 8px hsl(var(--shadow-color) / 0.12),
                0 8px 16px hsl(var(--shadow-color) / 0.11),
                0 16px 32px hsl(var(--shadow-color) / 0.09),
                0 24px 48px hsl(var(--shadow-color) / 0.07),
                0 32px 64px hsl(var(--shadow-color) / 0.05);
            --shadow-pressed:
                inset 2px 2px 6px hsl(var(--shadow-color) / 0.28),
                inset -1px -1px 4px hsl(0deg 0% 100% / 0.5);
            --shadow-hover:
                0 6px 12px hsl(var(--shadow-color) / 0.16),
                0 12px 24px hsl(var(--shadow-color) / 0.13),
                0 20px 40px hsl(var(--shadow-color) / 0.09);
            --shadow-inset:
                inset 0 2px 6px hsl(var(--shadow-color) / 0.18),
                inset 0 1px 2px hsl(var(--shadow-color) / 0.12);
            --bevel-highlight: inset 0 1px 0 hsl(0deg 0% 100% / 0.65);
            --bevel-highlight-strong: inset 0 2px 0 hsl(0deg 0% 100% / 0.8);

            /* Surface elevations — apply as box-shadow */
            --surface-resting: var(--shadow-low), var(--bevel-highlight);
            --surface-floating: var(--shadow-medium), var(--bevel-highlight);
            --surface-pressed: var(--shadow-pressed);

            --panel-width: 300px;
            --transition-press: 34ms ease;
        }

        [data-theme="dark"] {
            --bg: #1a1814;
            --bg-panel: #141210;
            --bg-card: #2a2720;
            --bg-inset: #18160f;
            --border: #3d3a34;

            --text-primary: #f5f3ef;
            --text-secondary: #a8a29e;
            --text-muted: #928980;

            --accent: #10b981;
            --accent-hover: #34d399;
            --accent-light: rgba(16, 185, 129, 0.18);
            --accent-ring: rgba(16, 185, 129, 0.4);

            --viz-warm: #d97706;
            --viz-warm-fill: rgba(217, 119, 6, 0.22);
            --viz-warm-deep: #c2410c;
            --viz-warm-deep-fill: rgba(194, 65, 12, 0.22);
            --viz-cool: #5a9bb8;
            --viz-cool-fill: rgba(90, 155, 184, 0.22);

            --kw-bg: rgba(16, 185, 129, 0.12);
            --kw-text: #34d399;
            --pill-bg: rgba(16, 185, 129, 0.2);
            --pill-text: #34d399;
            --pill-border: rgba(16, 185, 129, 0.4);

            --tooltip-bg: #f5f3ef;
            --tooltip-text: #1c1917;

            --shadow-color: 0deg 0% 0%;
            --bevel-highlight: inset 0 1px 0 hsl(40deg 30% 80% / 0.10);
            --bevel-highlight-strong: inset 0 2px 0 hsl(40deg 30% 80% / 0.12);
        }

        html {
            scroll-behavior: smooth;
            /* Reserve vertical-scrollbar gutter at all times so the fixed
               bottom bar's width stays identical across short (About) and
               tall (Netrias/ZAIS/Medtronic) panel states. */
            scrollbar-gutter: stable;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg);
            color: var(--text-primary);
            line-height: 1.6;
            min-height: 100vh;
            transition: background 0.3s, color 0.3s;
            /* Safety net against any descendant (tooltip pseudo, viz overflow,
               long unbreakable tokens) forcing a horizontal scroll on mobile. */
            overflow-x: clip;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* Noise texture overlay — light mode only. In dark mode the overlay
           produces a brownish haze rather than a subtle texture. */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.025;
            filter: url(#noise);
        }
        [data-theme="dark"] body::before { display: none; }

        /* Noise SVG filter (hidden) */
        #noise-filter { position: fixed; width: 0; height: 0; }

        /* ========== FOCUS STYLES ========== */
        :focus-visible {
            outline: 3px solid var(--accent);
            outline-offset: 4px;
            border-radius: var(--radius-sm);
        }

        /* ========== SHARED UTILITIES ========== */

        /* Eyebrow — every "small-caps metadata label" shares one definition */
        .identity-title,
        .role-label,
        .section-label,
        .ref-row dt {
            font-size: var(--fs-xs);
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: var(--tracking-eyebrow);
            line-height: 1.3;
        }

        /* Tag — pill-shaped metadata token. Tones via modifier classes. */
        .tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: var(--fs-xs);
            font-weight: 600;
            padding: 2px var(--space-2);
            border-radius: 999px;
            color: var(--tag-text);
            border: 1px solid var(--tag-border);
            background: transparent;
            line-height: 1.3;
        }
        .tag--accent {
            color: var(--kw-text);
            border-color: color-mix(in srgb, var(--accent) 26%, transparent);
            background: color-mix(in srgb, var(--accent) 5%, transparent);
        }
        .tag--status::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
        }

        /* Viz figure — shared frame around every visualization */
        .viz-figure {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--surface-resting);
            padding: var(--space-4);
            overflow: hidden;
        }
        .viz-figure .viz-container {
            background: transparent;
            height: auto;
            min-height: 300px;
        }
        .viz-figure .viz-label {
            color: var(--text-secondary);
            font-style: normal;
            font-size: var(--fs-sm);
            text-align: center;
            margin: 0;
            line-height: var(--lh-snug);
        }

        /* ========== LAYOUT ========== */

        .workbench {
            display: flex;
            min-height: 100vh;
            align-items: flex-start;
        }

        /* ========== LEFT PANEL ========== */

        .left-panel {
            width: var(--panel-width);
            flex-shrink: 0;
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            padding: 24px 20px;
            gap: 0;
            background: linear-gradient(160deg, var(--bg-panel) 0%, color-mix(in srgb, var(--bg-panel) 85%, var(--bg) 15%) 100%);
            box-shadow: var(--shadow-medium), var(--bevel-highlight), 4px 0 20px -4px hsl(var(--shadow-color) / 0.3);
            border-right: 1px solid var(--border);
            z-index: 10;
        }

        .left-panel::-webkit-scrollbar { width: 4px; }
        .left-panel::-webkit-scrollbar-track { background: transparent; }
        .left-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

        /* Identity section */
        .identity {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding-bottom: 18px;
            gap: 10px;
        }

        .photo-wrap {
            width: 200px;
            height: 200px;
            border-radius: var(--radius-xl);
            overflow: hidden;
            /* --border adapts to theme; --bg-card was stark white in light + dissolved in dark */
            border: 2px solid var(--border);
            flex-shrink: 0;
            position: relative;
            box-shadow: var(--shadow-medium), 0 0 0 1px hsl(var(--shadow-color) / 0.12);
            transition: box-shadow 0.35s ease;
        }

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

        .photo-wrap:hover {
            box-shadow: var(--shadow-high), 0 0 0 1px hsl(var(--shadow-color) / 0.22);
        }

        .identity-name {
            font-size: var(--fs-lg);
            font-weight: 700;
            color: var(--text-primary);
            line-height: var(--lh-tight);
            margin-top: var(--space-1);
        }

        .identity-title {
            /* font-size / weight / color / transform / tracking from shared eyebrow rule */
        }

        .identity-tagline {
            font-size: var(--fs-sm);
            color: var(--text-secondary);
            line-height: var(--lh-snug);
        }

        /* Links */
        .panel-links {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding-bottom: 16px;
        }

        .panel-link {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-md);
            text-decoration: none;
            font-size: var(--fs-sm);
            font-weight: 500;
            color: var(--text-secondary);
            background: linear-gradient(160deg, var(--bg-card) 0%, color-mix(in srgb, var(--bg-card) 90%, var(--bg-panel) 10%) 100%);
            box-shadow: var(--surface-resting);
            border-bottom: var(--btn-depth-sm) solid hsl(var(--shadow-color) / 0.18);
            transition: all 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
        }

        .panel-link:hover {
            color: var(--accent);
            box-shadow: var(--shadow-hover), var(--bevel-highlight);
            transform: translateY(-1px);
            border-bottom-color: hsl(var(--shadow-color) / 0.12);
        }

        .panel-link:active {
            transform: translateY(1px);
            box-shadow: var(--shadow-pressed);
            border-bottom-width: 0;
            transition: all var(--transition-press);
        }

        .panel-link-icon {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .panel-link-icon svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* Divider */
        .panel-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--border), transparent);
            margin: 4px 0 14px;
        }

        /* Role selector label (eyebrow shared rule covers type) */
        .role-label {
            padding-left: 2px;
            margin-bottom: var(--space-2);
        }

        /* Role buttons */
        .role-buttons {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        /* Sidebar nav items — same surface treatment as .panel-link:
           gradient fill, resting shadow, depth border, and lift on hover. */
        .role-btn {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            padding: var(--space-3) var(--space-3);
            border-radius: var(--radius-md);
            cursor: pointer;
            text-align: left;
            text-decoration: none;
            color: inherit;
            background: linear-gradient(160deg, var(--bg-card) 0%, color-mix(in srgb, var(--bg-card) 90%, var(--bg-panel) 10%) 100%);
            box-shadow: var(--surface-resting);
            border-bottom: var(--btn-depth-sm) solid hsl(var(--shadow-color) / 0.18);
            transition: all 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
            position: relative;
            font-family: inherit;
        }

        .role-btn:hover {
            box-shadow: var(--shadow-hover), var(--bevel-highlight);
            transform: translateY(-1px);
            border-bottom-color: hsl(var(--shadow-color) / 0.12);
        }

        .role-btn:active {
            transform: translateY(1px);
            box-shadow: var(--shadow-pressed);
            border-bottom-width: 0;
            transition: all var(--transition-press);
        }

        .role-btn.selected {
            background: linear-gradient(160deg, var(--accent-light) 0%, color-mix(in srgb, var(--accent-light) 70%, var(--bg-panel) 30%) 100%);
            box-shadow: var(--surface-pressed);
            border-bottom-width: 0;
            transform: translateY(0);
        }

        .role-btn.selected .role-company {
            color: var(--accent);
        }

        .role-company {
            font-size: var(--fs-base);
            font-weight: 700;
            color: var(--text-primary);
            transition: color 0.2s;
        }

        .role-dates {
            font-size: var(--fs-xs);
            color: var(--text-muted);
            font-weight: 500;
        }

        .role-summary {
            font-size: var(--fs-sm);
            color: var(--text-secondary);
            line-height: var(--lh-snug);
            margin-top: 2px;
        }

        .about-paragraph {
            font-size: var(--fs-md);
            line-height: 1.7;
            color: var(--text-secondary);
            max-width: 760px;
            text-align: justify;
            margin: 0 auto;
        }

        .about-reference {
            display: flex;
            flex-direction: column;
            gap: 22px;
            padding-top: 4px;
            max-width: 760px;
            margin: 0 auto;
        }

        .about-education {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ref-rows {
            display: flex;
            flex-direction: column;
        }

        .ref-row {
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: var(--space-4);
            padding: var(--space-2) 0;
            border-top: 1px solid var(--border);
            align-items: baseline;
        }

        .ref-row:last-child { border-bottom: 1px solid var(--border); }

        .ref-row dt {
            /* Eyebrow type from shared rule */
        }

        .ref-row dd {
            font-size: var(--fs-base);
            color: var(--text-primary);
            margin: 0;
            line-height: var(--lh-snug);
        }

        .ref-row dd .ref-sub {
            display: block;
            font-size: var(--fs-sm);
            color: var(--text-muted);
            margin-top: 2px;
        }

        .about-paragraph strong {
            color: var(--text-primary);
            font-weight: 600;
        }

        /* Chord diagram */
        .about-chord { max-width: 860px; margin: 0 auto; }
        .about-chord svg { display: block; width: 100%; max-width: 860px; margin: 0 auto; }
        .about-chord .chord-link {
            fill: none;
            stroke: var(--text-secondary);
            stroke-opacity: 0.22;
            stroke-width: 1;
            transition: stroke 0.15s, stroke-opacity 0.15s, stroke-width 0.15s;
            pointer-events: none;
        }
        .about-chord .chord-link.dim { stroke-opacity: 0.04; }
        .about-chord .chord-link.hi { stroke: var(--accent); stroke-opacity: 0.9; stroke-width: 2.25; }
        .about-chord .chord-link.hi-netrias  { stroke: #059669; }
        .about-chord .chord-link.hi-zais     { stroke: #d97706; }
        .about-chord .chord-link.hi-medtronic{ stroke: #7c3aed; }
        [data-theme="dark"] .about-chord .chord-link.hi-netrias  { stroke: #34d399; }
        [data-theme="dark"] .about-chord .chord-link.hi-zais     { stroke: #fbbf24; }
        [data-theme="dark"] .about-chord .chord-link.hi-medtronic{ stroke: #a78bfa; }
        .about-chord .chord-label {
            font-size: 12px;
            fill: var(--text-primary);
            cursor: default;
            transition: fill 0.12s, font-weight 0.12s, opacity 0.12s;
            pointer-events: none;
        }
        .about-chord .chord-label.dim { fill: var(--text-muted); opacity: 0.5; }
        .about-chord .chord-label.hi { fill: var(--accent); font-weight: 600; opacity: 1; }
        .about-chord .chord-dot { transition: stroke-width 0.12s; cursor: pointer; }
        .about-chord .chord-hit { cursor: pointer; }
        .about-chord .chord-legend {
            display: flex;
            gap: 18px;
            font-size: var(--fs-xs);
            color: var(--text-secondary);
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
        }
        .about-chord .chord-legend-item { display: flex; align-items: center; gap: 6px; }
        .about-chord .chord-legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

        .about-education {
            margin-top: 24px;
        }

        .education-degree {
            color: var(--text-primary);
            font-weight: 600;
            font-size: var(--fs-md);
            line-height: 1.35;
        }

        .education-school {
            color: var(--text-secondary);
            font-size: var(--fs-base);
            line-height: var(--lh-snug);
            margin-top: var(--space-1);
        }

        /* Dark mode toggle */
        .dark-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: auto;
            padding: 10px 12px;
            border-radius: 8px;
            background: linear-gradient(160deg, var(--bg-card) 0%, color-mix(in srgb, var(--bg-card) 88%, var(--bg-panel) 12%) 100%);
            box-shadow: var(--shadow-low), var(--bevel-highlight);
            border-bottom: 2px solid hsl(var(--shadow-color) / 0.16);
            cursor: pointer;
            user-select: none;
            border: none;
            width: 100%;
            font-family: inherit;
        }

        .dark-toggle:hover { box-shadow: var(--shadow-medium), var(--bevel-highlight); }
        .dark-toggle:active { box-shadow: var(--shadow-pressed); transition: all var(--transition-press); }

        .dark-toggle-label {
            font-size: var(--fs-sm);
            color: var(--text-secondary);
            font-weight: 500;
        }

        .toggle-track {
            width: 36px;
            height: 20px;
            border-radius: 10px;
            /* Subtle muted-accent tint so the off state reads as "live switch", not disabled */
            background: color-mix(in srgb, var(--text-muted) 28%, transparent);
            position: relative;
            transition: background 0.25s;
            box-shadow: var(--shadow-inset);
            border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent);
        }

        [data-theme="dark"] .toggle-track {
            background: var(--accent);
            border-color: color-mix(in srgb, var(--accent) 60%, transparent);
        }

        .toggle-thumb {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: white;
            position: absolute;
            top: 2px;
            left: 2px;
            transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }

        [data-theme="dark"] .toggle-thumb { transform: translateX(16px); }

        /* ========== RIGHT CANVAS ========== */

        /* Centers content in the available space after the left panel. */
        .canvas-wrap {
            flex: 1;
            min-width: 0;
            display: flex;
            justify-content: center;
            align-self: stretch;
        }

        .right-canvas {
            width: 100%;
            max-width: 1040px;
            padding: 48px 56px 64px 56px;
            display: flex;
            flex-direction: column;
            gap: var(--space-6);
            position: relative;
        }

        /* Role header — end-align so the smaller date sits on the heading's
           baseline-equivalent edge, not floated on the cap line. */
        .canvas-header {
            display: flex;
            align-items: flex-end;
            gap: var(--space-3) var(--space-4);
            flex-wrap: wrap;
        }
        .canvas-role-dates {
            padding-bottom: 4px;
        }

        .canvas-role-name {
            font-size: var(--fs-xl);
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        .canvas-role-dates {
            font-size: var(--fs-base);
            color: var(--text-muted);
            font-weight: 500;
        }

        /* Visualization container — content-driven height with per-viz
           aspect ratios applied via id selectors below. */
        .viz-container {
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
        }
        #viz-netrias { aspect-ratio: 16 / 7; min-height: 280px; max-height: 480px; }
        #viz-zais    { aspect-ratio: 16 / 8; min-height: 560px; max-height: 640px; }

        .viz-container svg,
        .viz-container canvas { display: block; position: relative; }


        /* DBS context intro (Medtronic) */
        .dbs-intro {
            font-size: var(--fs-base);
            line-height: var(--lh-relaxed);
            color: var(--text-secondary);
            text-align: justify;
            margin-bottom: 24px;
        }
        .dbs-intro a {
            color: var(--accent);
            text-decoration-color: rgba(5, 150, 105, 0.3);
            text-underline-offset: 2px;
            transition: text-decoration-color 180ms ease;
        }
        .dbs-intro a:hover {
            text-decoration-color: var(--accent);
        }

        .viz-label {
            font-size: var(--fs-sm);
            color: var(--text-secondary);
            text-align: center;
            margin-top: -8px;
            line-height: var(--lh-snug);
        }

        /* Section label — eyebrow shared rule covers type. Border-left removed
           to demote accent on decorative roles (kept only for active state). */
        .section-label {
            padding-left: 0;
        }

        /* Projects grid — auto-fit so sparse cards don't leave 50% gaps,
           and ragged bullet counts don't force aligned rows. */
        .projects-section { display: flex; flex-direction: column; gap: var(--space-3); }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: var(--space-3);
            align-items: stretch;
        }

        .project-card {
            padding: var(--space-4);
            border-radius: var(--radius-lg);
            background: linear-gradient(160deg, var(--bg-card) 0%, color-mix(in srgb, var(--bg-card) 90%, var(--bg) 10%) 100%);
            box-shadow: var(--surface-resting);
            border: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }

        .project-card:hover {
            box-shadow: var(--surface-floating);
            transform: translateY(-1px);
        }

        .project-name {
            font-size: var(--fs-md);
            font-weight: 700;
            color: var(--text-primary);
        }

        .project-team {
            font-size: var(--fs-sm);
            color: var(--text-muted);
        }

        /* Highlights consulting / invited engagements separately from regular team affiliations,
           so a reader sees at a glance that the work was a requested external engagement. */
        .engagement-tag {
            display: inline-block;
            font-size: var(--fs-xs);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: var(--tracking-eyebrow);
            color: var(--kw-text);
            background: var(--accent-light);
            padding: 2px var(--space-2);
            border-radius: var(--radius-sm);
            margin-right: 6px;
            vertical-align: 1px;
        }

        .project-tech {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            order: 1;
            margin-top: auto;
        }

        /* Demoted: neutral pill so accent green is reserved for selected/interactive.
           Pills that match a CAREER tech get cursor + hover to signal chord deep-link. */
        .tech-pill {
            font-size: var(--fs-xs);
            font-weight: 600;
            padding: 2px var(--space-2);
            border-radius: 999px;
            color: var(--text-secondary);
            border: 1px solid var(--border);
            background: transparent;
            line-height: 1.4;
        }
        .tech-pill.linked {
            cursor: pointer;
            transition: border-color 0.15s, color 0.15s;
        }
        .tech-pill.linked:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .project-bullets {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .project-bullets li {
            font-size: var(--fs-sm);
            color: var(--text-secondary);
            padding-left: 14px;
            position: relative;
            line-height: var(--lh-snug);
            /* Long hyphenated kw terms (e.g. "dependency-injection framework")
               otherwise refuse to break and push the bullet past narrow viewports. */
            overflow-wrap: anywhere;
        }

        /* Demoted: bullet uses muted dot, not accent green */
        .project-bullets li::before {
            content: '';
            position: absolute;
            left: 2px;
            top: 8px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--text-muted);
            opacity: 0.6;
        }

        /* Milestones */
        .milestones-section {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .milestones-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .milestone-item {
            display: flex;
            align-items: flex-start;
            gap: var(--space-3);
            font-size: var(--fs-sm);
            color: var(--text-secondary);
        }

        .milestone-date {
            font-size: var(--fs-xs);
            font-weight: 700;
            color: var(--text-muted);
            min-width: 40px;
            flex-shrink: 0;
            margin-top: 2px;
            font-variant-numeric: tabular-nums;
            letter-spacing: var(--tracking-eyebrow);
        }

        .milestone-item a {
            color: var(--text-primary);
            text-decoration: underline;
            text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
            text-decoration-thickness: 1px;
            text-underline-offset: 3px;
        }

        .milestone-item a:hover {
            text-decoration-color: var(--accent);
        }

        /* ========== CANVAS CONTENT ========== */

        .canvas-content {
            display: none;
            flex-direction: column;
            gap: 32px;
        }

        .canvas-content.active {
            display: flex;
        }

        /* ========== KEYWORDS ========== */

        /* .kw — inline term with a definition. Dotted underline only;
           tooltip appears on hover or focus (Phase 5 made it focusable). */
        .kw {
            color: inherit;
            background: transparent;
            padding: 0;
            font: inherit;
            font-weight: 600;
            border: 0;
            border-bottom: 1px dotted color-mix(in srgb, var(--accent) 55%, transparent);
            cursor: help;
            position: relative;
        }

        .kw::after {
            content: attr(data-tip);
            display: none;
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: var(--tooltip-bg);
            color: var(--tooltip-text);
            font-size: var(--fs-xs);
            font-weight: 400;
            padding: 6px 10px;
            border-radius: var(--radius-sm);
            white-space: normal;
            width: max-content;
            max-width: min(280px, 80vw);
            text-align: center;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.15s;
            z-index: 100;
            box-shadow: var(--shadow-medium);
            line-height: var(--lh-snug);
        }

        .kw:hover::after,
        .kw:focus-visible::after {
            display: block;
            opacity: 1;
        }
        .kw:focus-visible { outline-offset: 2px; }

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

        /* On desktop the wrapper is invisible — children flow as direct
           siblings of the surrounding sidebar sections. */
        .nav-tabs { display: contents; }

        /* Workbench responsive breakpoint. */
        @media (max-width: 860px) {
            :root { --panel-width: 100%; }

            .workbench { flex-direction: column; }

            .left-panel {
                width: 100%;
                height: auto;
                position: static;
                flex-direction: column;
                /* Clear desktop scroll-container styles. A scroll container
                   ancestor can interact badly with fixed-positioned children
                   in older WebKit, and on mobile the panel doesn't scroll
                   internally — the document does. */
                overflow: visible;
            }

            /* Mobile: photo + name stack horizontally so the page reaches
               the first tab without 250px of identity scrolling. */
            .identity {
                flex-direction: row;
                align-items: center;
                text-align: left;
                gap: var(--space-3);
            }
            .photo-wrap { width: 80px; height: 80px; border-radius: var(--radius-lg); }
            .identity-name { margin-top: 0; }

            /* Bottom tab bar — pulls the four tabs and About into a fixed
               thumb-reach surface so section switching no longer requires
               scrolling back to the top of document. */
            .nav-tabs {
                display: flex;
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 100;
                gap: 0;
                padding: var(--space-2) var(--space-2);
                padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
                background: var(--bg-panel);
                border-top: 1px solid var(--border);
                box-shadow: 0 -4px 16px hsl(var(--shadow-color) / 0.18), var(--bevel-highlight);
                /* Force a compositor layer so iOS Safari pins the bar to the
                   visual viewport reliably across tab-switch reflows and
                   dynamic-toolbar viewport shifts. */
                transform: translateZ(0);
                will-change: transform;
            }
            /* Suppress sidebar-only chrome inside the bar (dividers, label). */
            .nav-tabs .panel-divider,
            .nav-tabs .role-label { display: none; }
            /* role-buttons becomes a flex strip of equal-width items sharing
               the bar with the About button. */
            .nav-tabs .role-buttons {
                display: flex;
                flex-direction: row;
                gap: var(--space-1);
                flex: 4;
                min-width: 0;
            }
            .nav-tabs .role-btn {
                flex: 1 1 0;
                min-width: 0;
                padding: var(--space-2) var(--space-1);
                align-items: center;
                text-align: center;
                gap: 0;
                border-radius: var(--radius-md);
            }
            .nav-tabs .role-btn--about { flex: 1 1 0; margin: 0 var(--space-1) 0 0; }
            .nav-tabs .role-btn .role-company {
                font-size: var(--fs-xs);
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
            }
            /* Dates and summaries don't fit in a thumb-bar tile. */
            .nav-tabs .role-btn .role-dates,
            .nav-tabs .role-btn .role-summary { display: none; }

            /* Reserve space at the bottom of the canvas so the fixed bar
               does not occlude the last block of content. */
            .right-canvas {
                padding: var(--space-5) var(--space-5);
                padding-bottom: calc(76px + env(safe-area-inset-bottom));
                max-width: none;
                margin: 0;
            }

            .canvas-content.exiting {
                position: static;
                top: auto;
                left: auto;
                right: auto;
            }

            .projects-grid { grid-template-columns: 1fr; }

            /* Hide vizs that don't read well at phone widths. ZAIS lane labels
               crowd into pills; the Netrias chord/table animation is too dense
               to parse below 400px. Surrounding section text stays visible. */
            #content-zais .viz-figure,
            #content-netrias .viz-figure { display: none; }

            /* System `prefers-color-scheme` already drives the theme on init,
               so a manual toggle is redundant on phones — hide it to reclaim
               sidebar space. The element stays in the DOM so the JS guard
               (`if (!btn) return;`) and the nav-bar reparenting insertion
               reference both continue to work. */
            .dark-toggle { display: none; }

            /* Stack the role title above its date range. The desktop layout
               end-aligns a small date span to the H2 baseline, which on phone
               widths reads as an orphan floating bit beside the heading.
               Stacking vertically and left-aligning the date as a caption
               makes the header feel intentional at narrow widths. */
            .canvas-header {
                flex-direction: column;
                align-items: flex-start;
                gap: var(--space-1);
            }
            .canvas-role-dates {
                padding-bottom: 0;
                font-size: var(--fs-sm);
            }
        }

        @media (max-width: 540px) {
            .canvas-role-name { font-size: 1.4rem; }
            .right-canvas {
                padding: var(--space-4);
                padding-bottom: calc(76px + env(safe-area-inset-bottom));
            }
        }

        /* ========== REDUCED MOTION ========== */

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation: none !important;
                transition: none !important;
            }
            .project-card { transform: none !important; }
            .canvas-content { opacity: 1 !important; transform: none !important; }
            .canvas-content.exiting { display: none; }
        }

        /* ========== VIZ-SPECIFIC STYLES ========== */

        /* Netrias spreadsheet */
        .spreadsheet-cell {
            transition: fill 0.4s ease;
        }

        .cell-text {
            font-family: ui-monospace, "SF Mono", Menlo, monospace;
            font-size: 10px;
            transition: opacity 0.35s ease;
        }

        .check-mark {
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        /* ZAIS provenance tooltip — uses site tooltip tokens (no more amber-on-black). */
        .zais-tt {
            position: absolute;
            pointer-events: none;
            background: var(--tooltip-bg);
            color: var(--tooltip-text);
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-sm);
            font-size: 11.5px;
            line-height: var(--lh-snug);
            border: 1px solid transparent;
            box-shadow: var(--shadow-medium);
            opacity: 0;
            transition: opacity 0.12s ease;
            max-width: 280px;
            z-index: 10;
            font-family: ui-monospace, "SF Mono", Menlo, monospace;
        }
        .zais-tt.show { opacity: 1; }
        .zais-tt .tt-field { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 700; margin-bottom: var(--space-1); }
        .zais-tt .tt-row { display: flex; gap: var(--space-2); align-items: baseline; font-size: 11px; }
        .zais-tt .tt-row .tt-vendor { font-family: 'Inter', sans-serif; font-weight: 700; flex: 0 0 70px; }
        .zais-tt .tt-row .tt-value { flex: 1 1 auto; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
        .zais-tt .tt-row .tt-tag { font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 8px; }
        .zais-tt .tt-row.tt-primary .tt-tag { background: color-mix(in srgb, var(--tooltip-text) 18%, transparent); color: var(--tooltip-text); }
        .zais-tt .tt-row.tt-null    .tt-tag { background: color-mix(in srgb, var(--viz-warm-deep) 28%, transparent); color: var(--tooltip-text); }
        .zais-tt .tt-raw { font-size: 10px; color: color-mix(in srgb, var(--tooltip-text) 60%, transparent); margin-top: var(--space-1); font-family: ui-monospace, monospace; }

        /* ZAIS SVG element styles */
        #viz-zais svg .stage-band { fill: rgba(0,0,0,0.018); }
        #viz-zais svg .stage-divider { stroke: rgba(0,0,0,0.06); stroke-width: 1; }
        #viz-zais svg .stage-label { font-size: 11px; font-weight: 700; fill: var(--text-primary, #1c1917); }
        #viz-zais svg .stage-sub { font-size: 9.5px; font-weight: 500; fill: var(--text-muted, #57534e); }
        #viz-zais svg .lane-label { font-size: 11px; font-weight: 700; }
        #viz-zais svg .lane-line { stroke-width: 1; stroke-dasharray: 6 5; fill: none; }
        #viz-zais svg .pill-label { font-size: 8px; font-weight: 700; }
        #viz-zais svg .pill-value { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; font-weight: 700; }
        #viz-zais svg .grid-bg { fill: rgba(0,0,0,0.012); stroke: rgba(0,0,0,0.06); stroke-width: 1; }
        #viz-zais svg .cell-label { font-size: 8.5px; font-weight: 700; fill: var(--text-muted); }
        #viz-zais svg .cell-value { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 700; fill: var(--text-primary); }
        #viz-zais svg .cell-dash { fill: var(--text-muted); font-family: ui-monospace, monospace; font-size: 11px; font-weight: 500; }
        [data-theme="dark"] #viz-zais svg .stage-band { fill: rgba(255,255,255,0.020); }
        [data-theme="dark"] #viz-zais svg .stage-divider { stroke: rgba(255,255,255,0.07); }
        [data-theme="dark"] #viz-zais svg .grid-bg { fill: rgba(255,255,255,0.015); stroke: rgba(255,255,255,0.07); }

        /* Reset heading defaults so h1/h2/h3/h4 used for semantic structure
           don't override the visual styling defined on these classes. */
        h1.identity-name,
        h2.canvas-role-name,
        h3.section-label,
        h4.project-name {
            margin: 0;
            font-size: inherit;
            font-weight: inherit;
        }