/* MAIA 2026 research-page layer. The legacy method-card rules remain in main.css. */
:root {
    --research-ink: #172a46;
    --research-ink-soft: #294461;
    --research-blue: #0173b2;
    --research-green: #087f6b;
    --research-gold: #c77c02;
    --research-paper: #fbfaf7;
    --research-line: #dbe1e7;
    --research-muted: #5d6b78;
    --research-white: #fff;
    --research-focus: #f3b51b;
    --serif: 'Source Serif 4', Georgia, serif;
}

html[lang="zh-CN"] body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

body {
    background: var(--research-paper);
    color: var(--research-ink);
}

button, select, input { font: inherit; }
button, a, select, input, summary { outline-offset: 3px; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 3px solid var(--research-focus);
}

.skip-link {
    position: fixed;
    z-index: 3000;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--research-ink);
    color: white;
    transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.navbar { border-bottom: 1px solid rgba(23, 42, 70, 0.1); box-shadow: none; }
.navbar .nav-shell { max-width: 1440px; gap: 1rem; }
.nav-brand { color: var(--research-ink); font-size: 1rem; white-space: nowrap; }
.nav-center { display: flex; align-items: center; gap: 0.15rem; }
.nav-center a { padding: 0.55rem 0.7rem; color: var(--research-ink-soft); font-size: 0.9rem; font-weight: 600; border-radius: 6px; }
.nav-center a:hover { color: var(--research-blue); background: #eef6fa; }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.control-button, .focus-controls button {
    border: 1px solid var(--research-ink);
    background: transparent;
    color: var(--research-ink);
    border-radius: 6px;
    padding: 0.55rem 0.8rem;
    font-weight: 650;
    cursor: pointer;
}
.control-button:hover, .focus-controls button:hover { background: var(--research-ink); color: white; }
.language-button { min-width: 3.3rem; }

.research-hero {
    min-height: 760px;
    padding: 9rem 0 6rem;
    background: linear-gradient(120deg, #172a46, #144055);
    color: white;
}
.research-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(7, 20, 36, 0.34));
    pointer-events: none;
}
.research-hero .hero-content { max-width: 920px; text-align: left; }
.hero-kicker-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.8rem; }
.hero-kicker-row span { padding: 0.32rem 0.65rem; border: 1px solid rgba(255,255,255,0.36); border-radius: 999px; font-size: 0.8rem; letter-spacing: 0.04em; }
.research-hero .hero-title { margin: 0; font: 700 clamp(5rem, 12vw, 9.5rem)/0.86 var(--serif); letter-spacing: -0.055em; }
.research-hero .hero-subtitle { margin: 1.1rem 0 0.75rem; max-width: 850px; font: 600 clamp(1.65rem, 3.8vw, 3rem)/1.08 var(--serif); }
.research-hero .hero-description { max-width: 760px; margin: 0 0 1.7rem; color: rgba(255,255,255,0.88); font-size: 1.14rem; }
.hero-authors { margin-bottom: 0.2rem; font-weight: 600; }
.coauthor-note { color: rgba(255,255,255,0.68); font-size: 0.82rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0; }
.primary-link, .secondary-link { display: inline-flex; align-items: center; min-height: 46px; padding: 0.72rem 1rem; border-radius: 6px; font-weight: 700; }
.primary-link { color: var(--research-ink); background: white; }
.primary-link:hover { color: var(--research-blue); background: #f5f8fa; }
.secondary-link { color: white; border: 1px solid rgba(255,255,255,0.5); }
.secondary-link:hover { color: white; background: rgba(255,255,255,0.1); }
.scope-note { display: flex; gap: 0.75rem; padding: 0.8rem 1rem; border-left: 3px solid #ffd479; background: rgba(0,0,0,0.17); font-size: 0.9rem; }

.research-section { background: var(--research-paper); }
.alternate-section { background: #eef2f4; }
.compact-container { max-width: 1100px; }
.section-eyebrow { margin-bottom: 0.55rem; color: var(--research-blue); font-size: 0.79rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.research-section .section-title, .verified-demo .section-title, .evidence-section .section-title, .research-resources .section-title {
    margin-bottom: 1.1rem;
    color: var(--research-ink);
    font: 700 clamp(2.15rem, 4vw, 3.6rem)/1.08 var(--serif);
    letter-spacing: -0.025em;
}
.lead-copy { max-width: 880px; color: var(--research-ink-soft); font-size: 1.23rem; line-height: 1.7; }
.question-grid, .threat-grid, .limitations-grid { display: grid; gap: 1rem; }
.question-grid { grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
.research-card, .threat-card, .limitations-grid article {
    background: white;
    border: 1px solid var(--research-line);
    border-radius: 10px;
    padding: 1.45rem;
}
.research-card h3, .threat-card h3, .limitations-grid h3 { color: var(--research-ink); }
.research-card p:last-child, .threat-card p, .limitations-grid p { color: var(--research-muted); margin-bottom: 0; }
.card-index { color: var(--research-blue); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; }
.threat-grid { grid-template-columns: 1fr 1fr; margin-top: 2rem; }
.threat-card { padding: 2rem; }
.access-tag { display: inline-flex; margin-bottom: 1.3rem; color: var(--research-green); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.source-note { margin: 1.2rem 0 0; color: var(--research-muted); font-size: 0.9rem; }
.rationale-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3rem; align-items: start; }
.rationale-copy { color: var(--research-ink-soft); font-size: 1.08rem; }
.principle-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin-top: 1.6rem; }
.principle-strip span { padding: 0.85rem; border-top: 3px solid var(--research-blue); background: #eef6fa; color: var(--research-ink); font-size: 0.86rem; font-weight: 650; }

/* Preserve the legacy method component's geometry while matching the rebuilt page type. */
.method-section .section-title { font-family: var(--serif); color: var(--research-ink); letter-spacing: -0.02em; }
.method-section .section-subtitle { color: var(--research-muted); }
.method-section .method-step { border: 1px solid rgba(23, 42, 70, 0.06); }
.method-route { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 1rem; }
.method-route span { padding: 0.85rem 1rem; border-left: 3px solid var(--research-blue); background: #f2f6f8; }
.method-route span:last-child { border-left-color: var(--research-green); }
.method-route strong, .method-route small { display: block; }
.method-route strong { color: var(--research-ink); }
.method-route small { margin-top: 0.2rem; color: var(--research-muted); }
.importance-preview { display: grid; grid-template-columns: minmax(320px, 1.15fr) minmax(230px, 0.85fr); gap: 1rem; align-items: center; margin: 1rem 0 0; padding: 0.85rem; border: 1px solid var(--research-line); border-radius: 8px; background: #f8fafb; }
.importance-preview img { display: block; width: 100%; height: auto; border-radius: 6px; }
.importance-preview figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; color: var(--research-muted); font-size: 0.82rem; line-height: 1.5; }
.importance-preview .asset-label { flex: 0 0 auto; }

.technical-deep-dive { padding: 1.35rem; border: 1px solid #cbd7de; border-radius: 11px; background: #eef3f5; }
.technical-heading { display: grid; grid-template-columns: 1fr minmax(280px, 0.56fr); gap: 2rem; align-items: end; margin-bottom: 0.9rem; }
.technical-heading h3 { margin: 0.3rem 0 0; color: var(--research-ink); font: 700 clamp(1.35rem, 2.4vw, 2rem)/1.2 var(--serif); }
.technical-heading p { margin: 0; color: var(--research-muted); }
.schematic-status, .asset-label { display: inline-flex; width: max-content; padding: 0.25rem 0.5rem; border: 1px solid #98b4c4; border-radius: 999px; background: #f7fbfd; color: var(--research-blue); font-size: 0.69rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; }
.technical-panel { margin-top: 0.65rem; border: 1px solid #c8d3da; border-radius: 8px; background: white; overflow: clip; }
.technical-panel summary { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; cursor: pointer; color: var(--research-ink); font-weight: 750; list-style: none; }
.technical-panel summary::-webkit-details-marker { display: none; }
.technical-panel[open] summary { border-bottom: 1px solid var(--research-line); background: #f7fafb; }
.summary-hint { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--research-muted); font-size: 0.72rem; font-weight: 650; white-space: nowrap; }
.chevron { width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 180ms ease; }
.technical-panel[open] .chevron { transform: rotate(225deg); }
.technical-panel-body { padding: 1rem; }
.mechanism-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.mechanism-card { display: flex; min-width: 0; min-height: 390px; flex-direction: column; margin: 0; padding: 1rem; border: 1px solid var(--research-line); border-radius: 8px; background: #fbfcfd; }
.mechanism-card figcaption strong, .mechanism-card figcaption span { display: block; }
.mechanism-card figcaption strong { margin-bottom: 0.42rem; color: var(--research-ink); font-size: 0.98rem; }
.mechanism-card figcaption span { min-height: 112px; color: var(--research-muted); font-size: 0.8rem; line-height: 1.5; }
.paper-evidence-card img { display: block; width: 100%; height: auto; margin-top: 0.75rem; border-radius: 6px; }
.paper-evidence-card .asset-label { margin-top: 0.6rem; }
.mini-flow { display: flex; flex: 1; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 0.85rem; }
.flow-node, .generator-row > span, .query-rank > .flow-node { display: flex; min-height: 58px; min-width: 0; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 0.55rem; border: 1px solid #b9c8d1; border-radius: 6px; background: white; color: var(--research-ink); text-align: center; }
.flow-node b { font-size: 0.72rem; }
.flow-arrow, .context-arrow { color: var(--research-blue); font-weight: 800; }
.waveform-mark { width: 100%; height: 20px; margin-top: 0.35rem; background: linear-gradient(165deg, transparent 42%, #0173b2 43% 48%, transparent 49%), linear-gradient(15deg, transparent 45%, #0173b2 46% 51%, transparent 52%); background-size: 13px 20px; }
.spectrogram-mark { width: 100%; height: 20px; margin-top: 0.35rem; background: repeating-linear-gradient(90deg, #153a53 0 5px, #5b9db7 5px 8px, #d5a64f 8px 10px); }
.model-node { border-color: #7fa9bd; background: #eef7fb; }
.score-node { flex: 0 0 48px; border-color: #b79b62; background: #fff8e7; }
.gradcam-weighting-asset { display: flex; flex: 1; min-height: 0; flex-direction: column; justify-content: center; margin-top: 0.7rem; }
.gradcam-weighting-asset img { display: block; width: 100%; height: auto; border: 1px solid #c7d1d8; border-radius: 6px; background: #fbfcfd; }
.gradcam-weighting-asset .asset-label { margin-top: 0.6rem; }
.formula-block { width: 100%; max-width: 100%; margin-top: 0.75rem; padding: 0.7rem; overflow-x: auto; border: 1px solid #c7d1d8; border-radius: 6px; background: white; color: #243b53; font: 600 0.76rem/1.6 'SFMono-Regular', Consolas, monospace; text-align: center; white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.method-boundary { margin: 0.9rem 0 0; padding: 0.85rem 1rem; border-left: 3px solid var(--research-gold); background: #fff8e8; color: var(--research-ink-soft); font-size: 0.86rem; }
.chunk-track { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: auto; border: 1px solid #9fb2be; border-radius: 6px; overflow: hidden; }
.chunk-track span { display: grid; min-height: 64px; place-items: center; border-right: 1px solid #c6d2d9; background: white; color: var(--research-ink); }
.chunk-track span:last-child { border-right: 0; }
.chunk-track .masked-chunk { background: repeating-linear-gradient(135deg, #edeff1, #edeff1 7px, #d9dee2 7px, #d9dee2 14px); box-shadow: inset 0 -4px 0 var(--research-gold); }
.chunk-track small { font-size: 0.61rem; }
.taper-note { display: flex; justify-content: center; gap: 0.55rem; margin-top: 0.65rem; color: var(--research-muted); font-size: 0.7rem; }
.query-rank { display: grid; grid-template-columns: 0.55fr 0.55fr 1fr; gap: 0.45rem; align-items: center; flex: 1; margin-top: 0.6rem; }
.rank-bars { display: grid; gap: 0.35rem; }
.rank-bars i { position: relative; display: flex; min-height: 28px; align-items: center; padding-left: 0.4rem; overflow: hidden; border: 1px solid #c1cdd4; border-radius: 4px; color: var(--research-ink); font-size: 0.68rem; font-style: normal; }
.rank-bars i::before { content: ''; position: absolute; z-index: 0; inset: 0 auto 0 0; width: var(--rank); background: #d6eaf2; }
.rank-bars i > * { position: relative; }
.rank-bars i.is-top { border-color: #c2963f; box-shadow: inset 0 -3px #d2a64b; }
.refinement-animation { display: grid; gap: 0.34rem; flex: 1; align-content: center; margin-top: 0.7rem; }
.refinement-level { display: grid; gap: 0.25rem; }
.level-coarse { grid-template-columns: repeat(3, 1fr); }
.level-medium { width: 62%; grid-template-columns: repeat(3, 1fr); margin-left: 22%; }
.level-fine { width: 48%; grid-template-columns: repeat(4, 1fr); margin-left: 40%; }
.refinement-level span { height: 32px; border: 1px solid #9fb2be; border-radius: 4px; background: #f6f8f9; }
.refinement-level span.active { border-color: #c18c27; background: #f6dda9; animation: refinePulse 1.8s ease-in-out infinite; }
.refinement-connector { color: var(--research-blue); text-align: center; }
.refinement-animation.is-paused .active { animation-play-state: paused; }
.refinement-animation.is-resetting .active { animation: none; }
.animation-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.65rem; }
.inline-control { min-height: 34px; padding: 0.35rem 0.6rem; border: 1px solid #9baeb9; border-radius: 5px; background: white; color: var(--research-ink); cursor: pointer; font-size: 0.72rem; font-weight: 700; }
.animation-controls span { color: var(--research-muted); font-size: 0.67rem; }
@keyframes refinePulse { 0%, 100% { filter: saturate(0.7); transform: scale(1); } 50% { filter: saturate(1.25); transform: scale(1.035); } }

.context-regeneration { display: grid; grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.38fr); gap: 1rem; margin-top: 1.2rem; padding: 1rem; border: 1px solid #cbd7de; border-radius: 9px; background: #f5f8f9; }
.context-copy h4 { margin: 0.45rem 0; color: var(--research-ink); font: 700 1.35rem/1.22 var(--serif); }
.context-copy p { margin: 0; color: var(--research-muted); font-size: 0.86rem; }
.context-flow { min-width: 0; }
.mask-intro { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin-bottom: 0.4rem; }
.mask-intro span { padding: 0.35rem 0.55rem; border: 1px solid #bdcbd3; border-radius: 5px; background: white; color: var(--research-ink); font-size: 0.68rem; font-weight: 700; }
.mask-intro b { color: var(--research-blue); }
.audio-context-row { display: grid; grid-template-columns: 1fr 0.7fr 1fr; gap: 0.25rem; }
.audio-context-row span { display: grid; min-height: 58px; place-items: center; padding: 0.5rem; border: 1px solid #a9bbc5; background: white; color: var(--research-ink); font-size: 0.7rem; text-align: center; }
.audio-context-row .missing { border-color: #b99a58; background: repeating-linear-gradient(135deg, #f6f0e2, #f6f0e2 7px, #e7dcc3 7px, #e7dcc3 14px); }
.audio-context-row .generated-gap { border-color: #4e927f; background: #e6f4ef; }
.context-arrow { display: block; margin: 0.2rem 0; text-align: center; }
.generator-row { display: flex; align-items: center; gap: 0.35rem; }
.generator-row > span { min-height: 48px; font-size: 0.68rem; }
.generator-row > .flow-arrow { flex: 0 0 auto; min-height: 0; padding: 0; border: 0; background: transparent; }
.generator-row .generator-node { border-color: #7fa9bd; background: #e8f3f7; }
.generator-row .generator-node small { display: block; margin-top: 0.15rem; color: var(--research-muted); font-size: 0.6rem; }
.context-flow > p { margin: 0.45rem 0 0; color: var(--research-muted); font-size: 0.72rem; text-align: center; }
.optimization-panels { margin-top: 1rem; }
.optimization-body { padding: 1rem 1.1rem 1.1rem; }
.formula-large { font-size: clamp(0.74rem, 1.2vw, 0.9rem); }
.objective-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-top: 0.75rem; }
.objective-grid p { margin: 0; padding: 0.75rem; border: 1px solid var(--research-line); border-radius: 6px; background: #f8fafb; }
.objective-grid strong, .objective-grid span { display: block; }
.objective-grid span { margin-top: 0.25rem; color: var(--research-muted); font-size: 0.8rem; }
.formula-note { margin: 0.45rem 0 0; color: var(--research-muted); font-size: 0.8rem; text-align: center; }
.optimization-cycle { display: grid; grid-template-columns: repeat(7, auto); gap: 0.35rem; align-items: center; margin-top: 0.8rem; }
.optimization-cycle span { padding: 0.6rem; border: 1px solid #c2cfd6; border-radius: 5px; background: #f7fafb; color: var(--research-ink); font-size: 0.72rem; text-align: center; }
.optimization-cycle b { color: var(--research-blue); }
.formula-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.compact-procedure { columns: 2; column-gap: 2rem; margin: 0.9rem 0; padding-left: 1.25rem; color: var(--research-ink-soft); }
.compact-procedure li { break-inside: avoid; margin-bottom: 0.4rem; padding-left: 0.2rem; font-size: 0.82rem; }
.comparison-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
.comparison-strip span { padding: 0.75rem; border-top: 3px solid var(--research-blue); background: #f2f7f9; }
.comparison-strip span:nth-child(2) { border-top-color: var(--research-green); }
.comparison-strip span:nth-child(3) { border-top-color: var(--research-gold); }
.comparison-strip strong, .comparison-strip small { display: block; }
.comparison-strip small { margin-top: 0.2rem; color: var(--research-muted); }

.verified-demo { background: #e9eff2; }
.demo-heading-grid, .evidence-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.65fr); gap: 3rem; align-items: end; }
.demo-disclaimer, .evidence-heading > p { margin-bottom: 1.3rem; padding-left: 1.2rem; border-left: 3px solid var(--research-gold); color: var(--research-ink-soft); }
.demo-workbench { margin-top: 2rem; border: 1px solid #cfd9df; border-radius: 12px; background: white; overflow: hidden; box-shadow: 0 18px 55px rgba(23,42,70,0.08); }
.demo-toolbar { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; background: var(--research-ink); color: white; }
.demo-toolbar strong, .field-label { display: block; }
.field-label { margin-bottom: 0.2rem; color: rgba(255,255,255,0.67); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.candidate-control select, .player-secondary-row select { min-height: 40px; padding: 0.45rem 2rem 0.45rem 0.65rem; border: 1px solid #b8c5ce; border-radius: 5px; background: white; color: var(--research-ink); }
.demo-step { padding: 2rem; border-top: 1px solid var(--research-line); }
.demo-step-heading { display: grid; grid-template-columns: 42px 1fr; gap: 1rem; margin-bottom: 1.3rem; }
.demo-step-number { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: var(--research-blue); color: white; font-weight: 700; }
.demo-step-heading h3 { margin-bottom: 0.35rem; color: var(--research-ink); }
.demo-step-heading p { max-width: 900px; margin: 0; color: var(--research-muted); }
.spectrogram-frame { position: relative; overflow: hidden; border: 1px solid #cbd7de; border-radius: 7px; background: #071826; }
.spectrogram-frame img { display: block; width: 100%; height: auto; }
.region-overlays { position: absolute; inset: 0; pointer-events: none; }
.region-overlay { position: absolute; top: 0; bottom: 0; border-left: 1px solid rgba(255,216,122,0.95); border-right: 1px solid rgba(255,216,122,0.95); background: rgba(255,191,71,0.18); }
.sample-context { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1.5rem; margin-top: 0.75rem; color: var(--research-muted); font-size: 0.86rem; }
.spectrogram-grid { display: grid; gap: 0.9rem; }
.spectrogram-panel { margin: 0; }
.spectrogram-panel figcaption { margin-bottom: 0.35rem; color: var(--research-ink); font-size: 0.84rem; font-weight: 700; }
.compact-frame img { width: 100%; }
.difference-panel, .provenance-panel { margin-top: 1rem; border: 1px solid var(--research-line); border-radius: 7px; background: #f8fafb; }
.difference-panel summary, .provenance-panel summary { cursor: pointer; padding: 0.9rem 1rem; color: var(--research-ink); font-weight: 650; }
.difference-panel figure { margin: 0; padding: 0 1rem 1rem; }
.difference-panel img { display: block; width: 100%; border-radius: 5px; }
.difference-panel figcaption { margin-top: 0.5rem; color: var(--research-muted); font-size: 0.82rem; }
.track-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.track-button { min-height: 82px; padding: 0.85rem 1rem; border: 1px solid #bcc9d1; border-radius: 7px; background: white; color: var(--research-ink); text-align: left; cursor: pointer; }
.track-button span, .track-button small { display: block; }
.track-button span { margin-bottom: 0.15rem; font-weight: 700; }
.track-button small { color: var(--research-muted); }
.track-button.is-active { border-color: var(--research-blue); box-shadow: inset 0 0 0 2px var(--research-blue); background: #eef7fb; }
.shared-player { margin-top: 0.8rem; padding: 1.1rem; border-radius: 8px; background: var(--research-ink); color: white; }
.player-primary-row, .player-secondary-row { display: flex; align-items: center; gap: 0.8rem; }
.player-primary-row { justify-content: space-between; }
.primary-control, .secondary-control { min-height: 42px; border-radius: 5px; padding: 0.55rem 0.9rem; cursor: pointer; font-weight: 650; }
.primary-control { min-width: 92px; border: 1px solid white; background: white; color: var(--research-ink); }
.secondary-control { border: 1px solid rgba(255,255,255,0.42); background: transparent; color: white; }
.secondary-control[aria-pressed="true"] { border-color: #ffd479; background: rgba(255,212,121,0.14); }
.time-readout { display: flex; gap: 0.35rem; min-width: 118px; font-variant-numeric: tabular-nums; }
.timeline-shell { position: relative; margin: 1rem 0 0.7rem; }
.timeline-shell input { width: 100%; accent-color: white; }
.timeline-markers { position: absolute; z-index: 0; inset: 4px 0 auto; height: 12px; pointer-events: none; }
.timeline-marker { position: absolute; height: 100%; background: #ffd479; opacity: 0.48; }
#seek-slider { position: relative; z-index: 1; background: transparent; }
.player-secondary-row { justify-content: space-between; flex-wrap: wrap; }
.player-secondary-row label { display: flex; align-items: center; gap: 0.55rem; font-size: 0.84rem; }
.volume-control input { width: 120px; accent-color: white; }
.player-status { margin: 0.7rem 0 0; color: rgba(255,255,255,0.72); font-size: 0.82rem; }
.listen-step audio { display: none; }
.verification-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.verification-badges span { padding: 0.35rem 0.65rem; border: 1px solid #9fc4b9; border-radius: 999px; background: #edf7f3; color: #166451; font-size: 0.76rem; font-weight: 700; }
.provenance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 0 1rem 1rem; }
.provenance-grid div { min-width: 0; padding: 0.8rem 0; border-bottom: 1px solid var(--research-line); }
.provenance-grid dt { color: var(--research-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.provenance-grid dd { margin: 0.2rem 0 0; overflow-wrap: anywhere; color: var(--research-ink); font-size: 0.88rem; font-weight: 600; }
.provenance-links { display: flex; flex-wrap: wrap; gap: 0.7rem 1.2rem; padding: 0 1rem 1rem; font-size: 0.85rem; font-weight: 650; }
.demo-error { margin-top: 1rem; padding: 1rem; border: 1px solid #c3442d; background: #fff3ef; color: #7a281b; }

.evidence-section { background: var(--research-ink); color: white; }
.evidence-section .section-title { color: white; }
.evidence-section .section-eyebrow { color: #a9d7ed; }
.evidence-heading > p { color: rgba(255,255,255,0.76); }
.aggregate-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin: 2rem 0; }
.aggregate-results article { padding: 1.15rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; background: rgba(255,255,255,0.05); }
.aggregate-results span, .aggregate-results strong, .aggregate-results small { display: block; }
.aggregate-results span { font-size: 0.78rem; font-weight: 650; }
.aggregate-results strong { margin: 0.3rem 0 0.1rem; font: 700 2.5rem/1 var(--serif); }
.aggregate-results small { color: rgba(255,255,255,0.7); }
.paper-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; }
.paper-results-table { width: 100%; min-width: 760px; border-collapse: collapse; color: white; }
.paper-results-table caption { padding: 0.9rem 1rem; text-align: left; color: rgba(255,255,255,0.72); font-size: 0.82rem; }
.paper-results-table th, .paper-results-table td { padding: 0.75rem 1rem; border-top: 1px solid rgba(255,255,255,0.13); text-align: left; font-variant-numeric: tabular-nums; }
.paper-results-table th { color: #a9d7ed; font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; }
.limitations-grid { grid-template-columns: repeat(2, 1fr); margin-top: 1rem; }
.limitations-grid article { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); }
.limitations-grid h3 { color: white; font-size: 1.05rem; }
.limitations-grid p { color: rgba(255,255,255,0.7); }
.evaluation-note { margin: 1rem 0 0; color: rgba(255,255,255,0.7); font-size: 0.88rem; }

.attack-properties { background: #edf2f4; }
.hypothesis-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: 2.5rem; align-items: end; }
.hypothesis-heading > div:last-child { padding-left: 1rem; border-left: 3px solid var(--research-gold); }
.hypothesis-heading > div:last-child p { margin: 0.6rem 0 0; color: var(--research-muted); }
.hypothesis-status { display: inline-flex; padding: 0.35rem 0.65rem; border: 1px solid #b68b3b; border-radius: 999px; background: #fff6df; color: #7a5619; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.robustness-table-wrap { margin-top: 1.6rem; overflow-x: auto; border: 1px solid #c6d2d9; border-radius: 9px; background: white; }
.robustness-table { width: 100%; min-width: 1040px; border-collapse: collapse; table-layout: fixed; }
.robustness-table th, .robustness-table td { padding: 0.95rem; border-right: 1px solid #d7e0e5; border-bottom: 1px solid #d7e0e5; vertical-align: top; text-align: left; }
.robustness-table tr:last-child th, .robustness-table tr:last-child td { border-bottom: 0; }
.robustness-table th:last-child, .robustness-table td:last-child { border-right: 0; }
.robustness-table thead th { background: var(--research-ink); color: white; font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; }
.robustness-table thead th:nth-child(1) { width: 17%; }
.robustness-table thead th:nth-child(2), .robustness-table thead th:nth-child(3) { width: 29%; }
.robustness-table thead th:nth-child(4) { width: 25%; }
.robustness-table tbody th { color: var(--research-ink); font-size: 0.88rem; }
.robustness-table tbody td { color: var(--research-muted); font-size: 0.82rem; line-height: 1.48; }
.status-open, .status-hypothesis, .status-unestablished { display: inline-flex; padding: 0.35rem 0.48rem; border-left: 3px solid var(--research-gold); background: #fff7e7; color: #684711; font-weight: 650; }
.roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-top: 1rem; }
.roadmap-grid article { padding: 1.1rem; border: 1px solid #ccd7dd; border-radius: 8px; background: white; }
.roadmap-grid h3 { margin: 0.4rem 0; color: var(--research-ink); font-size: 1rem; }
.roadmap-grid p { margin: 0; color: var(--research-muted); font-size: 0.82rem; }
.robustness-conclusion { margin: 1rem 0 0; padding: 1rem 1.2rem; border-left: 3px solid var(--research-green); background: white; color: var(--research-ink-soft); }

.agent-bridge { background: #f4f0e8; }
.agent-bridge .section-subtitle { text-align: left; margin: 0 0 2rem; }
.bridge-grid { display: grid; gap: 0.7rem; }
.bridge-row { display: grid; grid-template-columns: 1fr 150px 1fr; gap: 1rem; align-items: stretch; }
.bridge-row > div { padding: 1.05rem; border: 1px solid #d4d1c9; background: white; }
.bridge-row > div:first-child { border-left: 3px solid var(--research-blue); }
.bridge-row > div:last-child { border-left: 3px solid var(--research-green); }
.bridge-row small, .bridge-row strong { display: block; }
.bridge-row small { margin-bottom: 0.35rem; color: var(--research-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.bridge-row .transfer-label { display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--research-muted); font-size: 0.75rem; font-weight: 650; text-align: center; }
.boundary-note { margin: 1.5rem 0 0; padding: 1rem 1.2rem; border-left: 3px solid var(--research-gold); background: white; color: var(--research-ink-soft); }

.research-resources { background: var(--research-paper); }
.resource-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 2rem 0 3rem; }
.resource-card { display: flex; min-height: 150px; flex-direction: column; padding: 1.25rem; border: 1px solid var(--research-line); border-radius: 8px; background: white; color: var(--research-ink); }
.resource-card:hover { border-color: var(--research-blue); color: var(--research-ink); transform: translateY(-2px); }
.resource-card span { color: var(--research-blue); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.resource-card strong { margin: auto 0 0.2rem; font: 700 1.35rem/1.2 var(--serif); }
.resource-card small { color: var(--research-muted); }
.citation-section { display: grid; grid-template-columns: 0.45fr 1.55fr; gap: 2rem; }
.citation-box { padding: 1rem; border: 1px solid var(--research-line); border-radius: 8px; background: white; }
.citation-box pre { overflow-x: auto; white-space: pre; color: var(--research-ink); font-size: 0.82rem; }
.citation-box .control-button { margin-top: 0.8rem; }
.research-footer { padding: 1.3rem 0; background: #0c1b2e; color: rgba(255,255,255,0.72); }
.footer-grid { display: flex; justify-content: space-between; gap: 1rem; }
.footer-grid p { margin: 0; font-size: 0.8rem; }

.focus-controls { z-index: 1600; display: flex; min-height: 62px; align-items: center; justify-content: center; gap: 0.65rem; padding: 0.55rem; border-top: 1px solid #d6dde2; background: rgba(255,255,255,0.98); box-shadow: 0 -7px 22px rgba(23,42,70,0.08); }
.focus-controls[hidden] { display: none; }
.focus-controls span { min-width: 48px; color: var(--research-ink); text-align: center; font-variant-numeric: tabular-nums; }
body.focus-mode { display: grid; height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: 70px minmax(0, 1fr) auto; overflow: hidden; background: var(--research-paper); }
body.focus-mode .navbar { position: static; grid-row: 1; }
body.focus-mode .nav-center { display: none; }
body.focus-mode .research-hero, body.focus-mode .research-footer { display: none; }
body.focus-mode main { min-height: 0; grid-row: 2; padding-top: 0; overflow: hidden; }
body.focus-mode [data-focus-step] { display: none; }
body.focus-mode [data-focus-step].is-focus-step { display: block; height: 100%; overflow: auto; padding: 2.25rem 0; }
body.focus-mode .focus-controls { grid-row: 3; }
body.focus-mode #question.is-focus-step { padding-top: 1.5rem; }
body.focus-mode #question.is-focus-step .section-eyebrow { margin-bottom: 0.35rem; }
body.focus-mode #question.is-focus-step .section-title {
    max-width: 1120px;
    margin: 0 auto 0.75rem;
    font-size: clamp(2.35rem, 3.45vw, 2.9rem);
    line-height: 1.04;
    text-align: center;
}
body.focus-mode #question.is-focus-step .lead-copy {
    max-width: 1050px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.48;
}
body.focus-mode #question.is-focus-step .question-grid { margin-top: 1.2rem; }
body.focus-mode #question.is-focus-step .research-card { min-height: 198px; padding: 1rem 1.15rem; }
body.focus-mode #question.is-focus-step .research-card h3 { margin: 0.35rem 0 0.45rem; font-size: 1.18rem; line-height: 1.18; }
body.focus-mode #question.is-focus-step .research-card p:last-child { font-size: 0.84rem; line-height: 1.42; }
body.focus-mode #method.is-focus-step { padding-top: 0.85rem; padding-bottom: 0.85rem; }
body.focus-mode #method.is-focus-step .section-title { margin-bottom: 0.25rem; font-size: 2.3rem; }
body.focus-mode #method.is-focus-step .section-subtitle { margin-bottom: 0.55rem; }
body.focus-mode #method.is-focus-step .method-steps { display: grid; grid-template-areas: 'step1 step2 step3' 'deep deep deep'; grid-template-columns: 0.86fr 0.86fr 1.28fr; gap: 0.7rem; }
body.focus-mode #method.is-focus-step .method-steps > .method-step:nth-child(1) { grid-area: step1; }
body.focus-mode #method.is-focus-step .method-steps > .method-step:nth-child(3) { grid-area: step2; }
body.focus-mode #method.is-focus-step .method-steps > .method-step:nth-child(4) { grid-area: step3; }
body.focus-mode #method.is-focus-step .method-step { padding: 0.9rem; grid-template-columns: 42px 1fr; gap: 0.6rem; box-shadow: none; }
body.focus-mode #method.is-focus-step .step-number { font-size: 1.65rem; }
body.focus-mode #method.is-focus-step .step-content > p { margin-bottom: 0.45rem; font-size: 0.82rem; line-height: 1.4; }
body.focus-mode #method.is-focus-step .step-content h3 { margin-bottom: 0.25rem; font-size: 1.05rem; }
body.focus-mode #method.is-focus-step .step-visualization, body.focus-mode #method.is-focus-step .context-regeneration, body.focus-mode #method.is-focus-step .step-details { display: none; }
body.focus-mode #method.is-focus-step .method-route { grid-template-columns: 1fr; gap: 0.3rem; margin-top: 0.45rem; }
body.focus-mode #method.is-focus-step .method-route span { padding: 0.45rem 0.55rem; }
body.focus-mode #method.is-focus-step .method-route small { font-size: 0.68rem; }
body.focus-mode #method.is-focus-step .importance-preview { grid-template-columns: 1fr; gap: 0.35rem; margin-top: 0.45rem; padding: 0.45rem; }
body.focus-mode #method.is-focus-step .importance-preview img { max-height: 92px; object-fit: contain; }
body.focus-mode #method.is-focus-step .importance-preview figcaption { gap: 0.2rem; font-size: 0.65rem; line-height: 1.3; }
body.focus-mode #method.is-focus-step .importance-preview figcaption > span:last-child { display: none; }
body.focus-mode #method.is-focus-step .technical-deep-dive { grid-area: deep; padding: 0.75rem; }
body.focus-mode #method.is-focus-step .technical-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 0.35rem; }
body.focus-mode #method.is-focus-step .technical-heading h3 { font-size: 1.2rem; }
body.focus-mode #method.is-focus-step .technical-heading p { max-width: 430px; font-size: 0.75rem; }
body.focus-mode #method.is-focus-step .technical-panel { margin-top: 0.35rem; }
body.focus-mode #method.is-focus-step .technical-panel summary { min-height: 43px; padding: 0.55rem 0.7rem; font-size: 0.8rem; }
body.focus-mode #method.is-focus-step .optimization-panels { margin-top: 0.35rem; }
body.focus-mode #method.is-focus-step .optimization-panel summary { min-height: 38px; font-size: 0.74rem; line-height: 1.2; }
body.focus-mode #method.is-focus-step .optimization-panel .summary-hint > span:first-child { display: none; }
body.focus-mode #method.is-focus-step .method-step:has(.optimization-panel[open]) { grid-column: 1 / -1; }
body.focus-mode #attack-properties.is-focus-step { padding-top: 1.4rem; }
body.focus-mode #attack-properties.is-focus-step .hypothesis-heading { gap: 1.4rem; }
body.focus-mode #attack-properties.is-focus-step .section-title { margin-bottom: 0.5rem; font-size: clamp(2rem, 3.6vw, 3rem); }
body.focus-mode #attack-properties.is-focus-step .robustness-table-wrap { margin-top: 0.8rem; }
body.focus-mode #attack-properties.is-focus-step .roadmap-grid { margin-top: 0.7rem; }
body.focus-mode #attack-properties.is-focus-step .robustness-conclusion { margin-top: 0.7rem; }
body.focus-mode #demo.is-focus-step .demo-heading-grid { grid-template-columns: 1fr 0.7fr; }
body.focus-mode #demo.is-focus-step .demo-workbench { max-height: none; }

@media (max-width: 1100px) {
    .nav-center { display: none; }
    .demo-heading-grid, .evidence-heading { grid-template-columns: 1fr; gap: 0.5rem; }
    .demo-disclaimer, .evidence-heading > p { max-width: 820px; }
    .aggregate-results { grid-template-columns: repeat(2, 1fr); }
    .technical-heading, .hypothesis-heading { grid-template-columns: 1fr; gap: 0.6rem; }
    .importance-preview { grid-template-columns: 1fr; }
    .hypothesis-heading > div:last-child { max-width: 840px; }
    .mechanism-card figcaption span { min-height: 138px; }
}

@media (max-width: 767px) {
    .navbar .nav-shell { padding: 0.65rem 0.85rem; }
    .nav-brand { max-width: 112px; white-space: normal; line-height: 1.1; }
    .control-button { padding: 0.48rem 0.62rem; font-size: 0.78rem; }
    .research-hero { min-height: 690px; padding: 7.5rem 0 4rem; }
    .research-hero .hero-title { font-size: 5.4rem; }
    .hero-kicker-row { align-items: flex-start; flex-direction: column; gap: 0.4rem; }
    .hero-actions { flex-direction: column; align-items: flex-start; }
    .scope-note { flex-direction: column; gap: 0.1rem; }
    .question-grid, .threat-grid, .limitations-grid, .resource-card-grid, .citation-section, .rationale-layout, .method-route, .mechanism-grid, .context-regeneration, .objective-grid, .formula-pair, .comparison-strip, .roadmap-grid { grid-template-columns: 1fr; }
    .citation-section > *, .citation-box, .paper-table-wrap { min-width: 0; max-width: 100%; }
    .principle-strip { grid-template-columns: 1fr; }
    .rationale-layout { gap: 1rem; }
    .demo-toolbar { align-items: stretch; flex-direction: column; }
    .candidate-control select { width: 100%; }
    .demo-step { padding: 1.15rem; }
    .demo-step-heading { grid-template-columns: 34px 1fr; gap: 0.7rem; }
    .track-selector { grid-template-columns: 1fr; }
    .player-primary-row { align-items: stretch; flex-direction: column; }
    .player-primary-row .secondary-control { width: 100%; }
    .player-secondary-row { align-items: stretch; flex-direction: column; }
    .player-secondary-row label { justify-content: space-between; }
    .volume-control input { width: 52%; }
    .provenance-grid { grid-template-columns: 1fr; }
    .aggregate-results { grid-template-columns: 1fr 1fr; }
    .aggregate-results strong { font-size: 2rem; }
    .bridge-row { grid-template-columns: 1fr; gap: 0.35rem; }
    .bridge-row .transfer-label { min-height: 28px; }
    .footer-grid { flex-direction: column; }
    .technical-panel summary { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
    .summary-hint { width: 100%; justify-content: space-between; }
    .mechanism-card { min-height: 0; }
    .mechanism-card figcaption span { min-height: 0; }
    .compact-flow, .generator-row { flex-wrap: wrap; }
    .compact-flow .flow-node { flex: 1 1 35%; }
    .query-rank { grid-template-columns: 1fr 1fr; }
    .query-rank .rank-bars { grid-column: 1 / -1; }
    .audio-context-row { grid-template-columns: 1fr 0.85fr 1fr; }
    .audio-context-row span { padding: 0.35rem; font-size: 0.63rem; }
    .generator-row > span { flex: 1 1 38%; }
    .optimization-cycle { grid-template-columns: 1fr; }
    .optimization-cycle b { transform: rotate(90deg); text-align: center; }
    .compact-procedure { columns: 1; }
    .formula-block { overflow-wrap: anywhere; white-space: normal; text-align: center; }
    .hypothesis-heading > div:last-child { padding: 0.8rem 0 0; border-top: 2px solid var(--research-gold); border-left: 0; }
    .robustness-table-wrap::after { content: 'Scroll horizontally to inspect all columns'; display: block; padding: 0.5rem 0.75rem; border-top: 1px solid var(--research-line); color: var(--research-muted); font-size: 0.7rem; }
    html[lang="zh-CN"] .robustness-table-wrap::after { content: '可横向滚动查看全部列'; }
    .focus-controls { justify-content: space-between; }
    body.focus-mode { grid-template-rows: 68px minmax(0, 1fr) auto; }
    body.focus-mode main { padding-top: 0; }
    body.focus-mode [data-focus-step].is-focus-step { height: 100%; padding: 1.5rem 0; }
    body.focus-mode #question.is-focus-step { padding-top: 1.25rem; }
    body.focus-mode #question.is-focus-step .section-title { font-size: clamp(2rem, 8.5vw, 2.55rem); text-align: left; }
    body.focus-mode #question.is-focus-step .lead-copy { font-size: 0.96rem; }
    body.focus-mode #question.is-focus-step .research-card { min-height: 0; }
    body.focus-mode #demo.is-focus-step .demo-heading-grid { grid-template-columns: 1fr; gap: 0.5rem; }
    body.focus-mode #method.is-focus-step .method-steps { display: flex; }
    body.focus-mode #method.is-focus-step .method-step { grid-template-columns: 1fr; }
    body.focus-mode #method.is-focus-step .technical-heading { display: grid; }
}

@media (max-width: 420px) {
    .nav-brand { display: none; }
    .navbar .nav-shell { justify-content: flex-end; }
    .aggregate-results { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .refinement-level span.active { animation: none !important; }
}