/* IO Lab research edition: a reading surface with an instrument-like visual layer. */
.research-paper { background: #faf9f5; --accent: #9b7df4; --accent-dark: #6940b7; }
.research-paper[data-accent="cyan"] { --accent: #52d8d5; --accent-dark: #087572; }
.research-paper[data-accent="coral"] { --accent: #ff795f; --accent-dark: #b93d26; }
.research-paper[data-accent="amber"] { --accent: #ffbd4a; --accent-dark: #956008; }
.research-paper[data-accent="green"] { --accent: #79d6ad; --accent-dark: #216748; }
.paper-topbar { grid-template-columns: 1fr auto auto; gap: 24px; }
.edition-label { color: #cfcec6; font-size: 14px; }
.edition-label span { margin-left: 20px; color: var(--accent); }
.paper-topbar .language-switch { margin-left: 12px; }
.paper-topbar .language-switch strong { background: var(--accent); }
.reading-progress { position: fixed; z-index: 30; top: 71px; height: 2px; width: 100%; pointer-events: none; }
.reading-progress span { display: block; height: 100%; width: 0; background: var(--accent); }
.research-page { width: min(1380px, calc(100% - 80px)); margin: auto; }
.paper-breadcrumb { display: flex; justify-content: space-between; gap: 24px; padding: 32px 0; font-size: 13px; color: var(--ink-soft); }
.paper-breadcrumb a { padding: 6px 0; }
.paper-breadcrumb a:hover { color: var(--accent-dark); }
.paper-breadcrumb > span { align-self: center; letter-spacing: .1em; }
.research-header { padding: 30px 0 70px; border-bottom: 1px solid var(--ink); }
.publication-strip { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px 32px; padding-top: 18px; border-top: 1px solid var(--line); font: 12px/1.5 var(--body); letter-spacing: .07em; }
.publication-strip span:first-child { color: var(--accent-dark); font-weight: 700; }
.research-header h1 { max-width: 1140px; margin: 50px 0 25px; font-family: var(--display); font-weight: 500; font-size: clamp(42px, 6.8vw, 94px); line-height: 1.06; letter-spacing: -.065em; overflow-wrap: anywhere; text-wrap: balance; }
.research-subtitle { max-width: 940px; font: clamp(23px, 2.6vw, 35px)/1.35 Georgia, 'Times New Roman', serif; margin: 0 0 36px; color: #55564f; text-wrap: balance; }
.paper-byline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; font-size: 14px; }
.paper-byline > span:last-child { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.paper-byline > span:last-child::before { content: ''; height: 6px; width: 6px; flex-shrink: 0; border: 1px solid var(--accent-dark); border-radius: 50%; }
.paper-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.paper-actions a, .paper-actions button { min-height: 46px; padding: 12px 18px; border: 1px solid var(--ink); font-size: 14px; font-weight: 600; background: transparent; cursor: pointer; }
.paper-actions a:first-child { color: var(--white); background: var(--ink); }
.paper-actions a span { margin-left: 24px; }
.paper-actions a:hover, .paper-actions button:hover { background: var(--accent); color: var(--ink); }
.research-layout { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: clamp(40px, 6vw, 105px); }
.paper-contents { align-self: start; position: sticky; top: 110px; margin-top: 65px; font-size: 14px; max-height: calc(100dvh - 135px); overflow: auto; scrollbar-width: thin; }
.paper-contents summary { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 24px; cursor: pointer; }
.paper-contents nav { display: grid; gap: 2px; }
.paper-contents nav a { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 8px 10px 8px 0; color: #66675f; line-height: 1.4; border-right: 2px solid transparent; transition: color 160ms, border-color 160ms; }
.paper-contents nav a span { color: #82837a; font: 12px/1.7 ui-monospace, monospace; }
.paper-contents nav a:hover, .paper-contents nav a[aria-current="location"] { color: var(--ink); border-right-color: var(--accent-dark); }
.paper-contents > p { max-width: 180px; margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: #77786f; font-size: 12px; }
.research-prose { min-width: 0; max-width: 950px; }
.research-section { padding: 64px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 95px; }
.section-number { margin: 0 0 22px !important; font: 12px/1.5 var(--body) !important; color: var(--accent-dark) !important; letter-spacing: .09em; }
.research-section h2 { margin: 0 0 26px; max-width: 790px; font: 500 clamp(25px, 2.5vw, 35px)/1.2 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.research-section h3 { margin: 30px 0 16px; font: 700 18px/1.4 var(--body); }
.research-section p, .research-section li { font: 19px/1.8 Georgia, 'Times New Roman', serif; color: #3c4039; }
.research-section > p { max-width: 77ch; margin: 20px 0; }
.research-section > p:last-child { margin-bottom: 0; }
.research-section ul { padding-left: 24px; }
.research-section li { margin: 12px 0; padding-left: 5px; }
.research-section a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; color: var(--accent-dark); }
.research-section a:hover { color: var(--ink); }
.abstract-section > p:not(.section-number) { font-size: 21px; line-height: 1.7; }
.key-contributions { margin-top: 34px; padding: 24px 28px; border-left: 3px solid var(--accent); background: #f0efe8; }
.key-contributions h3 { font: 700 14px/1.5 var(--body); margin: 0 0 18px; }
.key-contributions ol { padding-left: 23px; margin: 0; }
.key-contributions li { font: 16px/1.6 var(--body); margin: 10px 0; }
.mechanism { margin: 44px 0 0; padding: 28px; background: #141713; color: #f6f4ed; scroll-margin-top: 92px; }
.figure-label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font: 12px/1.5 var(--body); letter-spacing: .07em; }
.mechanism .figure-label span:first-child { color: var(--accent); }
.mechanism .figure-label span:last-child { color: #a8aba2; }
.diagram-scroll { overflow: auto; margin: 18px -12px 0; }
.mechanism svg { width: 100%; min-width: 660px; display: block; color: var(--accent); }
.diagram-edge { stroke: var(--accent); stroke-width: 1.5; fill: none; opacity: .65; }
.diagram-return { stroke: #778072; stroke-width: 1; stroke-dasharray: 5 7; fill: none; color: #778072; }
.diagram-node circle { fill: #1d221c; stroke: #78816e; stroke-width: 1; transition: fill 220ms, stroke 220ms; }
.diagram-node .node-number { fill: #c0c8b9; font: 18px ui-monospace, monospace; }
.diagram-node .node-label { fill: #e3e7dd; font: 16px var(--body); }
.diagram-node.active circle { fill: var(--accent); stroke: var(--accent); }
.diagram-node.active .node-number { fill: #141713; }
.mechanism figcaption { color: #b8bdb0; font: 14px/1.65 var(--body); padding-top: 12px; max-width: 76ch; }
.mechanism-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 25px 0; border-bottom: 1px solid #394133; }
.mechanism-controls span { color: #b6bbad; font-size: 12px; }
.mechanism button { color: inherit; background: transparent; border: 0; cursor: pointer; text-align: left; }
.play-sequence { border: 1px solid #65715a !important; padding: 10px 14px; font-size: 14px; }
.play-sequence:hover { color: var(--accent); }
.play-sequence:disabled { opacity: .7; cursor: default; }
.mechanism-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px; list-style: none; padding: 24px 0 0; margin: 0; }
.mechanism-steps li { padding-top: 12px; border-top: 2px solid #394133; transition: border-color 160ms; }
.mechanism-steps li.active { border-top-color: var(--accent); }
.step-index { color: #aab59f; font: 12px ui-monospace, monospace; }
.mechanism-steps h3 { margin: 10px 0; font-size: 14px; }
.mechanism-steps h3 button { padding: 0; min-height: 32px; font: inherit; }
.mechanism-steps p { color: #b7c0b0; margin: 0; font: 14px/1.6 var(--body); }
.equation { margin: 30px 0; border-top: 1px solid #969d8e; border-bottom: 1px solid var(--line); }
.equation > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; overflow-x: auto; }
.equation code { font: 17px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; min-width: 0; overflow-wrap: anywhere; }
.equation > div > span { font: 13px var(--body); color: #696d61; }
.equation figcaption { margin: 0; padding: 0 0 22px; font: 14px/1.6 var(--body); color: #62675d; }
.table-scroll { overflow-x: auto; margin: 30px 0; }
.table-scroll table { border-collapse: collapse; width: 100%; min-width: 540px; font: 15px/1.6 var(--body); }
.table-scroll caption { padding-bottom: 16px; text-align: left; font: 13px/1.5 var(--body); color: #5e6557; }
.table-scroll thead { border-top: 1px solid #242b1d; border-bottom: 1px solid #a8aea1; }
.table-scroll th { text-align: left; font-weight: 600; }
.table-scroll td, .table-scroll th { vertical-align: top; padding: 17px 18px 17px 0; border-bottom: 1px solid var(--line); }
.table-scroll tbody th { min-width: 125px; width: 24%; }
.table-scroll td { color: #51574a; }
.research-callout { padding: 26px 28px; margin: 30px 0; background: #eff1e9; border-left: 3px solid var(--accent-dark); }
.research-callout > span { font: 700 12px/1.5 var(--body); letter-spacing: .06em; color: var(--accent-dark); }
.research-callout p { margin: 13px 0 0; font-size: 18px; line-height: 1.7; }
.concept-plate { margin: 40px 0 0; }
.concept-plate img { width: 100%; height: auto; display: block; border: 1px solid #dddcd4; }
.concept-plate figcaption { margin-top: 14px; font: 13px/1.7 var(--body); color: #62665d; }
.explorer { margin: 36px 0 0; padding: 28px; border: 1px solid #8c9782; background: #f1f3ec; }
.explorer .figure-label { color: var(--accent-dark); }
.explorer h3 { font-size: 20px; letter-spacing: -.02em; }
.explorer p { font: 16px/1.7 var(--body); }
.explorer-result { display: block; padding-top: 22px; margin-top: 26px; border-top: 1px solid #b9c3b0; font: 600 16px/1.5 var(--body); color: #273421; }
.explorer-result strong { font: 500 48px/1.1 var(--display); letter-spacing: -.06em; margin-right: 6px; }
.range-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin: 28px 0; font: 600 15px var(--body); }
.range-label input { width: 100%; accent-color: var(--accent-dark); height: 28px; cursor: pointer; }
.range-label output { font-family: ui-monospace, monospace; }
.effective-bar, .threshold-track { background: #dfe5d8; height: 12px; position: relative; }
.effective-bar > span, .threshold-track > span { display: block; height: 100%; background: var(--accent-dark); transition: width 160ms; }
.threshold-track { margin: 42px 0 20px; }
.threshold-track i { position: absolute; top: -8px; height: 28px; width: 1px; background: var(--ink); }
.threshold-track b { position: absolute; left: 6px; top: -22px; white-space: nowrap; font: 12px var(--body); }
.explorer .figure-note { font-size: 13px; color: #5e6756; }
.criteria-controls { display: grid; gap: 12px; margin-top: 26px; }
.criteria-controls label { display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 14px/1.6 var(--body); }
.criteria-controls select { max-width: 180px; min-height: 44px; padding: 6px 10px; border: 1px solid #a7b19d; background: #fafcf6; font: 14px var(--body); border-radius: 0; }
.promotion-checks { display: grid; gap: 14px; margin-top: 26px; }
.promotion-checks label { display: flex; align-items: center; gap: 14px; min-height: 44px; font: 15px/1.5 var(--body); cursor: pointer; }
.promotion-checks input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--accent-dark); }
.bibliography { list-style: none; padding: 0 !important; counter-reset: source; }
.bibliography li { counter-increment: source; position: relative; padding: 22px 0 22px 36px; margin: 0; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.bibliography li::before { content: '[' counter(source) ']'; position: absolute; left: 0; top: 22px; font: 13px var(--body); color: var(--accent-dark); }
.bibliography li > span, .bibliography small { display: block; font: 13px/1.6 var(--body); color: #5d6556; }
.bibliography a { display: block; margin: 8px 0; font: 17px/1.5 var(--body); color: var(--ink); text-decoration: none; }
.bibliography a:hover { color: var(--accent-dark); }
.citation-text { margin: 28px 0; padding: 24px; background: #f0f0e9; border-left: 2px solid var(--accent-dark); overflow-wrap: anywhere; font: 16px/1.7 var(--body); }
.bibtex { border: 1px solid var(--line); padding: 18px; }
.bibtex summary { cursor: pointer; font: 600 14px var(--body); }
.bibtex pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.6 ui-monospace, monospace; margin: 20px 0; }
.bibtex button { padding: 10px 14px; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; font: 14px var(--body); }
.bibtex [role="status"] { margin-left: 16px; font: 13px var(--body); }
.research-section .availability { font: 14px/1.7 var(--body); color: #606857; }
.related-papers { margin: 85px 0; }
.related-papers > div { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.related-papers a { display: grid; grid-template-columns: 1fr auto; gap: 36px 18px; padding: 28px; border-right: 1px solid var(--line); }
.related-papers a:last-child { border: 0; }
.related-papers a > span { grid-column: 1 / -1; font-size: 12px; letter-spacing: .07em; color: var(--accent-dark); }
.related-papers strong { font: 500 clamp(20px,2vw,28px)/1.3 var(--display); letter-spacing: -.04em; overflow-wrap: anywhere; }
.related-papers b { font-size: 24px; font-weight: 400; }
.related-papers a:hover { background: #eeeee5; }
.research-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 28px; padding: 0 0 48px; font-size: 13px; color: var(--ink-soft); }
.research-footer .brand-mark i { background: var(--accent-dark); }
.research-paper :focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 4px; }
.research-paper .mechanism :focus-visible { outline-color: var(--accent); }
[hidden] { display: none !important; }
@media (max-width: 1100px) {
  .research-page { width: calc(100% - 48px); }
  .research-layout { grid-template-columns: 180px minmax(0,1fr); gap: 36px; }
  .mechanism-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
  .mechanism-steps li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .research-page { width: calc(100% - 36px); }
  .paper-topbar { grid-template-columns: 1fr auto; gap: 10px; }
  .paper-topbar .edition-label { display: none; }
  .paper-topbar .language-switch { justify-self: end; margin: 0; }
  .research-header { padding-bottom: 42px; }
  .research-header h1 { margin-top: 34px; font-size: clamp(36px,8vw,64px); }
  .paper-breadcrumb { font-size: 12px; padding: 24px 0 10px; }
  .publication-strip { font-size: 12px; }
  .publication-strip span:last-child { width: 100%; color: #68705e; }
  .research-layout { display: block; }
  .paper-contents { position: static; max-height: none; margin: 24px 0 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .paper-contents summary { margin-bottom: 10px; }
  .paper-contents nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 18px; }
  .paper-contents > p { display: none; }
  .research-section { padding: 44px 0; }
  .research-section p, .research-section li { font-size: 18px; line-height: 1.75; }
  .research-section h2 { font-size: 26px; }
  .abstract-section > p:not(.section-number) { font-size: 19px; }
  .mechanism { margin: 24px 0 0; padding: 22px 18px; }
  .mechanism-steps { grid-template-columns: 1fr; gap: 15px; }
  .mechanism-steps li { display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px; }
  .mechanism-steps h3 { margin: 0; }
  .mechanism-steps .step-index { padding-top: 8px; }
  .mechanism-steps p { grid-column: 2; font-size: 15px; }
  .explorer, .research-callout, .key-contributions { padding: 22px 18px; }
  .explorer p, .key-contributions li { font-size: 16px; }
  .criteria-controls label { align-items: start; flex-direction: column; gap: 6px; padding: 8px 0; }
  .criteria-controls select { width: 100%; max-width: none; }
  .related-papers > div { grid-template-columns: 1fr; }
  .related-papers a { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 0; gap: 18px; }
  .related-papers { margin: 55px 0; }
}
@media (max-width: 760px) { .reading-progress { top: 63px; } }
@media (prefers-reduced-motion: reduce) { .research-paper * { scroll-behavior: auto !important; transition: none !important; } }
@media print {
  @page { margin: 18mm 16mm; }
  .research-paper { background: white; }
  .research-paper::before, .topbar, .reading-progress, .paper-breadcrumb, .paper-contents, .paper-actions, .related-papers, .mechanism-controls, .bibtex button, .research-footer { display: none !important; }
  .research-page { width: 100%; }
  .research-layout { display: block; }
  .research-prose { max-width: none; }
  .research-header { padding: 0 0 22px; }
  .research-header h1 { font-size: 34pt; margin-top: 24px; }
  .research-subtitle { font-size: 17pt; }
  .research-section { padding: 24px 0; }
  .research-section h2 { font-size: 20pt; break-after: avoid; }
  .research-section p, .research-section li { font-size: 11pt; line-height: 1.6; }
  .abstract-section > p:not(.section-number) { font-size: 12pt; }
  .equation, .research-callout, .concept-plate, .explorer { break-inside: avoid; }
  .mechanism { print-color-adjust: exact; -webkit-print-color-adjust: exact; padding: 16px; }
  .mechanism svg { min-width: 0; }
  .mechanism-steps { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .mechanism-steps h3, .mechanism-steps p { font-size: 9pt; }
  .mechanism-steps li:last-child { grid-column: auto; }
  .table-scroll { overflow: visible; }
  .table-scroll table { min-width: 0; font-size: 10pt; }
  .table-scroll td, .table-scroll th { padding: 10px 10px 10px 0; }
  .table-scroll tr { break-inside: avoid; }
  .diagram-scroll { overflow: visible; }
  .explorer { print-color-adjust: exact; }
}
