/* Paper explainers: diagrams remain legible without JavaScript. */
.paper-intro { max-width: none; }
.paper-intro h1 { max-width: 800px; font-size: clamp(1.7rem, 2.6vw, 2rem); line-height: 1.25; }
.paper-intro .paper-authors { margin-top: 20px; color: var(--muted); font-size: 14px; }
.paper-intro .lead-copy { max-width: 820px; margin-top: 28px; color: var(--accent); }
.back-link { display: inline-block; margin-bottom: 22px; font-size: 13px; padding-block: 6px; }
.paper-intro .detail-links { border-top: 1px dotted var(--rule); padding-top: 12px; margin-top: 24px; gap: 6px 20px; }
.explainer-section + .explainer-section { margin-top: 56px; }
.explanation-copy { max-width: 800px; font-size: 17px; line-height: 1.8; }
.source-note { font-size: 13px; margin-top: 16px; }
.paper-visual { padding: 12px 0; border: 0; background: transparent; }
.paper-visual > h3 { font-size: 21px; margin-bottom: 28px; }
.paper-visual figcaption { border-top: 1px solid var(--rule); margin-top: 28px; padding-top: 16px; font-size: 13px; color: var(--muted); max-width: 900px; }
.figure-source { display: block; margin-top: 8px; }
.method-diagram { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.method-diagram li { min-width: 0; position: relative; padding: 18px 12px; background: transparent; border: 0; border-top: 1px solid var(--rule); }
.diagram-index { display: block; margin-bottom: 14px; color: var(--accent); font: 13px var(--mono); }
.method-diagram h3 { font-size: 17px; margin-bottom: 10px; }
.method-diagram p { color: var(--ink); font-size: 14px; }
.diagram-levels { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.diagram-levels li { border-top: 2px solid var(--accent); }
.diagram-levels li:nth-child(2) { border-top-style: double; }
.diagram-levels li:nth-child(3) { border-top-style: dashed; }
.diagram-levels li:nth-child(4) { border-top-style: dotted; background: var(--page-bg); }
.diagram-pipeline, .diagram-roadmap { grid-template-columns: repeat(3,minmax(0,1fr)); }
.diagram-pipeline li + li::before { content: '→'; position: absolute; left: -22px; top: 44%; width: 21px; color: var(--accent); text-align: center; }
.diagram-roadmap li { border-top: 1px solid var(--accent); }
.diagram-workshop, .diagram-network, .diagram-taxonomy, .diagram-merge { grid-template-columns: repeat(2,minmax(0,1fr)); }
.diagram-workshop { padding: 0; border: 0; }
.diagram-workshop li:last-child { border-top: 1px dashed var(--accent); background: transparent; }
.diagram-taxonomy li:last-child { grid-column: 1/-1; border-left: 1px solid var(--accent); }
.diagram-taxonomy { grid-template-columns: repeat(3,minmax(0,1fr)); }
.diagram-taxonomy .diagram-index, .diagram-roadmap .diagram-index, .diagram-network .diagram-index { display: none; }
.diagram-merge li:nth-child(-n+2) { border-top: 1px solid var(--accent); }
.diagram-merge li:nth-child(3) { grid-column: 1/-1; text-align: center; margin-inline: 15%; }
.diagram-merge li:last-child { grid-column: 1/-1; text-align: center; }
.comparison-flow { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); list-style: none; margin: 0 auto; padding: 0; max-width: 800px; }
.comparison-flow > li { min-width: 0; text-align: center; }
.comparison-flow > li:nth-child(n+3) { grid-column: 1/-1; }
.comparison-node { padding: 0 14px; max-width: 430px; margin-inline: auto; }
.comparison-node h4 { margin: 10px 0 8px; font-size: 17px; line-height: 1.4; font-weight: 500; }
.comparison-node p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.comparison-glyph { display: block; width: 120px; height: 76px; max-width: 100%; margin: 0 auto; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.comparison-glyph circle { fill: var(--page-bg); }
.comparison-glyph .comparison-intersection { fill: var(--accent); fill-opacity: .18; stroke: none; }
.comparison-accent { stroke: var(--accent); }
.comparison-muted { stroke: var(--muted); opacity: .65; }
.comparison-overlap { width: 104px; height: 64px; }
.comparison-overlap circle { fill: none; }
.comparison-signal { width: 80px; height: 52px; }
.comparison-merge { position: relative; height: 64px; margin: 16px 0 8px; }
.comparison-merge svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--ink); }
.comparison-merge path { stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.comparison-merge::after, .comparison-arrow::after { content: ''; position: absolute; bottom: 0; left: calc(50% - 3px); width: 6px; height: 6px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }
.comparison-arrow { position: relative; width: 100%; height: 32px; margin: 14px 0 10px; }
.comparison-arrow::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1.5px solid var(--ink); }
.diagram-curriculum { gap: 10px; }
.diagram-curriculum li { display: grid; grid-template-columns: 32px 180px minmax(0,1fr); align-items: start; gap: 16px; padding: 18px 0; border-left: 0; }
.diagram-curriculum h3, .diagram-curriculum .diagram-index { margin: 0; }
.diagram-curriculum li:nth-child(even) { background: transparent; }
.diagram-onion { gap: 12px; }
.diagram-onion li { border: 1px solid var(--rule); border-radius: 50% / 24px; text-align: center; padding: 24px 28px; }
.diagram-onion .diagram-index { margin-bottom: 8px; }
.diagram-onion li:nth-child(2) { margin-inline: 4%; }
.diagram-onion li:nth-child(3) { margin-inline: 8%; }
.diagram-onion li:nth-child(4) { margin-inline: 12%; }
.diagram-onion li:nth-child(5) { margin-inline: 16%; border: 1px solid var(--accent); }
.network-map { position: relative; width: 100%; aspect-ratio: 720/190; margin-bottom: 16px; }
.network-map svg { position: absolute; width: 100%; height: 100%; inset: 0; }
.network-map path { fill: none; stroke: var(--accent); stroke-width: 2; }
.network-map .edge-semantic { stroke-dasharray: 6 6; }
.node { position: absolute; padding: 8px 14px; border: 1px solid var(--accent); border-radius: 30px; background: var(--page-bg); color: var(--accent); font-size: 13px; transform: translate(-50%,-50%); white-space: nowrap; }
.node-a { left: 15.3%; top: 26.3%; }.node-b { left: 45.8%; top: 73.7%; }.node-c { left: 83.3%; top: 26.3%; }.node-d { left: 83.3%; top: 73.7%; }
.network-key { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; color: var(--muted); margin-bottom: 28px; }
.network-key span::before { content: ''; display: inline-block; width: 24px; margin: 0 8px 4px 0; border-top: 2px solid var(--accent); }
.network-key span:last-child::before { border-top-style: dashed; }
.result-chart { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); }
.result-chart h3 { font-size: 18px; }
.figure-note { font-size: 13px; color: var(--muted); margin-top: 10px; }
.result-row { display: grid; grid-template-columns: 180px minmax(0,1fr) 48px; gap: 16px; align-items: center; margin-top: 18px; font-size: 14px; }
.result-track { background: var(--soft); height: 20px; }
.result-track > span { display: block; height: 100%; background: var(--accent); }
.result-row strong { font-family: var(--mono); font-weight: 500; text-align: end; }
.paper-margin { grid-column: 3; grid-row: 1; position: sticky; top: 50px; min-width: 0; max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: thin; }
.paper-margin h2 { font-size: 17px; margin-bottom: 14px; }
.paper-margin a { display: block; font-size: 13px; line-height: 1.55; margin-top: 12px; text-decoration: none; }
.paper-margin a:hover { text-decoration: underline; }
.score-explorer { border: 0; border-top: 1px dashed var(--rule); padding: 24px 0; margin-top: 28px; }
.score-explorer h3 { margin: 8px 0 16px; font-size: 21px; }
.score-explorer > p { max-width: 850px; }
.score-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 36px; margin-block: 28px; }
.score-controls label { display: grid; grid-template-columns: minmax(0,1fr) 40px; gap: 8px 20px; font-size: 14px; }
.score-controls label + label { margin-top: 20px; }
.score-controls output { text-align: end; font-family: var(--mono); }
.score-controls input { width: 100%; grid-column: 1/-1; margin: 0; min-height: 44px; accent-color: var(--accent); }
.score-controls input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.score-results { align-self: start; padding: 0 0 0 24px; border-left: 1px solid var(--rule); background: transparent; }
.score-results p { font-size: 14px; }
.score-results strong { display: block; font: 500 26px var(--mono); margin-top: 6px; }
.score-results p:last-child { border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 20px; }
.score-results p:last-child strong { font-size: 40px; color: var(--accent); }
.score-formula { padding-top: 20px; border-top: 1px solid var(--rule); font-size: 15px; }
@media (max-width: 850px) {
  .diagram-levels { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .diagram-curriculum li { grid-template-columns: 28px minmax(0,1fr); }
  .diagram-curriculum li p { grid-column: 2; }
  .diagram-taxonomy { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .diagram-taxonomy li:last-child { grid-column: auto; }
}
@media (max-width: 1150px) { .paper-margin { display: none; } }
@media (max-width: 600px) {
  .paper-visual, .score-explorer { padding: 16px 0; }
  .explainer-section + .explainer-section { margin-top: 40px; }
  .explanation-copy { font-size: 17px; }
  .method-diagram, .score-layout { grid-template-columns: minmax(0,1fr); }
  .method-diagram li { padding: 18px 8px; }
  .diagram-pipeline li + li::before { content: '↓'; left: 50%; top: -25px; }
  .diagram-workshop { padding: 0; }
  .diagram-merge li:nth-child(3) { margin-inline: 0; }
  .comparison-node { padding-inline: 5px; }
  .comparison-node h4 { font-size: 15px; overflow-wrap: anywhere; }
  .comparison-node p { font-size: 13px; }
  .comparison-glyph { width: 100px; height: 66px; }
  .comparison-signal { width: 70px; height: 46px; }
  .diagram-onion li:nth-child(n) { margin-inline: 0; border-radius: 16px; }
  .result-row { grid-template-columns: minmax(0,1fr) 48px; gap: 8px; }
  .result-row > span { grid-column: 1/-1; }
  .node { font-size: 10px; padding: 5px 7px; }
  .network-map { min-height: 100px; }
}
@media print {
  .paper-margin { display: none; }
  .paper-visual, .method-diagram li { break-inside: avoid; }
  .score-explorer { display: none; }
  .result-track > span { print-color-adjust: exact; }
}