:root {
    --bg: #050508;
    --surface: #0c0d14;
    --surface-card: #121420;
    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.14);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent: #6366f1;
    --accent-glow: rgba(99, 102, 241, 0.15);
    --champion: #10b981;
    --champion-glow: rgba(16, 185, 129, 0.12);
    --warning: #f59e0b;
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.6;
}

#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    z-index: 999;
    background: linear-gradient(90deg, var(--accent), var(--champion));
}

.hero-section {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 40px 48px;
    overflow: hidden;
}

.hero-accent-blur {
    position: absolute;
    top: -120px;
    left: 50%;
    width: 620px;
    height: 280px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(99, 102, 241, 0.18), rgba(16, 185, 129, 0.08) 45%, transparent 72%);
    filter: blur(30px);
    pointer-events: none;
}

.hero-meta {
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 0.08em;
    margin-bottom: 18px;
}

h1 {
    position: relative;
    max-width: 1020px;
    margin: 0 0 24px;
    font-size: clamp(2.4rem, 6vw, 4.7rem);
    line-height: 1.04;
    letter-spacing: 0;
}

.hero-subtitle {
    position: relative;
    max-width: 980px;
    margin-bottom: 32px;
    color: var(--text-secondary);
    font-size: 1.2rem;
}

code {
    font-family: var(--font-mono);
    color: var(--accent);
    background: var(--accent-glow);
    border-radius: 5px;
    padding: 0.08rem 0.28rem;
}

.btn-group { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.btn-modern-primary,
.btn-modern-secondary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    border-radius: 8px;
    padding: 14px 26px;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}
.btn-modern-primary { color: var(--bg); background: var(--text-primary); }
.btn-modern-secondary { color: var(--text-primary); border: 1px solid var(--border); background: rgba(255,255,255,0.025); }
.btn-modern-primary:hover,
.btn-modern-secondary:hover { transform: translateY(-2px); border-color: var(--border-hover); }
.btn-modern-primary i,
.btn-modern-secondary i { font-size: 1.2rem; }

.main-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 60px;
}

.metrics-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
}

.metric-block {
    min-width: 0;
    min-height: 130px;
    padding: 24px 18px;
    border-right: 1px solid var(--border);
}
.metric-block:last-child { border-right: 0; }
.metric-label {
    min-height: 42px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.metric-value {
    margin-top: 10px;
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    font-weight: 800;
    line-height: 1;
}
.champion-color { color: var(--champion); }

.notebook-switcher {
    position: sticky;
    top: 14px;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    margin: 32px 0 16px;
    background: rgba(12, 13, 20, 0.9);
    border: 1px solid var(--border);
    border-radius: 14px;
    backdrop-filter: blur(18px);
}

.notebook-tab {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 13px 12px;
    color: var(--text-secondary);
    background: transparent;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.notebook-tab i { margin-right: 7px; }
.notebook-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.035); border-color: var(--border); }
.notebook-tab.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(16,185,129,0.08));
    border-color: rgba(99,102,241,0.34);
    box-shadow: 0 0 34px rgba(99,102,241,0.10);
}

.notebook-panel { display: none; }
.notebook-panel.active { display: block; }

.section {
    position: relative;
    padding: 48px 0;
    scroll-margin-top: 24px;
}
.section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--border);
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.section.revealed::after { width: 100%; }
.section-collapsible { position: relative; display: block; }

.accordion-guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 24px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.02);
}
.accordion-guide-main {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--text-primary);
    font-weight: 700;
}
.accordion-guide-main i { color: var(--accent); }
.accordion-guide-hint { font-size: 0.86rem; }

.section-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 20px 0 20px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.section-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: var(--accent);
    opacity: 0.72;
}
.section-header:hover,
.section-header:focus-visible { background: rgba(255,255,255,0.025); outline: none; }

.panel-tag {
    display: block;
    margin-bottom: 6px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.panel-header-content h2 {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    letter-spacing: 0;
}
.panel-desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.98rem;
}

.chevron {
    position: relative;
    width: 64px;
    height: 36px;
    margin-right: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(255,255,255,0.035);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.chevron::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff, #cbd5e1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.24s ease, background 0.24s ease;
}
.chevron::after {
    content: "OFF";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.42);
    font-family: var(--font-mono);
    font-size: 0.58rem;
}
.section-header:hover .chevron,
.section-header:focus-visible .chevron {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 28px rgba(99, 102, 241, 0.12);
}
.section.expanded .chevron {
    background: linear-gradient(135deg, var(--accent), #818cf8);
    border-color: rgba(129, 140, 248, 0.58);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.22);
}
.section.expanded .chevron::before {
    transform: translateX(28px);
    background: linear-gradient(180deg, #ffffff, #eef2ff);
}
.section.expanded .chevron::after {
    content: "ON";
    left: 10px;
    right: auto;
    color: rgba(255, 255, 255, 0.88);
}

.section-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.36s ease;
}
.section-body-inner {
    padding-top: 24px;
    padding-bottom: 10px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.section.expanded .section-body-inner { opacity: 1; transform: translateY(0); }

.overview-text {
    max-width: 980px;
    color: var(--text-secondary);
    font-size: 1rem;
}
.overview-text p { margin-top: 0; margin-bottom: 16px; }

.note-grid,
.artifact-grid,
.diagnostic-grid,
.class-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 22px;
}

.dependency-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dependency-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}
.dependency-row:last-child { border-bottom: 0; }
.dep-icon {
    flex: 0 0 24px;
    width: 24px;
    margin-top: 3px;
    color: var(--text-primary);
    font-size: 1.15rem;
    text-align: center;
}
.dependency-row strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary);
    font-size: 1.03rem;
    font-weight: 700;
}
.dependency-row span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.58;
}
.note-card,
.artifact-card,
.diagnostic-card,
.class-card,
.mini-insight-card,
.tech-card {
    min-width: 0;
    border: 1px solid var(--border);
    background: var(--surface-card);
    border-radius: 14px;
    padding: 22px;
}
.note-card strong,
.artifact-card strong,
.diagnostic-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.note-card span,
.artifact-card span,
.diagnostic-card span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.artifact-card i,
.diagnostic-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    color: var(--champion);
    background: var(--champion-glow);
    border-radius: 8px;
}

.timeline-flow {
    position: relative;
    padding-left: 28px;
}
.flow-node {
    position: relative;
    padding-bottom: 24px;
}
.flow-node::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 18px;
    bottom: -8px;
    width: 1px;
    background: var(--border);
}
.flow-node:last-child::before { display: none; }
.flow-dot {
    position: absolute;
    left: -32px;
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 6px var(--accent-glow);
}
.flow-content {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 18px;
}
.flow-step {
    font-family: var(--font-mono);
    color: var(--text-muted);
}
.flow-content strong { display: block; color: var(--text-primary); }
.flow-content span:last-child { display: block; color: var(--text-secondary); font-size: 0.92rem; }

.matrix-table-container {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-card);
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
th {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(255,255,255,0.02);
}
td { color: var(--text-secondary); }
tr:last-child td { border-bottom: 0; }
.taxonomy-tag {
    display: inline-flex;
    color: var(--accent);
    background: var(--accent-glow);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
}
.target-style { color: var(--champion); background: var(--champion-glow); }
.target-row-highlight td { background: rgba(16,185,129,0.025); }

.mini-insight-grid,
.tech-grid,
.implementation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
.mini-insight-card h3,
.tech-card h3 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 1.08rem;
}
.mini-insight-card p,
.tech-card p,
.tech-card li {
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: 0.92rem;
}
.tech-badge {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--champion);
    background: var(--champion-glow);
    border-radius: 999px;
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.theory-block {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    background: var(--surface-card);
}
.theory-card-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
}
.theory-card-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.08rem;
}
.theory-badge {
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
}
.champion-badge { color: var(--champion); background: var(--champion-glow); }
.theory-explanation {
    margin: 0 0 14px;
    color: var(--text-secondary);
    font-size: 0.92rem;
}
.theory-math-container {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    color: var(--text-secondary);
    background: rgba(0,0,0,0.22);
}
.formula-clean {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    white-space: nowrap;
}

.architecture-map {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
}
.arch-row {
    display: grid;
    grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr;
    gap: 10px;
    align-items: center;
}
.arch-row.final-row {
    grid-template-columns: 1.6fr 36px 1.2fr 36px 1fr;
    margin-top: 22px;
}
.arch-box {
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    background: var(--surface-card);
    font-weight: 800;
}
.arch-box span {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
}
.arch-box.champion { border-color: rgba(16,185,129,0.45); box-shadow: inset 0 0 0 1px rgba(16,185,129,0.08); }
.arch-arrow {
    position: relative;
    height: 1px;
    background: var(--border-hover);
}
.arch-arrow::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -4px;
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--border-hover);
    border-right: 1px solid var(--border-hover);
    transform: rotate(45deg);
}
.arch-merge {
    margin: 18px auto;
    width: fit-content;
    max-width: 100%;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 14px;
}
.arch-box.wide { min-height: 92px; }

.phase-list,
.insight-list { display: grid; gap: 16px; }
.phase-row,
.insight-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) minmax(260px, 360px);
    gap: 18px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-card);
}
.phase-index,
.insight-rank-index {
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.rank-leader .phase-index,
.rank-leader .insight-rank-index { color: var(--champion); }
.phase-main strong,
.insight-model-identity strong { display: block; color: var(--text-primary); }
.phase-main span,
.insight-model-identity span { display: block; color: var(--text-secondary); font-size: 0.9rem; }
.phase-metrics,
.insight-score-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    text-align: right;
}
.phase-metric-label,
.insight-score-label {
    display: block;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
}
.phase-metric-value,
.insight-score-value {
    display: block;
    margin-top: 5px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 800;
}
.phase-metric-value.good,
.insight-score-value.accuracy-highlight { color: var(--champion); }
.insight-left-meta { display: flex; align-items: center; gap: 16px; }

.terminal-panel {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #07080d;
}
.terminal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.025);
}
.terminal-dots { display: flex; gap: 6px; }
.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
}
.terminal-dot:nth-child(2) { background: #f59e0b; }
.terminal-dot:nth-child(3) { background: #10b981; }
.terminal-title {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}
.terminal-body {
    padding: 24px;
    overflow-x: auto;
}
.terminal-body pre {
    margin: 0;
    min-width: max-content;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.7;
}
.code-comment { color: #64748b; font-style: italic; }
.code-keyword { color: #f43f5e; font-weight: 700; }
.code-fn { color: #38bdf8; }
.code-str { color: #10b981; }
.code-num { color: #fbbf24; }

.class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.class-card span {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
}
.class-card strong {
    display: block;
    margin-bottom: 10px;
    color: var(--text-primary);
}
.class-card p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; }

.synthesis-gradient-box {
    border-left: 4px solid var(--champion);
    padding: 18px 0 18px 22px;
    color: var(--text-secondary);
    background: transparent;
}
.synthesis-gradient-box p { margin-top: 0; margin-bottom: 12px; }
.synthesis-gradient-box strong { color: var(--text-primary); }

.portfolio-footer-gate {
    display: flex;
    justify-content: center;
    padding: 40px 0;
    margin-top: 40px;
    border-top: 1px solid var(--border);
}
.contact-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
}
.icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    transition: color 0.2s ease, transform 0.2s ease;
}
.icon-link:hover { color: var(--accent); transform: translateY(-2px); }
.editorial-credits {
    text-align: center;
    margin: 0 0 36px;
    font-size: 0.8rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.stagger-child {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.stagger-child.revealed { opacity: 1; transform: translateY(0); }
.mt-24 { margin-top: 24px; }

@media (max-width: 1180px) {
    .metrics-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .metric-block:nth-child(3) { border-right: 0; }
    .notebook-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .notebook-tab:last-child { grid-column: 1 / -1; }
    .arch-row,
    .arch-row.final-row { grid-template-columns: 1fr; }
    .arch-arrow { height: 28px; width: 1px; margin: 0 auto; }
    .arch-arrow::after { right: -4px; top: 18px; transform: rotate(135deg); }
}

@media (max-width: 980px) {
    .note-grid,
    .artifact-grid,
    .diagnostic-grid,
    .class-grid,
    .mini-insight-grid,
    .tech-grid,
    .implementation-grid { grid-template-columns: 1fr; }
    .phase-row,
    .insight-row { grid-template-columns: 1fr; }
    .phase-metrics,
    .insight-score-metrics { text-align: left; }
}

@media (max-width: 760px) {
    .hero-section { padding: 60px 20px 32px; }
    .main-layout { padding: 0 20px 48px; }
    .metrics-strip { grid-template-columns: 1fr; }
    .metric-block { border-right: 0; border-bottom: 1px solid var(--border); min-height: auto; }
    .metric-block:last-child { border-bottom: 0; }
    .metric-label { min-height: auto; }
    .notebook-switcher { position: relative; top: auto; grid-template-columns: 1fr; }
    .notebook-tab:last-child { grid-column: auto; }
    .section-header { grid-template-columns: 1fr auto; gap: 12px; padding-left: 16px; }
    .chevron { width: 58px; }
    .section.expanded .chevron::before { transform: translateX(22px); }
    .flow-content { grid-template-columns: 1fr; gap: 4px; }
    .phase-metrics,
    .insight-score-metrics { grid-template-columns: 1fr; }
    .terminal-body { padding: 18px; }
}

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


/* ===== Mobile-only correction layer for Quora Question Pairs page =====
   Desktop/tablet behavior above is preserved. These overrides activate only
   on phone-sized screens to remove accidental overflow and improve reading. ===== */
@media (max-width: 760px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body * {
        min-width: 0;
    }

    img,
    svg,
    video,
    canvas,
    iframe {
        max-width: 100%;
    }

    .hero-section,
    .main-layout {
        width: 100%;
        max-width: 100%;
        padding-left: clamp(16px, 5vw, 22px);
        padding-right: clamp(16px, 5vw, 22px);
    }

    .hero-section {
        padding-top: 52px;
        padding-bottom: 30px;
        overflow: visible;
    }

    .hero-accent-blur {
        left: 50%;
        width: 88vw;
        max-width: 380px;
        height: 220px;
        filter: blur(28px);
    }

    .hero-meta {
        max-width: 100%;
        font-size: 0.68rem;
        line-height: 1.8;
        letter-spacing: 0.12em;
        overflow-wrap: anywhere;
    }

    h1 {
        max-width: 100%;
        font-size: clamp(2.05rem, 10vw, 2.85rem);
        line-height: 1.12;
        letter-spacing: -0.035em;
        overflow-wrap: anywhere;
    }

    .hero-subtitle,
    .overview-text,
    .panel-desc,
    .theory-explanation,
    .synthesis-gradient-box,
    .mini-insight-card p,
    .tech-card p,
    .tech-card li,
    .class-card p {
        max-width: 100%;
        font-size: 0.96rem;
        line-height: 1.72;
        overflow-wrap: anywhere;
    }

    .btn-group {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: stretch;
    }

    .btn-modern-primary,
    .btn-modern-secondary {
        width: 100%;
        min-height: 56px;
        justify-content: center;
        padding: 14px 18px;
        font-size: 0.98rem;
        text-align: center;
    }

    .metrics-strip,
    .quora-metrics-six {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
        padding: 18px 0;
        margin-bottom: 24px;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .metric-block,
    .metric-block:first-child,
    .metric-block:last-child {
        min-height: auto;
        padding: 16px;
        border: 1px solid var(--border) !important;
        border-radius: 14px;
        background: rgba(255,255,255,0.025);
    }

    .metric-label {
        min-height: auto;
        margin-bottom: 12px;
        font-size: 0.64rem;
        line-height: 1.35;
        letter-spacing: 0.08em;
    }

    .metric-value {
        margin-top: 0;
        font-size: clamp(1.28rem, 8vw, 1.95rem);
        line-height: 1.05;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .notebook-switcher {
        position: sticky !important;
        top: 8px !important;
        z-index: 80 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
        margin: 22px 0 16px;
        padding: 8px;
        border-radius: 16px;
        max-height: min(42vh, 330px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .notebook-tab,
    .notebook-tab:last-child {
        grid-column: auto !important;
        min-height: 46px;
        padding: 11px 10px;
        font-size: 0.8rem;
        line-height: 1.25;
        white-space: normal;
        text-align: center;
    }

    .notebook-tab i {
        margin-right: 5px;
    }

    .section {
        padding: 30px 0;
        scroll-margin-top: 14px;
    }

    .accordion-guide {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px 16px;
        border-radius: 14px;
        margin-top: 20px;
    }

    .accordion-guide-hint {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    .section-header {
        grid-template-columns: minmax(0, 1fr) 54px;
        gap: 10px;
        padding: 16px 0 16px 16px;
        border-radius: 14px;
    }

    .section-header::before {
        top: 16px;
        bottom: 16px;
    }

    .panel-header-content {
        min-width: 0;
    }

    .panel-tag {
        font-size: 0.66rem;
        line-height: 1.45;
        letter-spacing: 0.12em;
        overflow-wrap: anywhere;
    }

    .panel-header-content h2 {
        font-size: clamp(1.35rem, 7vw, 2rem);
        line-height: 1.16;
        overflow-wrap: anywhere;
    }

    .chevron {
        width: 54px;
        height: 32px;
        margin-right: 0;
        justify-self: end;
    }

    .chevron::before {
        width: 24px;
        height: 24px;
    }

    .section.expanded .chevron::before {
        transform: translateX(22px);
    }

    .chevron::after {
        right: 7px;
        font-size: 0.48rem;
    }

    .section.expanded .chevron::after {
        left: 8px;
    }

    .section-body-inner {
        padding-top: 18px;
    }

    .note-grid,
    .artifact-grid,
    .diagnostic-grid,
    .class-grid,
    .mini-insight-grid,
    .tech-grid,
    .implementation-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .note-card,
    .artifact-card,
    .diagnostic-card,
    .class-card,
    .mini-insight-card,
    .tech-card,
    .theory-block,
    .terminal-panel,
    .matrix-table-container,
    .architecture-map,
    .synthesis-gradient-box {
        max-width: 100%;
        border-radius: 13px;
    }

    .note-card,
    .artifact-card,
    .diagnostic-card,
    .class-card,
    .mini-insight-card,
    .tech-card,
    .theory-block,
    .architecture-map {
        padding: 20px;
    }

    .synthesis-gradient-box {
        padding: 22px;
        border-left-width: 3px;
        background: rgba(255,255,255,0.018);
        border-radius: 14px;
        border-top: 1px solid var(--border);
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .dependency-row {
        gap: 12px;
        padding: 14px 0;
    }

    .dep-icon {
        flex: 0 0 22px;
        width: 22px;
        font-size: 1rem;
    }

    .dependency-row strong,
    .dependency-row span,
    .flow-content strong,
    .flow-content span,
    .note-card span,
    .artifact-card span,
    .diagnostic-card span,
    .class-card strong,
    .class-card p {
        overflow-wrap: anywhere;
    }

    .timeline-flow {
        padding-left: 20px;
    }

    .flow-node {
        padding-bottom: 20px;
    }

    .flow-dot {
        left: -20px;
        top: 9px;
    }

    .flow-node::before {
        left: -16px;
        top: 21px;
    }

    .flow-content {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .flow-step {
        font-size: 0.76rem;
    }

    .architecture-map {
        padding: 18px;
        overflow: hidden;
    }

    .arch-row,
    .arch-row.final-row {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .arch-box,
    .arch-box.wide {
        min-height: auto;
        padding: 16px;
        overflow-wrap: anywhere;
    }

    .arch-box span {
        overflow-wrap: anywhere;
    }

    .arch-arrow {
        width: 1px;
        height: 26px;
        margin: 0 auto;
    }

    .arch-arrow::after {
        right: -4px;
        top: 17px;
        transform: rotate(135deg);
    }

    .arch-merge {
        width: 100%;
        text-align: center;
        white-space: normal;
        line-height: 1.5;
    }

    .phase-row,
    .insight-row {
        grid-template-columns: 1fr !important;
        gap: 14px;
        padding: 18px;
    }

    .insight-left-meta {
        align-items: flex-start;
        gap: 12px;
    }

    .phase-metrics,
    .insight-score-metrics {
        width: 100%;
        max-width: none;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
        text-align: left;
    }

    .phase-metrics > div,
    .insight-score-metrics > div {
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: rgba(255,255,255,0.025);
    }

    .phase-metric-label,
    .insight-score-label {
        min-height: auto;
        font-size: 0.61rem;
        line-height: 1.35;
    }

    .phase-metric-value,
    .insight-score-value {
        font-size: 0.98rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .terminal-header {
        padding: 12px 14px;
        gap: 10px;
    }

    .terminal-title {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .terminal-body {
        padding: 18px 16px;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
    }

    .terminal-body pre {
        min-width: 0 !important;
        max-width: 100%;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        font-size: 0.76rem;
        line-height: 1.72;
    }

    .theory-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .theory-badge,
    .tech-badge,
    .taxonomy-tag {
        max-width: 100%;
        white-space: normal;
        line-height: 1.35;
    }

    .theory-math-container,
    .formula-clean {
        max-width: 100%;
        padding: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: normal;
        font-size: 0.78rem;
        line-height: 1.65;
    }

    .matrix-table-container {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .matrix-table-container table,
    .matrix-table-container thead,
    .matrix-table-container tbody,
    .matrix-table-container th,
    .matrix-table-container td,
    .matrix-table-container tr {
        display: block;
        width: 100%;
    }

    .matrix-table-container thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .matrix-table-container tbody {
        display: grid;
        gap: 12px;
    }

    .matrix-table-container tr {
        border: 1px solid var(--border);
        border-radius: 13px;
        background: var(--surface-card);
        overflow: hidden;
    }

    .matrix-table-container tr:hover td {
        background: transparent;
    }

    .matrix-table-container td {
        display: grid;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 13px 15px;
        border-bottom: 1px solid var(--border);
        color: var(--text-secondary);
        text-align: left;
        overflow-wrap: anywhere;
    }

    .matrix-table-container td:last-child {
        border-bottom: none;
    }

    .matrix-table-container td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-family: var(--font-mono);
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.45;
        text-transform: uppercase;
    }

    td code,
    .overview-text code,
    .panel-desc code,
    .note-card code,
    .mini-insight-card code,
    .tech-card code,
    .synthesis-gradient-box code,
    .terminal-body code,
    .formula-clean code {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .portfolio-footer-gate {
        padding: 30px 16px;
        margin-top: 26px;
    }

    .contact-icons {
        width: 100%;
        justify-content: center;
        gap: 14px;
    }

    .icon-link {
        width: 44px;
        height: 44px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: rgba(255,255,255,0.025);
        font-size: 1.1rem;
    }

    .editorial-credits {
        margin: 18px 0 28px;
        padding: 0 18px;
        line-height: 1.6;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 380px) {
    .phase-metrics,
    .insight-score-metrics {
        grid-template-columns: 1fr !important;
    }

    .matrix-table-container td {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

@media (max-width: 340px) {
    .metrics-strip,
    .quora-metrics-six,
    .notebook-switcher {
        grid-template-columns: 1fr !important;
    }
}

/* ===== QQP mobile compact sticky tabs + single-row contact footer ===== */
@media (max-width: 760px) {
    .notebook-switcher {
        position: sticky !important;
        top: 8px !important;
        z-index: 80 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        gap: 8px !important;
        width: 100%;
        max-width: 100%;
        max-height: none !important;
        margin: 22px 0 16px;
        padding: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

    .notebook-switcher::-webkit-scrollbar {
        display: none;
    }

    .notebook-tab,
    .notebook-tab:last-child {
        grid-column: auto !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content;
        min-height: 46px;
        padding: 11px 14px !important;
        white-space: nowrap !important;
        text-align: center;
        line-height: 1.2;
        scroll-snap-align: center;
    }

    .notebook-tab i {
        margin-right: 6px;
    }

    .portfolio-footer-gate {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .contact-icons {
        width: 100%;
        max-width: 100%;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center;
        align-items: center;
        gap: clamp(6px, 2vw, 12px) !important;
    }

    .icon-link {
        flex: 0 0 clamp(36px, 10.5vw, 44px);
        width: clamp(36px, 10.5vw, 44px) !important;
        height: clamp(36px, 10.5vw, 44px) !important;
        font-size: clamp(1rem, 4.5vw, 1.1rem);
    }
}

@media (max-width: 340px) {
    .notebook-switcher {
        display: flex !important;
        grid-template-columns: none !important;
    }
}

@media (max-width: 760px) {
    html,
    body {
        overflow-x: clip !important;
    }
}