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

        .nav-link, .mobile-nav-link {
            text-decoration: none;
        }

        :root {
            --color-hard: #2ec2ff;
            --color-hard-light: #E6F9FF;
            --color-hard-mid: #96DEFF;
            --color-soft: #37c43e;
            --color-soft-light: #EAFAEB;
            --color-soft-mid: #9ADDA0;
            --color-economic: #fdc103;
            --color-economic-light: #FFF8E0;
            --color-economic-mid: #FDDE70;
            --color-bg: #F7F8FA;
            --color-surface: #FFFFFF;
            --color-border: #E4E7EC;
            --color-border-light: #F0F2F5;
            --color-text-primary: #111827;
            --color-text-secondary: #4B5563;
            --color-text-tertiary: #9CA3AF;
            --color-text-muted: #D1D5DB;
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 14px;
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
            --transition-fast: 150ms ease;
            --transition-med: 250ms ease;
        }

        body {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--color-bg);
            color: var(--color-text-primary);
            overflow: hidden;
            height: 100vh;
            -webkit-font-smoothing: antialiased;
        }

        /* ─── Header ─── */
        .header {
            background: var(--color-surface);
            padding: 1.25rem 2rem;
            border-bottom: 1px solid var(--color-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 60px;
            position: relative;
            z-index: 50;
        }

        .header-brand {
            display: flex;
            flex-direction: column;
            gap: 0.125rem;
            text-decoration: none;
            color: inherit;
        }

        .header-brand:hover,
        .header-brand:visited,
        .header-brand:active {
            text-decoration: none;
            color: inherit;
        }

        .header h1 {
            font-family: 'Urbanist', sans-serif;
            font-size: 1.35rem;
            font-weight: 600;
            color: var(--color-text-primary);
            letter-spacing: -0.02em;
            line-height: 1.2;
        }

        .header-subtitle {
            font-size: 0.75rem;
            color: var(--color-text-tertiary);
            font-weight: 400;
            line-height: 1.35;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .header-meta {
            font-size: 0.75rem;
            color: var(--color-text-tertiary);
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        /* ─── Theme Toggle ─── */
        .theme-toggle {
            width: 32px;
            height: 32px;
            background: none;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-sm);
            cursor: pointer;
            padding: 0;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-text-tertiary);
            transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
            outline: none;
        }

        .theme-toggle:hover {
            color: var(--color-text-secondary);
            border-color: var(--color-text-tertiary);
            background: var(--color-bg);
        }

        .theme-toggle:focus-visible {
            box-shadow: 0 0 0 2px rgba(90, 69, 255, 0.3);
        }

        .theme-toggle svg {
            width: 16px;
            height: 16px;
        }

        .theme-toggle .icon-moon {
            display: none;
        }

        [data-theme="dark"] .theme-toggle .icon-sun {
            display: none;
        }

        [data-theme="dark"] .theme-toggle .icon-moon {
            display: block;
        }

        /* ─── Dark Mode ─── */
        [data-theme="dark"] {
            --color-bg: #111318;
            --color-surface: #1A1D24;
            --color-border: #2A2D35;
            --color-border-light: #22252D;
            --color-text-primary: #F0F1F3;
            --color-text-secondary: #A0A4AD;
            --color-text-tertiary: #6B7080;
            --color-text-muted: #3E4250;
            --color-hard: #2ec2ff;
            --color-hard-light: #072030;
            --color-hard-mid: #0D6080;
            --color-soft: #37c43e;
            --color-soft-light: #0C1F0D;
            --color-soft-mid: #1E7523;
            --color-economic: #fdc103;
            --color-economic-light: #231B02;
            --color-economic-mid: #A87F00;
        }

        [data-theme="dark"] .column::-webkit-scrollbar-thumb {
            background: #3E4250;
        }

        [data-theme="dark"] .column::-webkit-scrollbar-thumb:hover {
            background: #6B7080;
        }

        [data-theme="dark"] #splash {
            background: #22252E;
        }

        /* ─── Breadcrumb ─── */
        .breadcrumb {
            background: var(--color-surface);
            padding: 0 1.5rem;
            border-top: 1px solid var(--color-border);
            border-bottom: 1px solid var(--color-border);
            font-size: 0.8125rem;
            height: 42px;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 60;
            overflow: visible;
        }

        .breadcrumb::-webkit-scrollbar { display: none; }

        /* Viz Toggle */
        .viz-toggle {
            display: flex;
            align-items: center;
            gap: 0;
            margin-right: 0.75rem;
            flex-shrink: 0;
        }

        .viz-toggle-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 26px;
            border: 1px solid var(--color-border);
            background: transparent;
            color: var(--color-text-tertiary);
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast);
        }

        .viz-toggle-btn:first-child {
            border-radius: var(--radius-sm) 0 0 var(--radius-sm);
        }

        .viz-toggle-btn:last-child {
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        }

        .viz-toggle-btn + .viz-toggle-btn {
            border-left: none;
        }

        .viz-toggle-btn:hover {
            background: var(--color-bg);
            color: var(--color-text-primary);
        }

        .viz-toggle-btn.active {
            background: var(--color-bg);
            color: var(--color-text-primary);
        }

        /* Radial Container */
        body.radial-active {
            overflow: auto;
            height: auto;
            background: var(--color-surface);
        }

        body.radial-active .header {
            position: sticky;
            top: 0;
            z-index: 100;
        }

        body.radial-active:not(.overview-active) #splash {
            max-height: 42px;
            overflow: hidden;
            position: sticky;
            top: 60px;
            z-index: 95;
        }

        body.radial-active:not(.overview-active) #splash .splash-inner {
            display: none;
        }

        body.radial-active .breadcrumb {
            position: sticky;
            top: 102px;
            z-index: 90;
            background: var(--color-surface);
        }

        body.radial-active .footer {
            position: relative;
        }

        body.overview-active {
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
            background: var(--color-surface);
        }

        body.overview-active .header {
            flex-shrink: 0;
            z-index: 100;
        }

        body.overview-active #splash {
            flex-shrink: 0;
        }

        body.overview-active .breadcrumb {
            flex-shrink: 0;
            z-index: 90;
        }

        body.overview-active .footer {
            flex-shrink: 0;
            position: relative;
        }

        body.overview-active .container,
        body.overview-active .tree-container,
        body.overview-active .radial-container {
            display: none !important;
        }

        /* Overview Container */
        .overview-container {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.75rem;
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            background: var(--color-surface);
        }

        .ov-dimension {
            flex: 1;
            min-width: 0;
            border-radius: var(--radius-lg);
            padding: 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .ov-dimension.ov-hard { background: var(--color-hard-light); border: 2px solid var(--color-hard); }
        .ov-dimension.ov-soft { background: var(--color-soft-light); border: 2px solid var(--color-soft); }
        .ov-dimension.ov-economic { background: var(--color-economic-light); border: 2px solid var(--color-economic); }

        [data-theme="dark"] .ov-dimension.ov-hard { background: rgba(46, 194, 255, 0.1); }
        [data-theme="dark"] .ov-dimension.ov-soft { background: rgba(55, 196, 62, 0.1); }
        [data-theme="dark"] .ov-dimension.ov-economic { background: rgba(253, 193, 3, 0.1); }

        .ov-dim-title {
            font-weight: 800;
            font-size: 0.9375rem;
            text-transform: uppercase;
            letter-spacing: 0.02em;
            padding: 0 0.25rem;
            flex-shrink: 0;
        }

        .ov-hard .ov-dim-title { color: var(--color-text-primary); }
        .ov-soft .ov-dim-title { color: var(--color-text-primary); }
        .ov-economic .ov-dim-title { color: var(--color-text-primary); }

        .ov-domains {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .ov-domain {
            border-radius: var(--radius-md);
            padding: 0.5rem 0.625rem;
            flex-shrink: 0;
        }

        .ov-hard .ov-domain { background: rgba(46, 194, 255, 0.82); }
        .ov-soft .ov-domain { background: rgba(55, 196, 62, 0.82); }
        .ov-economic .ov-domain { background: rgba(253, 193, 3, 0.82); }

        .ov-domain-title {
            font-weight: 700;
            font-size: 0.8125rem;
            text-transform: uppercase;
            letter-spacing: 0.02em;
            margin-bottom: 0.375rem;
            padding-top: 0.25rem;
            padding-bottom: 0.15rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .ov-domain-count {
            font-size: 0.5625rem;
            font-weight: 600;
            padding: 0.1rem 0.35rem;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.25);
            color: #fff;
            flex-shrink: 0;
        }

        .ov-hard .ov-domain-title { color: #fff; }
        .ov-soft .ov-domain-title { color: #fff; }
        .ov-economic .ov-domain-title { color: #fff; }

        .ov-groups {
            display: flex;
            gap: 0.3rem;
        }

        .ov-groups-col {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            min-width: 0;
        }

        .ov-group {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.425rem 0.625rem;
            border-radius: var(--radius-sm);
            background: rgba(0, 0, 0, 0.25);
            cursor: pointer;
            transition: background var(--transition-fast), box-shadow var(--transition-fast);
            min-width: 0;
        }

        .ov-group:hover {
            background: rgba(0, 0, 0, 0.35);
        }

        .ov-group.ov-active {
            outline: 2px solid;
        }
        .ov-hard .ov-group.ov-active { outline-color: var(--color-hard); background: rgba(0, 0, 0, 0.35); }
        .ov-soft .ov-group.ov-active { outline-color: var(--color-soft); background: rgba(0, 0, 0, 0.35); }
        .ov-economic .ov-group.ov-active { outline-color: var(--color-economic); background: rgba(0, 0, 0, 0.35); }

        .ov-group-name {
            font-size: 0.6875rem;
            font-weight: 500;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            min-width: 0;
        }

        .ov-group-count {
            font-size: 0.5625rem;
            font-weight: 600;
            padding: 0.1rem 0.35rem;
            border-radius: 4px;
            flex-shrink: 0;
        }

        .ov-group-count {
            color: #fff;
            background: rgba(255, 255, 255, 0.2);
        }

        /* Expanded group wrap */
        .ov-group-wrap {
            min-width: 0;
        }

        .ov-group-wrap {
            position: relative;
        }

        .ov-group-wrap.ov-expanded .ov-group {
            border-radius: var(--radius-sm) var(--radius-sm) 0 0;
            font-weight: 600;
            border: 2px solid transparent;
            border-bottom: none;
            outline: none;
        }

        .ov-hard .ov-group-wrap.ov-expanded .ov-group { background: rgba(0, 0, 0, 0.35); border-color: var(--color-hard); }
        .ov-soft .ov-group-wrap.ov-expanded .ov-group { background: rgba(0, 0, 0, 0.35); border-color: var(--color-soft); }
        .ov-economic .ov-group-wrap.ov-expanded .ov-group { background: rgba(0, 0, 0, 0.35); border-color: var(--color-economic); }

        .ov-caps {
            position: fixed;
            z-index: 200;
            background: var(--color-surface);
            border-radius: 0 0 var(--radius-sm) var(--radius-sm);
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0;
            box-shadow: var(--shadow-md);
            border: 2px solid transparent;
            border-top: 1px solid var(--color-border-light);
        }

        .ov-caps.ov-caps-hard { border-color: var(--color-hard); border-top-color: var(--color-border-light); }
        .ov-caps.ov-caps-soft { border-color: var(--color-soft); border-top-color: var(--color-border-light); }
        .ov-caps.ov-caps-economic { border-color: var(--color-economic); border-top-color: var(--color-border-light); }

        .ov-cap {
            display: block;
            font-size: 0.6875rem;
            color: var(--color-text-secondary);
            text-decoration: none;
            padding: 0.4rem 0.625rem;
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .ov-cap:hover {
            color: var(--color-text-primary);
        }

        .ov-caps-hard .ov-cap:hover { background: var(--color-hard-light); }
        .ov-caps-soft .ov-cap:hover { background: var(--color-soft-light); }
        .ov-caps-economic .ov-cap:hover { background: var(--color-economic-light); }

        .ov-group-wrap.ov-dimmed {
            opacity: 0.65;
        }

        .ov-domain.ov-dimmed {
            opacity: 0.65;
        }

        .ov-dimension.ov-dimmed {
            opacity: 0.65;
        }

        /* Tree Container */
        .tree-container {
            width: 90%;
            margin: 0 auto;
            background: var(--color-surface);
            position: relative;
        }

        .tree-container svg {
            width: 100%;
            display: block;
            overflow: visible;
        }

        .tree-container .tree-link {
            fill: none;
            stroke-width: 1;
            stroke-opacity: 0.4;
        }

        .tree-container .tree-label {
            font-family: 'DM Sans', sans-serif;
            font-size: 11px;
            fill: var(--color-text-secondary);
        }

        .tree-container .tree-label-dimension {
            font-weight: 700;
            font-size: 13px;
        }

        .tree-container .tree-label-domain {
            font-weight: 700;
            font-size: 12px;
        }

        .tree-container .tree-label-group {
            font-weight: 600;
            font-size: 11px;
        }

        [data-theme="dark"] .tree-container .tree-link {
            stroke-opacity: 0.25;
        }

        .radial-container {
            width: 90%;
            margin: 0 auto;
            background: var(--color-surface);
            position: relative;
            overflow: visible;
        }

        .radial-container svg {
            width: 100%;
            display: block;
        }

        .radial-container .node-label {
            font-family: 'DM Sans', sans-serif;
            font-size: 10px;
            fill: var(--color-text-secondary);
        }

        .radial-container .node-label-group {
            font-weight: 600;
            font-size: 10px;
        }

        .radial-container .node-label-domain {
            font-weight: 700;
            font-size: 11px;
        }

        .radial-container .node-label-dimension {
            font-weight: 700;
            font-size: 12px;
        }

        .radial-container .link {
            fill: none;
            stroke: var(--color-border);
            stroke-width: 1;
            stroke-opacity: 0.5;
        }

        [data-theme="dark"] .radial-container .node-label {
            fill: var(--color-text-secondary);
        }

        [data-theme="dark"] .radial-container .link {
            stroke: var(--color-text-muted);
            stroke-opacity: 0.3;
        }

        .breadcrumb-path {
            display: flex;
            align-items: center;
            gap: 0;
            white-space: nowrap;
        }

        .breadcrumb-separator {
            color: var(--color-text-muted);
            margin: 0 0.5rem;
            font-size: 1rem;
            user-select: none;
        }

        .breadcrumb-home {
            color: var(--color-text-tertiary);
            cursor: pointer;
            transition: color var(--transition-fast);
            display: flex;
            align-items: center;
        }

        .breadcrumb-home:hover { color: var(--color-text-secondary); }

        .breadcrumb-item {
            color: var(--color-text-secondary);
            cursor: pointer;
            transition: color var(--transition-fast);
            padding: 0.25rem 0;
        }

        .breadcrumb-item:hover {
            color: var(--color-text-primary);
        }

        .breadcrumb-item.active {
            color: var(--color-text-primary);
            font-weight: 500;
            cursor: default;
        }

        .breadcrumb-item.active:hover {
            color: var(--color-text-primary);
        }

        .breadcrumb-hint {
            color: var(--color-text-muted);
            font-style: italic;
        }

        /* ─── Breadcrumb Version Picker ─── */
        .bc-version {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            cursor: pointer;
            padding: 0.25rem 0.6rem;
            border-radius: var(--radius-sm);
            transition: background var(--transition-fast), border-color var(--transition-fast);
            position: relative;
            user-select: none;
        }

        .bc-version-latest {
            border: 1.5px solid rgba(102, 82, 255, 0.45);
            background: rgba(102, 82, 255, 0.08);
            color: #6652ff;
        }

        .bc-version-latest:hover {
            border-color: rgba(102, 82, 255, 0.7);
            background: rgba(102, 82, 255, 0.12);
        }

        .bc-version-proposed {
            border: 1.5px solid rgba(253, 193, 3, 0.45);
            background: rgba(253, 193, 3, 0.08);
            color: var(--color-economic);
        }

        .bc-version-proposed:hover {
            border-color: rgba(253, 193, 3, 0.7);
            background: rgba(253, 193, 3, 0.12);
        }

        .bc-version-tag {
            font-weight: 600;
            font-size: 0.8125rem;
            letter-spacing: 0.01em;
        }

        .bc-version-latest .bc-version-tag { color: #6652ff; }
        .bc-version-proposed .bc-version-tag { color: var(--color-economic); }

        [data-theme="dark"] .bc-version-latest .bc-version-tag { color: #a494ff; }
        [data-theme="dark"] .bc-version-proposed .bc-version-tag { color: #fdd74b; }

        .bc-version-chevron {
            opacity: 0.6;
            transition: transform var(--transition-fast), opacity var(--transition-fast);
        }

        .bc-version:hover .bc-version-chevron { opacity: 1; }

        .bc-version svg:first-child {
            opacity: 0.7;
        }

        /* Dropdown */
        .bc-version-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            min-width: 280px;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-md), 0 8px 24px rgba(0,0,0,0.08);
            z-index: 200;
            overflow: hidden;
        }

        .bc-version-dropdown.open { display: block; }

        .bc-dd-item {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.4rem;
            padding: 0.6rem 0.85rem;
            cursor: pointer;
            transition: background var(--transition-fast);
            border-bottom: 1px solid var(--color-border-light);
        }

        .bc-dd-item:last-child { border-bottom: none; }

        .bc-dd-item:hover { background: var(--color-bg); }

        .bc-dd-tag {
            font-weight: 600;
            font-size: 0.8125rem;
            color: var(--color-text-primary);
        }

        .bc-dd-badge {
            font-size: 0.625rem;
            font-weight: 500;
            padding: 0.1rem 0.4rem;
            border-radius: 3px;
            letter-spacing: 0.01em;
        }

        .bc-dd-latest {
            color: #37c43e;
            background: rgba(55, 196, 62, 0.1);
            border: 1px solid rgba(55, 196, 62, 0.2);
        }

        .bc-dd-proposed {
            color: var(--color-economic);
            background: rgba(253, 193, 3, 0.1);
            border: 1px solid rgba(253, 193, 3, 0.2);
        }

        .bc-dd-summary {
            width: 100%;
            font-size: 0.7rem;
            color: var(--color-text-tertiary);
            line-height: 1.35;
        }

        /* ─── Column Layout ─── */
        .container {
            display: flex;
            height: calc(100vh - 102px - 42px);
            background: var(--color-surface);
            transition: height 450ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        .column {
            min-width: 0;
            border-right: 1px solid var(--color-border);
            overflow-y: auto;
            overflow-x: hidden;
            position: relative;
            transition: flex var(--transition-med), min-width var(--transition-med), opacity var(--transition-med);
            flex: 1;
            opacity: 1;
        }

        .column:last-child { border-right: none; }

        .column.hidden-col {
            flex: 0;
            min-width: 0;
            max-width: 0;
            opacity: 0;
            overflow: hidden;
            border-right: none;
            padding: 0;
        }

        .column::-webkit-scrollbar { width: 6px; }
        .column::-webkit-scrollbar-track { background: transparent; }
        .column::-webkit-scrollbar-thumb { background: var(--color-text-muted); border-radius: 3px; }
        .column::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); }

        .column-header {
            position: sticky;
            top: 0;
            background: var(--color-bg);
            padding: 0 1.25rem;
            height: 42px;
            border-bottom: 1px solid var(--color-border);
            font-weight: 600;
            font-size: 0.6875rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-text-tertiary);
            z-index: 10;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .column-header-title {
            flex-shrink: 0;
        }

        .column-count {
            font-weight: 600;
            font-size: 0.625rem;
            background: var(--color-border-light);
            padding: 0.15rem 0.5rem;
            border-radius: 10px;
            color: var(--color-text-tertiary);
            letter-spacing: 0.02em;
            flex-shrink: 0;
        }

        .column-count:empty {
            display: none;
        }

        /* Dimension-coloured count badges */
        .column-count.count-hard {
            background: var(--color-hard-light);
            color: var(--color-hard);
        }
        .column-count.count-soft {
            background: var(--color-soft-light);
            color: var(--color-soft);
        }
        .column-count.count-economic {
            background: var(--color-economic-light);
            color: var(--color-economic);
        }

        .column-content {
            padding: 0 0 42px;
        }

        /* ─── Items ─── */
        .item {
            padding: 1rem 1.25rem;
            cursor: pointer;
            transition: background var(--transition-fast), border-color var(--transition-fast);
            border-left: 3px solid transparent;
            position: relative;
            outline: none;
        }

        .item:hover, .item:focus-visible {
            background: var(--color-bg);
        }

        .item:focus-visible {
            box-shadow: inset 0 0 0 2px rgba(90, 69, 255, 0.3);
        }

        .item.active {
            background: var(--color-bg);
            font-weight: 500;
        }

        .item-title {
            font-size: 0.9375rem;
            color: var(--color-text-primary);
            margin-bottom: 0.125rem;
            line-height: 1.35;
        }

        .item-subtitle {
            font-size: 0.75rem;
            color: var(--color-text-tertiary);
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .item-arrow {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--color-text-muted);
            font-size: 0.75rem;
            opacity: 0;
            transition: opacity var(--transition-fast), transform var(--transition-fast);
        }

        .item:hover .item-arrow, .item:focus-visible .item-arrow {
            opacity: 1;
            transform: translateY(-50%) translateX(2px);
        }

        /* Dimension items – larger */
        .column-1 .item {
            padding: 1rem 1.25rem;
            border-left-width: 4px;
        }
        .column-1 .item-title {
            font-size: 0.9375rem;
            font-weight: 500;
        }

        /* ─── Dimension Colours ─── */
        .color-hard { border-left-color: var(--color-hard) !important; }
        .color-hard.active { background: var(--color-hard-light); }
        .color-hard:hover { background: var(--color-hard-light); }

        .color-soft { border-left-color: var(--color-soft) !important; }
        .color-soft.active { background: var(--color-soft-light); }
        .color-soft:hover { background: var(--color-soft-light); }

        .color-economic { border-left-color: var(--color-economic) !important; }
        .color-economic.active { background: var(--color-economic-light); }
        .color-economic:hover { background: var(--color-economic-light); }

        /* Dimension badge pill */
        .dim-badge {
            display: inline-block;
            font-size: 0.625rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 0.125rem 0.5rem;
            border-radius: 10px;
            margin-bottom: 0.375rem;
        }
        .dim-badge.hard { background: var(--color-hard-light); color: var(--color-hard); }
        .dim-badge.soft { background: var(--color-soft-light); color: var(--color-soft); }
        .dim-badge.economic { background: var(--color-economic-light); color: var(--color-economic); }

        /* ─── Detail Cards (Column 4) ─── */
        .detail-header {
            padding: 1.25rem 1.25rem 1rem;
            border-bottom: 1px solid var(--color-border-light);
        }

        .detail-header-title {
            font-family: 'Urbanist', sans-serif;
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--color-text-primary);
            margin-bottom: 0.25rem;
        }

        .detail-header-count {
            font-size: 0.75rem;
            color: var(--color-text-tertiary);
        }

        .capability-item {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--color-border-light);
            transition: background var(--transition-fast);
        }

        .capability-item:last-child { border-bottom: none; }

        .capability-item:hover {
            background: var(--color-bg);
        }

        .capability-name {
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--color-text-primary);
            margin-bottom: 0.125rem;
            line-height: 1.4;
        }

        .capability-desc {
            font-size: 0.75rem;
            color: var(--color-text-tertiary);
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .capability-leader {
            font-size: 0.6875rem;
            color: var(--color-text-tertiary);
            margin-top: 0.25rem;
        }

        /* ─── Empty State ─── */
        .empty-state {
            padding: 3rem 1.5rem;
            text-align: center;
            color: var(--color-text-muted);
            font-size: 0.8125rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }

        .empty-icon {
            font-size: 1.5rem;
            opacity: 0.4;
        }

        /* ─── Tappable Capability Items (mobile) ─── */
        .capability-item-tappable {
            cursor: pointer;
            position: relative;
            border-left: 3px solid transparent;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--color-border-light);
            transition: background var(--transition-fast);
        }

        .capability-item-tappable:last-child { border-bottom: none; }

        .capability-item-tappable:hover,
        .capability-item-tappable:active {
            background: var(--color-bg);
        }

        .color-hard.capability-item-tappable:hover,
        .color-hard.capability-item-tappable:active { background: var(--color-hard-light); }
        .color-soft.capability-item-tappable:hover,
        .color-soft.capability-item-tappable:active { background: var(--color-soft-light); }
        .color-economic.capability-item-tappable:hover,
        .color-economic.capability-item-tappable:active { background: var(--color-economic-light); }

        .capability-item-tappable .item-arrow {
            opacity: 0.3;
        }

        /* ─── Capability Detail View (Column 5, mobile) ─── */
        .cap-detail-view {
            padding: 1.25rem;
        }

        .cap-detail-badge-row {
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .copy-btn {
            width: 32px;
            height: 32px;
            background: none;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-text-tertiary);
            flex-shrink: 0;
            transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
            outline: none;
        }

        .copy-btn:hover {
            color: var(--color-text-secondary);
            border-color: var(--color-text-tertiary);
            background: var(--color-bg);
        }

        .copy-btn.copied {
            color: var(--color-soft);
            border-color: var(--color-soft);
        }

        .copy-btn svg { width: 15px; height: 15px; }

        /* ─── Tooltip ─── */
        #tooltip {
            position: fixed;
            background: var(--color-text-primary);
            color: var(--color-surface);
            font-family: 'DM Sans', sans-serif;
            font-size: 0.6875rem;
            font-weight: 500;
            white-space: nowrap;
            padding: 0.3rem 0.6rem;
            border-radius: var(--radius-sm);
            pointer-events: none;
            opacity: 0;
            transform: translateY(4px);
            transition: opacity 150ms ease, transform 150ms ease;
            z-index: 9999;
        }

        #tooltip.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .cap-detail-title {
            font-family: 'Urbanist', sans-serif;
            font-size: 1.375rem;
            font-weight: 600;
            color: var(--color-text-primary);
            line-height: 1.25;
            margin-bottom: 0.5rem;
            letter-spacing: -0.01em;
        }

        .cap-detail-tagline {
            font-size: 0.875rem;
            color: var(--color-text-secondary);
            line-height: 1.5;
            margin-bottom: 1.25rem;
            padding-bottom: 1.25rem;
            border-bottom: 1px solid var(--color-border-light);
        }

        .cap-detail-meta {
            display: flex;
            flex-direction: column;
            gap: 0.625rem;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: var(--color-bg);
            border-radius: var(--radius-md);
        }

        .cap-detail-meta-item {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }

        .cap-detail-meta-label {
            font-size: 0.75rem;
            color: var(--color-text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-weight: 500;
        }

        .cap-detail-meta-value {
            font-size: 0.8125rem;
            color: var(--color-text-primary);
            font-weight: 500;
            text-align: right;
        }

        .cap-detail-section {
            margin-bottom: 1.5rem;
        }

        .cap-detail-section-title {
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--color-text-tertiary);
            margin-bottom: 0.5rem;
        }

        .cap-detail-section-body {
            font-size: 0.8125rem;
            color: var(--color-text-secondary);
            line-height: 1.65;
        }

        .cap-detail-indicators {
            list-style: none;
            padding: 0;
        }

        .cap-detail-indicators li {
            font-size: 0.8125rem;
            color: var(--color-text-secondary);
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--color-border-light);
            line-height: 1.4;
            padding-left: 1rem;
            position: relative;
        }

        .cap-detail-indicators li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.75rem;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--color-text-muted);
        }

        .cap-detail-indicators li:last-child { border-bottom: none; }

        .cap-detail-related {
            display: flex;
            flex-wrap: wrap;
            gap: 0.375rem;
        }

        .cap-detail-related-chip {
            font-size: 0.6875rem;
            padding: 0.3125rem 0.625rem;
            border-radius: 100px;
            border: 1px solid transparent;
            line-height: 1.3;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
        }
        .cap-detail-related-chip:hover {
            opacity: 0.8;
        }
        .cap-detail-related-chip.hard {
            background: color-mix(in srgb, var(--color-hard) 12%, var(--color-bg));
            color: var(--color-hard);
            border-color: color-mix(in srgb, var(--color-hard) 25%, transparent);
        }
        .cap-detail-related-chip.soft {
            background: color-mix(in srgb, var(--color-soft) 12%, var(--color-bg));
            color: var(--color-soft);
            border-color: color-mix(in srgb, var(--color-soft) 25%, transparent);
        }
        .cap-detail-related-chip.economic {
            background: color-mix(in srgb, var(--color-economic) 12%, var(--color-bg));
            color: var(--color-economic);
            border-color: color-mix(in srgb, var(--color-economic) 25%, transparent);
        }

        /* ─── Mobile ─── */
        @media (max-width: 768px) {
            body { overflow: auto; height: auto; }

            .header {
                padding: 0 1.25rem;
                height: 60px;
                min-height: 60px;
            }

            .header-subtitle { display: none; }
            .header-right { gap: 0.5rem; }
            .header h1 { font-size: 1.1rem; }
            .header-meta { display: none; }

            .breadcrumb {
                padding: 0.5rem 1.25rem;
                height: auto;
                min-height: 40px;
                overflow-x: visible;
            }

            .viz-toggle { display: flex; }

            .radial-container svg {
                min-height: 80vh;
            }

            /* Overview mobile */
            body.overview-active {
                display: block;
                height: auto;
                overflow: auto;
            }

            body.overview-active .footer {
                position: sticky;
                bottom: 0;
            }

            .overview-container {
                flex-direction: column;
                align-items: stretch;
                height: auto;
                flex: none;
                overflow: visible;
                padding: 0.5rem;
                gap: 0.5rem;
            }

            .ov-dimension {
                padding: 0.5rem;
                gap: 0.375rem;
            }

            .ov-dim-title {
                font-size: 0.75rem;
            }

            .ov-domain {
                padding: 0.4rem 0.5rem;
            }

            .ov-domain-title {
                font-size: 0.625rem;
                margin-bottom: 0.25rem;
            }

            .ov-groups {
                flex-direction: column;
                gap: 0.25rem;
            }

            .ov-group {
                padding: 0.35rem 0.5rem;
            }

            .ov-group-name {
                font-size: 0.6875rem;
            }

            .ov-group-count {
                font-size: 0.5625rem;
            }

            /* Fixed breadcrumb height on mobile — single line, truncated */
            body.overview-active .breadcrumb {
                min-height: 40px;
                max-height: 40px;
                overflow: hidden;
            }

            /* Caps dropdown: use absolute within group on mobile */
            .ov-caps {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                width: auto !important;
            }

            .ov-group-wrap {
                position: relative;
            }

            .breadcrumb-path {
                flex-wrap: nowrap;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                min-width: 0;
            }

            .container {
                display: block;
                height: auto;
                min-height: calc(100vh - 96px);
            }

            .column {
                border-right: none;
                overflow: visible;
                display: none;
            }

            .column.mobile-active {
                display: block;
            }

            .column.hidden-col {
                display: none;
                max-width: none;
                opacity: 1;
            }

            .column-header {
                position: sticky;
                top: 0;
            }

            .back-btn {
                display: flex;
                align-items: center;
                gap: 0.25rem;
                margin-left: auto;
                background: none;
                border: 1px solid var(--color-border);
                padding: 0.25rem 0.625rem;
                border-radius: var(--radius-sm);
                font-size: 0.6875rem;
                font-weight: 600;
                color: var(--color-text-secondary);
                cursor: pointer;
                font-family: inherit;
                text-transform: uppercase;
                letter-spacing: 0.04em;
                transition: background var(--transition-fast);
            }

            .back-btn:active { background: var(--color-bg); }

            .item {
                padding: 0.875rem 1.25rem;
                min-height: 56px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .item-arrow { opacity: 0.3; }

            .column-1 .item { padding: 1rem 1.25rem; }
        }

        /* Tablet */
        @media (min-width: 769px) and (max-width: 1100px) {
            .column { min-width: 200px; }
        }

        @media (min-width: 769px) {
            .back-btn { display: none; }
        }

        /* ─── Animations ─── */
        @keyframes fadeSlideIn {
            from { opacity: 0; transform: translateX(6px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .column-content .item,
        .column-content .capability-item,
        .column-content .capability-item-tappable,
        .column-content .detail-header,
        .column-content .cap-detail-view {
            animation: fadeSlideIn 180ms ease both;
        }

        .column-content .item:nth-child(1) { animation-delay: 0ms; }
        .column-content .item:nth-child(2) { animation-delay: 25ms; }
        .column-content .item:nth-child(3) { animation-delay: 50ms; }
        .column-content .item:nth-child(4) { animation-delay: 75ms; }
        .column-content .item:nth-child(5) { animation-delay: 100ms; }
        .column-content .item:nth-child(6) { animation-delay: 125ms; }
        .column-content .item:nth-child(7) { animation-delay: 150ms; }
        .column-content .item:nth-child(8) { animation-delay: 175ms; }
        .column-content .item:nth-child(n+9) { animation-delay: 200ms; }

        /* ─── Nav Links (desktop) ─── */
        .header-nav {
            display: flex;
            align-items: center;
            gap: 0.125rem;
        }

        .nav-link {
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--color-text-secondary);
            padding: 0.375rem 0.75rem;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: color var(--transition-fast), background var(--transition-fast);
            text-decoration: none;
            white-space: nowrap;
            background: none;
            border: none;
            font-family: inherit;
        }

        .nav-link:hover {
            color: var(--color-text-primary);
            background: var(--color-bg);
        }

        .nav-link.active {
            color: #6652ff;
            background: rgba(102, 82, 255, 0.08);
            font-weight: 600;
        }

        /* ─── Hamburger (mobile) ─── */
        .hamburger {
            display: none;
            width: 32px;
            height: 32px;
            background: none;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-sm);
            cursor: pointer;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 0;
            flex-shrink: 0;
            transition: background var(--transition-fast);
        }

        .hamburger:hover { background: var(--color-bg); }

        .hamburger-line {
            width: 14px;
            height: 1.5px;
            background: var(--color-text-secondary);
            border-radius: 2px;
            transition: transform 200ms ease, opacity 200ms ease;
            display: block;
        }

        /* ─── Mobile Menu ─── */
        .mobile-menu {
            display: none;
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            background: var(--color-surface);
            border-top: 1px solid var(--color-border);
            border-bottom: 1px solid var(--color-border);
            z-index: 200;
            flex-direction: column;
            padding: 0;
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        }

        .mobile-menu.open { display: flex; }

        .mobile-nav-link {
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--color-text-secondary);
            padding: 0.875rem 1.5rem;
            cursor: pointer;
            background: none;
            border: none;
            font-family: inherit;
            text-align: left;
            width: 100%;
            transition: background var(--transition-fast), color var(--transition-fast);
            border-bottom: 1px solid var(--color-border-light);
        }

        .mobile-nav-link:last-child { border-bottom: none; }
        .mobile-nav-link:hover { background: var(--color-bg); color: var(--color-text-primary); }

        .mobile-nav-link.active {
            color: #6652ff;
            background: rgba(102, 82, 255, 0.08);
            font-weight: 600;
        }

        /* ─── Page Overlay ─── */
        .page-overlay {
            position: fixed;
            inset: 0;
            background: var(--color-bg);
            z-index: 300;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }

        .page-overlay.open { display: flex; }

        .page-overlay-header {
            background: var(--color-surface);
            border-bottom: 1px solid var(--color-border);
            padding: 0 2rem;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }

        .page-overlay-title {
            font-family: 'Urbanist', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            color: var(--color-text-primary);
            letter-spacing: -0.01em;
        }

        .page-back-btn {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--color-text-secondary);
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
            padding: 0.375rem 0;
            transition: color var(--transition-fast);
        }

        .page-back-btn:hover { color: var(--color-text-primary); }

        .page-body {
            overflow-y: auto;
            flex: 1;
            -webkit-overflow-scrolling: touch;
        }

        body:has(.page-body) {
            overflow: auto;
            height: auto;
            padding-bottom: 50px;
        }

        body:has(.page-body) .header {
            position: sticky;
            top: 0;
            z-index: 100;
        }

        /* ─── Text Page Typography ─── */
        /* Apply to any .text-page container for consistent, SEO-ready docs */
        .text-page {
            max-width: 680px;
            margin: 0 auto;
            padding: 3rem 2rem 5rem;
            color: var(--color-text-primary);
        }

        .text-page h1 {
            font-family: 'Urbanist', sans-serif;
            font-size: 2.25rem;
            font-weight: 700;
            letter-spacing: -0.03em;
            line-height: 1.15;
            color: var(--color-text-primary);
            margin: 0 0 0.75rem;
        }

        .text-page .lead {
            font-size: 1.0625rem;
            color: var(--color-text-secondary);
            line-height: 1.65;
            margin: 0 0 2.5rem;
            padding-bottom: 2.5rem;
            border-bottom: 1px solid var(--color-border);
        }

        .text-page h2 {
            font-family: 'Urbanist', sans-serif;
            font-size: 1.25rem;
            font-weight: 600;
            letter-spacing: -0.02em;
            line-height: 1.3;
            color: var(--color-text-primary);
            margin: 2.5rem 0 0.625rem;
        }

        .text-page h3 {
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--color-text-primary);
            margin: 1.5rem 0 0.375rem;
            line-height: 1.35;
        }

        .text-page p {
            font-size: 0.9375rem;
            color: var(--color-text-secondary);
            line-height: 1.7;
            margin: 0 0 1rem;
        }

        .text-page ul, .text-page ol {
            margin: 0 0 1rem;
            padding-left: 1.25rem;
        }

        .text-page li {
            font-size: 0.9375rem;
            color: var(--color-text-secondary);
            line-height: 1.65;
            margin-bottom: 0.375rem;
        }

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

        .text-page hr {
            border: none;
            border-top: 1px solid var(--color-border);
            margin: 2.5rem 0;
        }

        .text-page .meta {
            font-size: 0.75rem;
            color: var(--color-text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 500;
            margin-bottom: 0.5rem;
            display: block;
        }

        .text-page .dim-tag {
            display: inline-block;
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 0.2rem 0.625rem;
            border-radius: 100px;
            margin-right: 0.375rem;
            margin-bottom: 0.375rem;
        }

        .text-page .dim-tag.hard { background: var(--color-hard-light); color: var(--color-hard); }
        .text-page .dim-tag.soft { background: var(--color-soft-light); color: var(--color-soft); }
        .text-page .dim-tag.economic { background: var(--color-economic-light); color: var(--color-economic); }

        /* ─── Footer ─── */
        .footer {
            background: #1a1d29;
            border-top: 1px solid #2a2f3e;
            padding: 12px 0;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 180;
        }
        [data-theme="light"] .footer {
            background: #ffffff;
            border-top: 1px solid #d0d7de;
        }
        [data-theme="light"] .footer-company,
        [data-theme="light"] .footer-link {
            color: #656d76;
        }
        [data-theme="light"] .footer-link:hover {
            color: #1a1d29;
        }
        [data-theme="light"] .footer-social svg {
            fill: #656d76;
        }
        [data-theme="light"] .footer-social:hover svg {
            fill: #1a1d29;
        }
        .footer-content {
            padding: 0 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
        }
        .footer-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .footer-company {
            color: #8b949e;
            font-weight: 500;
        }
        .footer-link {
            color: #8b949e;
            text-decoration: none;
            font-weight: 400;
            transition: color 0.2s ease;
        }
        .footer-link:hover {
            color: #ffffff;
        }
        .footer-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .footer-social {
            color: #8b949e;
            text-decoration: none;
            font-size: 16px;
            transition: color 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .footer-social svg {
            width: 20px;
            height: 20px;
            fill: #8b949e;
            transition: fill 0.2s ease;
        }
        .footer-social:hover svg {
            fill: #ffffff;
        }
        @media (max-width: 768px) {
            .footer-content {
                flex-direction: column;
                gap: 10px;
                text-align: center;
            }
            .footer-left {
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px 16px;
            }
            .footer-right {
                gap: 14px;
            }
        }

        /* ─── Version Layout (Framework Page) ─── */
        .version-layout {
            display: flex;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        body:has(.version-layout) {
            overflow: hidden;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        body:has(.version-layout) .header {
            flex-shrink: 0;
            z-index: 100;
        }

        body:has(.version-layout) > .footer {
            display: none;
        }

        .version-sidebar {
            width: 260px;
            min-width: 260px;
            border-right: 1px solid var(--color-border);
            background: var(--color-surface);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .version-sidebar-header {
            padding: 0 1.25rem;
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-text-tertiary);
            border-bottom: 1px solid var(--color-border);
            background: var(--color-bg);
            height: 42px;
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .version-tree {
            padding: 1.25rem 1.25rem;
            overflow-y: auto;
            flex: 1;
        }

        /* ─── Version Tree Nodes ─── */
        .vt-node {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.3rem 0.5rem;
            border-radius: var(--radius-sm);
            transition: background var(--transition-fast);
        }

        .vt-node:hover {
            background: var(--color-bg);
        }

        .vt-node.vt-active {
            background: var(--color-bg);
        }

        .vt-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--color-text-muted);
            flex-shrink: 0;
            transition: background var(--transition-fast), box-shadow var(--transition-fast);
        }

        .vt-node:hover .vt-dot {
            background: var(--color-text-tertiary);
        }

        .vt-node.vt-active .vt-dot {
            background: var(--color-text-secondary);
        }

        .vt-dot-latest {
            background: #6652ff !important;
            box-shadow: 0 0 0 3px rgba(102, 82, 255, 0.2);
        }

        .vt-node.vt-active .vt-dot-latest {
            box-shadow: 0 0 0 3px rgba(102, 82, 255, 0.3);
        }

        .vt-dot-proposed {
            background: transparent !important;
            border: 2px solid var(--color-economic);
            box-shadow: none !important;
        }

        .vt-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            color: var(--color-text-secondary);
        }

        .vt-node.vt-active .vt-info {
            color: var(--color-text-primary);
        }

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

        .vt-badge {
            font-size: 0.6875rem;
            font-weight: 500;
            padding: 0.1rem 0.45rem;
            border-radius: 4px;
            letter-spacing: 0.01em;
        }

        .vt-badge-latest {
            color: #37c43e;
            background: rgba(55, 196, 62, 0.12);
            border: 1px solid rgba(55, 196, 62, 0.25);
        }

        .vt-badge-proposed {
            color: var(--color-economic);
            background: rgba(253, 193, 3, 0.12);
            border: 1px solid rgba(253, 193, 3, 0.25);
        }

        /* ─── Deltas ─── */
        .vt-delta {
            padding: 0.1rem 0.5rem 0.1rem calc(0.5rem + 12px + 0.75rem);
            font-size: 0.6875rem;
            color: var(--color-text-tertiary);
            cursor: pointer;
        }

        .vt-delta-add { color: #37c43e; font-weight: 600; }
        .vt-delta-rm { color: #ef4444; font-weight: 600; }
        .vt-delta-mod { color: var(--color-economic); font-weight: 600; }

        .vt-delta-initial {
            font-style: italic;
            color: var(--color-text-muted);
        }

        /* ─── Pipes ─── */
        .vt-pipe-line {
            padding: 0 0.5rem 0 calc(0.5rem + 5px);
            line-height: 1;
        }

        .vt-pipe {
            font-family: monospace;
            font-size: 0.875rem;
            color: var(--color-text-muted);
        }

        .version-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            min-height: 0;
        }

        .version-toolbar {
            display: flex;
            align-items: center;
            padding: 0 1.25rem;
            border-bottom: 1px solid var(--color-border);
            background: var(--color-bg);
            gap: 1rem;
            height: 42px;
            flex-shrink: 0;
            position: relative;
            z-index: 50;
            overflow: visible;
        }

        .toolbar-controls {
            display: flex;
            align-items: center;
            gap: 0;
        }

        /* ─── Toolbar Version Picker ─── */
        .toolbar-version-picker {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.3rem 0.65rem;
            border: 1px solid #6652ff;
            border-left: none;
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            cursor: pointer;
            position: relative;
            transition: background var(--transition-fast);
            height: 100%;
        }

        .toolbar-version-picker:hover {
            background: var(--color-bg);
        }

        .tvp-tag {
            font-weight: 600;
            font-size: 0.6875rem;
            color: var(--color-text-primary);
        }

        .tvp-status {
            font-size: 0.6rem;
            font-weight: 500;
            padding: 0.05rem 0.35rem;
            border-radius: 3px;
        }

        .tvp-status-latest { color: #37c43e; background: rgba(55, 196, 62, 0.1); }
        .tvp-status-proposed { color: var(--color-economic); background: rgba(253, 193, 3, 0.1); }
        .tvp-status-archived { color: var(--color-text-tertiary); background: var(--color-bg); }

        .tvp-chevron {
            color: var(--color-text-tertiary);
            opacity: 0.6;
        }

        .tvp-dropdown {
            display: none;
            position: fixed;
            min-width: 160px;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow-md);
            z-index: 200;
            overflow: hidden;
        }

        .tvp-dropdown.open { display: block; }

        .tvp-dd-item {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.45rem 0.65rem;
            cursor: pointer;
            transition: background var(--transition-fast);
            font-size: 0.75rem;
        }

        .tvp-dd-item:hover { background: var(--color-bg); }

        .tvp-dd-tag { font-weight: 600; color: var(--color-text-primary); }

        .tvp-dd-badge {
            font-size: 0.5625rem;
            font-weight: 500;
            padding: 0.05rem 0.3rem;
            border-radius: 3px;
        }

        .tvp-dd-latest { color: #37c43e; background: rgba(55, 196, 62, 0.1); }
        .tvp-dd-proposed { color: var(--color-economic); background: rgba(253, 193, 3, 0.1); }
        .tvp-dd-archived { color: var(--color-text-tertiary); background: var(--color-bg); }

        /* ─── Framework Footer ─── */
        .fw-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1.5rem;
            border-top: 1px solid var(--color-border);
            background: var(--color-surface);
            font-size: 0.75rem;
            flex-shrink: 0;
        }

        .fw-footer-left {
            display: flex;
            align-items: center;
            gap: 1.25rem;
        }

        .fw-footer-right {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .fw-footer-right .footer-social {
            display: flex;
            align-items: center;
        }

        .fw-footer-right .footer-social svg {
            width: 16px;
            height: 16px;
            fill: var(--color-text-muted);
            transition: fill var(--transition-fast);
        }

        .fw-footer-right .footer-social:hover svg {
            fill: var(--color-text-secondary);
        }

        .fw-footer-company {
            color: var(--color-text-tertiary);
            font-weight: 500;
        }

        .fw-footer-link {
            color: var(--color-text-tertiary);
            text-decoration: none;
            transition: color var(--transition-fast);
        }

        .fw-footer-link:hover {
            color: var(--color-text-secondary);
        }

        .version-banner {
            padding: 0.75rem 1rem;
            border-radius: var(--radius-sm);
            font-size: 0.8125rem;
            line-height: 1.5;
            margin-bottom: 1.5rem;
        }

        .version-banner-proposed {
            background: rgba(253, 193, 3, 0.08);
            border: 1px solid rgba(253, 193, 3, 0.2);
            color: var(--color-text-secondary);
        }

        .version-banner-proposed strong {
            color: var(--color-economic);
        }

        .version-banner-archived {
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            color: var(--color-text-secondary);
        }

        .version-banner-archived strong {
            color: var(--color-text-tertiary);
        }

        .view-toggle {
            display: inline-flex;
            border: 1px solid #6652ff;
            border-radius: var(--radius-sm) 0 0 var(--radius-sm);
            overflow: hidden;
            flex-shrink: 0;
        }

        .view-toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.6875rem;
            font-weight: 500;
            padding: 0.3rem 0.65rem;
            border: none;
            background: transparent;
            color: #6652ff;
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast);
            letter-spacing: 0.01em;
        }

        .view-toggle-btn svg {
            opacity: 0.65;
            transition: opacity var(--transition-fast);
        }

        .view-toggle-btn:not(:last-child) {
            border-right: 1px solid #6652ff;
        }

        .view-toggle-btn:hover {
            color: #6652ff;
            background: rgba(102, 82, 255, 0.06);
        }

        .view-toggle-btn:hover svg { opacity: 0.85; }

        .view-toggle-btn.active {
            color: #fff;
            background: rgba(102, 82, 255, 0.85);
            font-weight: 600;
        }

        .view-toggle-btn.active svg { opacity: 1; }

        .version-toolbar-right {
            flex-shrink: 0;
        }

        .version-stats {
            font-size: 0.75rem;
            color: var(--color-text-tertiary);
            white-space: nowrap;
        }

        .version-scroll {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .version-scroll::-webkit-scrollbar { width: 6px; }
        .version-scroll::-webkit-scrollbar-track { background: transparent; }
        .version-scroll::-webkit-scrollbar-thumb { background: var(--color-text-muted); border-radius: 3px; }
        .version-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); }

        .version-scroll .text-page {
            max-width: 680px;
            margin: 0 auto;
        }

        .version-loading, .version-error {
            padding: 3rem 2rem;
            text-align: center;
            color: var(--color-text-tertiary);
            font-size: 0.875rem;
        }

        .version-error {
            color: #e74c3c;
        }

        /* ─── Framework Taxonomy Styles ─── */
        .fw-toc {
            background: var(--color-bg-secondary, #f5f6f8);
            border-radius: 8px;
            padding: 1.5rem 2rem;
            margin: 1.5rem 0 0;
        }
        .fw-toc h2 { margin-top: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
        .fw-toc ol { padding-left: 1.25rem; margin: 0.5rem 0 0; }
        .fw-toc > ol > li { margin-bottom: 0.5rem; }
        .fw-toc ol ol { margin-top: 0.25rem; }
        .fw-toc ol ol li { font-size: 0.85rem; margin-bottom: 0.15rem; }
        .fw-toc a { color: var(--color-text-secondary); text-decoration: none; }
        .fw-toc a:hover { color: var(--color-text-primary); text-decoration: underline; }
        .fw-toc .dim-tag { font-size: 0.7rem; vertical-align: middle; }

        .fw-dimension { margin-top: 2.5rem; }
        .fw-dimension > h2 { display: flex; align-items: center; gap: 0.5rem; }
        .fw-domain { margin: 1.5rem 0 1.5rem 0.5rem; padding-left: 1rem; border-left: 3px solid var(--color-border, #e0e0e0); }
        .fw-domain > h3 { margin-bottom: 0.25rem; }
        .fw-group { margin: 1rem 0 1rem 0.5rem; }
        .fw-group > h4 { margin-bottom: 0.25rem; font-size: 0.95rem; }

        .fw-capabilities { list-style: none; padding: 0; margin: 0.5rem 0 0; }
        .fw-capability { padding: 0.5rem 0.75rem; margin-bottom: 0.35rem; border-radius: 6px; background: var(--color-bg-secondary, #f5f6f8); font-size: 0.875rem; line-height: 1.5; }
        .fw-capability strong { color: var(--color-text-primary); font-weight: 600; }
        .fw-capability p { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--color-text-secondary); }

        .version-scroll [id] {
            scroll-margin-top: 1rem;
        }

        .fw-code { font-family: monospace; font-size: 0.75rem; color: var(--color-text-tertiary, #999); }
        .fw-count { font-size: 0.75rem; color: var(--color-text-secondary); font-weight: 400; }
        .fw-headline { font-size: 0.8125rem; color: var(--color-text-secondary); }
        .fw-summary { font-size: 0.8125rem; color: var(--color-text-tertiary, #999); font-weight: 500; margin-top: 0.25rem; }

        /* ─── Capability Cards (Reference page) ─── */
        .fw-cap-card {
            padding: 1.25rem;
            margin-bottom: 0.75rem;
            border-radius: var(--radius-md);
            background: var(--color-bg);
            border: 1px solid var(--color-border-light);
        }

        .fw-cap-badge-row {
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .fw-cap-badge-row .dim-badge {
            font-family: monospace;
            font-size: 0.7rem;
            letter-spacing: 0.04em;
        }

        .fw-cap-title {
            font-size: 1.1rem;
            font-weight: 700;
            margin: 0 0 0.25rem;
            color: var(--color-text-primary);
        }

        .fw-cap-tagline {
            font-size: 0.875rem;
            color: var(--color-text-secondary);
            margin: 0 0 0.75rem;
        }

        .fw-cap-meta {
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;
            margin-bottom: 0.75rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--color-border-light);
        }

        .fw-cap-meta-item {
            display: flex;
            flex-direction: column;
            gap: 0.1rem;
        }

        .fw-cap-meta-label {
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-text-tertiary);
        }

        .fw-cap-meta-value {
            font-size: 0.8125rem;
            color: var(--color-text-primary);
            font-weight: 500;
        }

        .fw-cap-section {
            margin-top: 0.75rem;
        }

        .fw-cap-section-title {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-text-tertiary);
            margin: 0 0 0.3rem;
        }

        .fw-cap-section p {
            font-size: 0.8125rem;
            line-height: 1.55;
            color: var(--color-text-secondary);
            margin: 0;
        }

        .fw-cap-related {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
        }

        .fw-cap-related-chip {
            display: inline-block;
            font-size: 0.6875rem;
            font-weight: 500;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            text-decoration: none;
            cursor: pointer;
            transition: opacity var(--transition-fast);
        }

        .fw-cap-related-chip:hover {
            opacity: 0.75;
        }

        .fw-cap-related-chip.hard {
            background: var(--color-hard-light);
            color: var(--color-hard);
        }

        .fw-cap-related-chip.soft {
            background: var(--color-soft-light);
            color: var(--color-soft);
        }

        .fw-cap-related-chip.economic {
            background: var(--color-economic-light);
            color: var(--color-economic);
        }

        /* ─── Diff / Changes View ─── */
        .diff-header {
            font-size: 0.875rem;
            color: var(--color-text-secondary);
            padding: 1rem 0 0.75rem;
            border-bottom: 1px solid var(--color-border);
            margin-bottom: 1rem;
        }

        .diff-header strong {
            color: var(--color-text-primary);
        }

        .diff-notice {
            padding: 1.5rem 0;
            font-size: 0.8125rem;
            color: var(--color-text-tertiary);
            text-align: center;
        }

        .diff-notice strong {
            color: var(--color-text-secondary);
        }

        .diff-section-label {
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--color-text-tertiary);
            padding: 0.75rem 0 0.35rem;
        }

        .diff-block {
            border: 1px solid var(--color-border);
            border-radius: var(--radius-sm);
            overflow: hidden;
            margin-bottom: 1rem;
            font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
            font-size: 0.75rem;
            line-height: 1.65;
        }

        .diff-line {
            display: flex;
            padding: 0 0.75rem;
            border-bottom: 1px solid var(--color-border-light);
            min-height: 1.65em;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .diff-line:last-child { border-bottom: none; }

        .diff-ln {
            width: 3rem;
            flex-shrink: 0;
            text-align: right;
            padding-right: 0.75rem;
            color: var(--color-text-muted);
            user-select: none;
            border-right: 1px solid var(--color-border-light);
            margin-right: 0.5rem;
        }

        .diff-sign {
            width: 1rem;
            flex-shrink: 0;
            font-weight: 700;
            user-select: none;
        }

        .diff-added {
            background: rgba(55, 196, 62, 0.08);
        }

        .diff-added .diff-sign { color: #37c43e; }
        .diff-added .diff-ln { background: rgba(55, 196, 62, 0.05); }

        .diff-removed {
            background: rgba(239, 68, 68, 0.08);
        }

        .diff-removed .diff-sign { color: #ef4444; }
        .diff-removed .diff-ln { background: rgba(239, 68, 68, 0.05); }

        .diff-context {
            background: transparent;
        }

        .diff-context .diff-sign { color: transparent; }

        .diff-id {
            color: var(--color-text-secondary);
            font-weight: 600;
            margin-right: 0.35rem;
        }

        .diff-type {
            color: var(--color-text-muted);
            font-style: italic;
            margin-right: 0.35rem;
        }

        .diff-detail {
            font-size: 0.7rem;
            opacity: 0.85;
        }

        [data-theme="dark"] .diff-added { background: rgba(55, 196, 62, 0.06); }
        [data-theme="dark"] .diff-removed { background: rgba(239, 68, 68, 0.06); }
        [data-theme="dark"] .diff-added .diff-ln { background: rgba(55, 196, 62, 0.03); }
        [data-theme="dark"] .diff-removed .diff-ln { background: rgba(239, 68, 68, 0.03); }

        @media (max-width: 768px) {
            .header-nav { display: none; }
            .hamburger { display: flex; }
            .text-page { padding: 2rem 1.25rem 4rem; }
            .text-page h1 { font-size: 1.625rem; }
            .text-page h2 { font-size: 1.125rem; }
            .version-sidebar { display: none !important; }
            .version-layout { height: auto; overflow: visible; flex-direction: column; }
            body:has(.version-layout) { overflow: auto; height: auto; }
            .version-content { overflow: visible; }
            .version-scroll { overflow: visible; }
            .version-toolbar { padding: 0.4rem 0.75rem; height: auto; min-height: 38px; flex-wrap: wrap; gap: 0.4rem; }
            .version-stats { font-size: 0.65rem; }
            .view-toggle-btn { font-size: 0.625rem; padding: 0.25rem 0.5rem; }
            .tvp-tag { font-size: 0.625rem; }
            .tvp-status { font-size: 0.55rem; }
            .bc-version-dropdown { min-width: 240px; }
            .bc-dd-summary { font-size: 0.65rem; }
            .fw-footer { padding: 0.6rem 0.75rem; font-size: 0.6875rem; }
            .fw-footer-left { gap: 0.75rem; }
            .fw-footer-right { gap: 0.5rem; }
            .fw-footer-right .footer-social svg { width: 14px; height: 14px; }
            /* Diff mobile */
            .diff-block { font-size: 0.65rem; }
            .diff-ln { width: 2rem; padding-right: 0.4rem; margin-right: 0.3rem; }
            .diff-line { padding: 0 0.4rem; }
            .diff-header { font-size: 0.8rem; padding: 0.75rem 0 0.5rem; }
            .diff-section-label { font-size: 0.625rem; }
        }

        /* ─── Splash Hero ─── */
        #splash {
            background: #ECEEF4;
            overflow: hidden;
            transition: max-height 450ms cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            flex-shrink: 0;
        }

        /* Alert bar */
        .splash-alert {
            height: 42px;
            background: #6652ff;
            display: flex;
            align-items: center;
            padding: 0 1.5rem;
            gap: 0.75rem;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }

        .splash-alert-badge {
            font-size: 0.6875rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            background: rgba(255,255,255,0.22);
            color: #fff;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            flex-shrink: 0;
        }

        .splash-alert-text {
            font-size: 0.875rem;
            color: rgba(255,255,255,0.92);
            flex: 1;
        }

        .splash-alert-arrow {
            color: rgba(255,255,255,0.6);
            font-size: 1.75rem;
            flex-shrink: 0;
            line-height: 1;
        }

        .splash-inner {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 3rem 2.5rem 3.75rem;
            height: auto;
            gap: 0.625rem;
            transition: opacity 250ms ease;
        }

        .splash-title {
            font-family: 'Urbanist', sans-serif;
            font-size: 2.75rem;
            font-weight: 700;
            color: #6652ff;
            letter-spacing: -0.03em;
            line-height: 1.1;
            margin: 0;
        }

        .splash-subtitle {
            font-size: 0.9375rem;
            color: var(--color-text-secondary);
            line-height: 1.5;
            margin: 0;
            max-width: 640px;
        }

        .splash-actions {
            display: flex;
            gap: 0.625rem;
            margin-top: 0.25rem;
            flex-wrap: wrap;
        }

        .splash-btn {
            font-family: 'DM Sans', sans-serif;
            font-size: 0.8125rem;
            font-weight: 600;
            padding: 0.5rem 1.25rem;
            border-radius: 100px;
            border: none;
            cursor: pointer;
            transition: opacity 150ms ease, background 150ms ease;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

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

        .splash-btn-primary {
            background: #6652ff;
            color: #fff;
            text-decoration: none;
        }

        .splash-btn-secondary {
            background: #fff;
            color: var(--color-text-secondary);
            border: 1px solid var(--color-border);
            text-decoration: none;
        }

        [data-theme="dark"] .splash-btn-secondary {
            background: rgba(255,255,255,0.08);
            color: var(--color-text-secondary);
            border: 1px solid rgba(255,255,255,0.1);
        }

        #splash {
            max-height: 600px;
        }

        #splash.dismissed {
            max-height: 42px;
            overflow: hidden;
        }

        #splash.dismissed .splash-inner {
            opacity: 0;
            pointer-events: none;
        }

        @media (max-width: 768px) {
            .splash-inner {
                padding: 2rem 1.25rem 2.25rem;
                height: auto;
                min-height: unset;
                gap: 0.5rem;
            }
            .splash-title { font-size: 1.75rem; }
            .splash-subtitle { font-size: 0.8125rem; }
            #splash { max-height: none; }
        }