@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('../fonts/source-serif-4-latin-var.woff2') format('woff2');
}

:root {
    --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --text-tertiary: #78726B;
    --link: #6B5640;
    --hairline: #E5DFD6;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
}

html { font-synthesis: none; }

*, *::before, *::after { transition: none !important; }

body { font-kerning: normal; }

.explorer-header { box-shadow: none; border-bottom: 1px solid var(--hairline); }
.logo-text { font-weight: 700; letter-spacing: -0.01em; }
.version-badge { color: var(--link); background: rgba(139, 115, 85, 0.06); border: 1px solid var(--hairline); }
.search-input { background: #FFFFFF; border-color: var(--hairline); font-size: 0.9375rem; }
.search-input:focus { box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.12); }

.sidebar { border-right: 1px solid var(--hairline); }
.sidebar-title { color: var(--text-tertiary); letter-spacing: 0.08em; }
.sidebar-about p { line-height: 1.55; }
.stage-btn { font-size: 0.9375rem; }
.stage-btn.active { background: var(--bg-active); color: var(--text-primary); font-weight: 600; }
.stage-indicator { font-weight: 700; }
.stage-count { color: var(--text-tertiary); }

.main-content { padding: 2rem 2.5rem; }
.content-title, .search-result-heading, .technique-name, .error-state h2 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
}
.content-title { font-weight: 550; letter-spacing: -0.015em; font-size: 2.125rem; line-height: 1.15; }
.content-description { max-width: 62ch; font-size: 1rem; line-height: 1.55; }
.stat-number-inline { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-label-inline { color: var(--text-tertiary); letter-spacing: 0.06em; }

.search-result-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.search-result-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hairline);
}
.search-result-count { color: var(--text-tertiary); }

.chip {
    background: #FFFFFF;
    border: 1px solid var(--hairline);
    color: var(--text-secondary);
    border-radius: 999px;
    font-size: 0.8125rem;
}
.chip:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--primary-light); }
.chip.chip-multiple { border-color: var(--primary); color: var(--text-primary); font-weight: 600; }
.chip.chip-multiple:hover { background: var(--bg-hover); color: var(--text-primary); }
.chip.active, .chip.chip-multiple.active { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.toggle-btn { background: #FFFFFF; border: 1px solid var(--hairline); }
.toggle-btn.active { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }

.technique-card { border-color: var(--hairline); border-radius: 10px; }
.technique-card:hover { transform: none; box-shadow: none; border-color: var(--primary-light); }
.technique-card.highlight-match { background: #FFFFFF; border-color: var(--primary); }
.technique-list-item { border-color: var(--hairline); }
.technique-list-item:hover { box-shadow: none; border-color: var(--primary-light); }
.technique-list-item.highlight-match { background: #FFFFFF; border-color: var(--primary); }
.technique-name { font-weight: 600; letter-spacing: -0.005em; font-size: 1.1875rem; }
.technique-name a { color: var(--text-primary); }
.technique-description { font-size: 0.9375rem; line-height: 1.55; }
.subtechniques-title { font-family: var(--font-display); font-optical-sizing: auto; color: var(--text-primary); font-weight: 600; font-size: 0.9375rem; }
.subtechnique-item { background: var(--bg-main); border: 1px solid var(--border-light); }
.subtechnique-item:hover { background: var(--bg-hover); }
.subtechnique-item.matched { background: #FFFFFF; border-color: var(--primary); }
.subtechnique-description { color: var(--text-secondary); font-size: 0.8125rem; }
.tag { background: var(--bg-hover); color: var(--text-secondary); }
.tag:hover { background: var(--primary); color: #FFFFFF; }

.technique-id {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1, "zero" 1;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
a.technique-id[href^="/techniques/A"], a.subtechnique-id[href^="/techniques/A"] { color: var(--stage-a); background: var(--tint-a); }
a.technique-id[href^="/techniques/B"], a.subtechnique-id[href^="/techniques/B"] { color: var(--stage-b); background: var(--tint-b); }
a.technique-id[href^="/techniques/C"], a.subtechnique-id[href^="/techniques/C"] { color: var(--stage-c); background: var(--tint-c); }
a.technique-id[href^="/techniques/D"], a.subtechnique-id[href^="/techniques/D"] { color: var(--stage-d); background: var(--tint-d); }
a.technique-id[href^="/techniques/E"], a.subtechnique-id[href^="/techniques/E"] { color: var(--stage-e); background: var(--tint-e); }
a.technique-id[href^="/techniques/F"], a.subtechnique-id[href^="/techniques/F"] { color: var(--stage-f); background: var(--tint-f); }
a.technique-id:hover, a.subtechnique-id:hover { text-decoration: underline; }

@media (max-width: 1024px) {
    .sidebar { box-shadow: none; border-right: 1px solid var(--hairline); }
    .sidebar-overlay { background: rgba(26, 22, 20, 0.35); }
}
@media (max-width: 768px) {
    .toolbar-left::after { display: none; }
    .main-content { padding: 1rem; }
    .content-title { font-size: 1.625rem; }
}

:root { --primary: #7A6345; }
.stage-count { color: var(--text-secondary); }

button.expand-indicator {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
}
button.expand-indicator:hover { border-color: var(--hairline); }
button.expand-indicator:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

h2.sidebar-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}

.subtechnique-item .rv-pill { margin-bottom: 0.125rem; }
.subtechnique-item .subtechnique-description { margin-top: 0.375rem; }

.subtechnique-item::before { content: none; display: none; }

.subtechnique-head { display: block; line-height: 1.4; }
.subtechnique-head .technique-id { display: inline-block; margin-right: 0.375rem; vertical-align: 0.06em; }
.subtechnique-head .subtechnique-name { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; line-height: 1.4; color: var(--text-primary); }
