/* The gravity lesson uses the institute's shared paper, ink and type. */
body[data-rpi-page="gravity"] { margin:0; font:1rem/1.8 var(--rpi-sans,Inter,sans-serif); background:#f6f5f0; color:#171c27; }
.gravity-main *, .gravity-main *::before, .gravity-main *::after { box-sizing:border-box; }
.gravity-main { padding-bottom:5rem; }
.gravity-main p { margin:0 0 1.2rem; }
.gravity-main a { color:inherit; text-underline-offset:.25em; }
.gravity-main .hero-small { font-size:.98rem; max-width:38rem; color:#515b6b; }
.gravity-main .rpi-hero h1 { max-width:14ch; }
.hero-art { margin:0; }
.hero-art svg { display:block; width:100%; }
.hero-art figcaption { font-size:.73rem; color:#515b6b; margin-top:.5rem; }
.gravity-main .primary-link, .gravity-main button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid #171c27; border-radius:2px; padding:.7rem 1rem; background:#171c27; color:#fff; font:500 .88rem/1.4 Inter,sans-serif; cursor:pointer; text-decoration:none; }
.gravity-main .primary-link { margin-top:1rem; }
.gravity-main button:hover, .gravity-main .primary-link:hover { background:#394258; }
.gravity-main :is(a,button,input,summary):focus-visible, .skip:focus-visible { outline:3px solid #655aca; outline-offset:4px; }
.skip { position:fixed; top:-100px; left:1rem; z-index:100; padding:.7rem 1rem; color:white; background:#171c27; }
.skip:focus { top:1rem; }
.lesson-route { display:flex; flex-wrap:wrap; gap:.7rem 1.5rem; border-block:1px solid #cacdd2; padding:1.2rem 0; margin-bottom:1rem; }
.lesson-route a { font:500 .77rem/1.6 var(--rpi-mono,'JetBrains Mono',monospace); text-decoration:none; }
.lesson-route a:hover { text-decoration:underline; }
.lesson { max-width:1040px; margin-inline:auto; }
.chapter-section { padding:5rem 0 4rem; border-bottom:1px solid #cacdd2; }
.chapter-label { font:500 .75rem/1.6 var(--rpi-mono,'JetBrains Mono',monospace); color:#515b6b; text-transform:uppercase; letter-spacing:.04em; margin-bottom:1.3rem; }
.gravity-main h2 { font:400 clamp(2.15rem,4.3vw,3.65rem)/1.12 var(--rpi-display,'Archivo Black',sans-serif); letter-spacing:-.045em; margin:0 0 1.8rem; }
.gravity-main h3 { font:600 1.3rem/1.4 var(--rpi-sans,Inter,sans-serif); letter-spacing:-.025em; margin:2rem 0 .7rem; }
.text { max-width:750px; }
.text p, p.text { font-size:1.05rem; line-height:1.85; }
.text > :last-child { margin-bottom:0; }
.experiment { border:1px solid #bbbcc5; background:#eeece5; margin:2.2rem 0; padding:1.6rem; }
.experiment-heading { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-bottom:1.1rem; border-bottom:1px solid #cacdd2; margin-bottom:1.5rem; font:500 .69rem/1.7 var(--rpi-mono,'JetBrains Mono',monospace); text-transform:uppercase; letter-spacing:.035em; }
.experiment-heading span:last-child { color:#515b6b; }
.experiment-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; align-items:center; }
.experiment svg { width:100%; height:auto; display:block; overflow:visible; font-family:Inter,sans-serif; }
.experiment label { display:flex; justify-content:space-between; gap:.8rem; align-items:baseline; font-size:.85rem; font-weight:600; margin:1.1rem 0 .4rem; }
.experiment label output { font-family:'JetBrains Mono',monospace; font-size:.8rem; white-space:nowrap; font-weight:400; }
.experiment input[type="range"] { width:100%; min-height:36px; margin:0; cursor:pointer; accent-color:#615aaf; }
.range-ends { display:flex; justify-content:space-between; font:.7rem/1.4 Inter,sans-serif; color:#515b6b; }
.choices { display:flex; flex-direction:column; gap:.6rem; }
.choices button { background:transparent; color:#171c27; text-align:left; justify-content:flex-start; border-color:#a8a9b0; }
.choices button[aria-pressed="true"], .choices button:hover { background:#171c27; color:white; border-color:#171c27; }
.choices.compact { flex-direction:row; flex-wrap:wrap; gap:.5rem; margin:1.1rem 0; }
.choices.compact button { font-size:.8rem; padding:.6rem .8rem; }
.readout { margin-top:1.3rem; border-top:1px solid #bbbcc5; padding-top:1.1rem; }
.small-label { display:block; font:500 .68rem/1.7 var(--rpi-mono,'JetBrains Mono',monospace); letter-spacing:.04em; text-transform:uppercase; color:#515b6b; margin-bottom:.35rem; }
.readout strong { display:block; font:500 1.7rem/1.35 var(--rpi-sans,Inter,sans-serif); letter-spacing:-.035em; margin-bottom:.65rem; }
.readout p { font-size:.92rem; line-height:1.7; }
.gravity-main .caption { color:#515b6b; font-size:.78rem; line-height:1.7; margin:1.15rem 0 0; }
.readout.inline { display:grid; grid-template-columns:1fr 2fr; gap:1.5rem; align-items:center; }
.readout.inline p, .readout.inline strong { margin-bottom:0; }
.two-controls { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-bottom:1rem; }
.takeaway { display:grid; grid-template-columns:7rem 1fr; gap:1rem; background:#171c27; color:#fff; padding:1.5rem 1.6rem; margin:2rem 0; }
.takeaway span { font:500 .72rem/1.7 var(--rpi-mono,'JetBrains Mono',monospace); color:#c4cdf6; text-transform:uppercase; padding-top:.2rem; }
.takeaway p { font-size:1.05rem; line-height:1.7; margin:0; }
.equation { display:grid; grid-template-columns:1fr 1.2fr; gap:2rem; align-items:center; padding:1.5rem 0; border-block:1px solid #cacdd2; margin:2rem 0; }
.equation > strong { font:500 clamp(1.4rem,2.3vw,1.9rem)/1.5 'JetBrains Mono',monospace; letter-spacing:-.05em; }
.equation p { font-size:.87rem; line-height:1.8; margin:0; }
.extra { border-block:1px solid #cacdd2; margin:2rem 0; }
.gravity-main summary { padding:1.1rem 0; cursor:pointer; font-weight:600; font-size:.95rem; }
.extra > div { max-width:760px; padding:.2rem 0 1rem; font-size:.93rem; }
.math-line { font:500 .98rem/1.8 'JetBrains Mono',monospace; overflow-wrap:anywhere; }
.diagram-story { margin:1rem 0 0!important; font-size:.98rem; }
.research-card { display:grid; grid-template-columns:1.5fr 1fr; gap:3rem; margin-top:2rem; background:#e2e4ee; border:1px solid #a5aac0; padding:2rem; }
.research-card h3 { margin:.5rem 0 1rem; font-size:1.8rem; }
.research-card p { font-size:.95rem; }
.research-links { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1rem; font-size:.9rem; }
.research-links .primary-link { margin:0; }
.finish .closing-story { max-width:850px; font-size:1.22rem; line-height:1.85; }
.recall { margin:2rem 0; }
.recall details { border-top:1px solid #cacdd2; }
.recall details:last-child { border-bottom:1px solid #cacdd2; }
.recall p { max-width:740px; font-size:.96rem; }
.sources { padding-top:3rem; max-width:800px; }
.gravity-main .sources h2 { font-size:1.6rem; }
.sources :is(li,p) { font-size:.83rem; line-height:1.8; }
.sources li { padding:0 0 .85rem .3rem; }
.notice { padding:1rem; border:1px solid #cacdd2; }
@media(max-width:760px) {
 .gravity-main .rpi-hero-grid { gap:2rem; }
 .gravity-main .rpi-hero h1 { font-size:clamp(2.65rem,9vw,4rem); }
 .chapter-section { padding:3.2rem 0 2rem; }
 .gravity-main h2 { font-size:clamp(2rem,7vw,2.85rem); }
 .experiment { padding:1rem; margin:1.7rem 0; }
 .experiment-grid, .two-controls, .research-card { grid-template-columns:1fr; gap:1.1rem; }
 .experiment-grid > svg { max-height:340px; }
 .equation { grid-template-columns:1fr; gap:1rem; }
 .readout.inline { grid-template-columns:1fr; gap:.7rem; }
 .takeaway { grid-template-columns:1fr; gap:.4rem; padding:1.2rem; }
 .text p, p.text { font-size:1rem; }
 .experiment-heading { margin-bottom:.8rem; font-size:.65rem; }
 .experiment label { font-size:.8rem; }
 .two-controls { gap:.2rem; }
 .research-card { padding:1.4rem; }
 .lesson-route { gap:.65rem 1.1rem; }
 .lesson-route a { font-size:.68rem; }
 .finish .closing-story { font-size:1.1rem; }
 .wide-diagram { min-height:160px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto!important; } }
/* Shared institute navigation on the original research tool. */
body[data-rpi-page="gravity-lab"] { --paper:#f6f5f0; --ink:#171c27; background:var(--paper); }
body[data-rpi-page="gravity-lab"] main { width:min(calc(100% - 4rem),75rem); margin-inline:auto; }
body[data-rpi-page="gravity-lab"] .intro { padding-top:3.5rem; }
@media(max-width:700px) { body[data-rpi-page="gravity-lab"] main { width:calc(100% - 2.5rem); } }
/* RS mechanism lesson: all additions scoped to the teaching page. */
.gravity-main .rpi-hero h1 { font-size:clamp(3rem,5.8vw,5.2rem); line-height:1.03; letter-spacing:-.06em; }
.gravity-main .comparison-strip { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid #bbbcc5; margin:2rem 0; }
.gravity-main .comparison-strip > div { padding:1.5rem 1rem; display:flex; flex-direction:column; }
.gravity-main .comparison-strip > div + div { border-left:1px solid #bbbcc5; }
.gravity-main .comparison-strip strong { font:500 2rem/1.7 'JetBrains Mono',monospace; }
.gravity-main .comparison-strip div > span:last-child { font-size:.85rem; }
.gravity-main .coupling-map { display:grid; grid-template-columns:1fr auto .65fr auto 1fr; align-items:center; gap:1rem; margin:2.5rem 0; padding:2rem 1rem; background:#e5e4ef; border:1px solid #b3b0c6; text-align:center; }
.gravity-main .coupling-map strong { font-size:1.05rem; line-height:1.4; display:block; }
.gravity-main .coupling-centre { padding:1.3rem .5rem; background:#171c27; color:white; }
.gravity-main .coupling-centre .small-label { color:#c4cdf6; }
.gravity-main .familiar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:2.5rem; }
.gravity-main .familiar-grid article { padding:1.4rem; border:1px solid #bbbcc5; }
.gravity-main .familiar-grid svg { width:100%; height:auto; display:block; }
.gravity-main .familiar-grid h3 { font-size:1.05rem; margin:1rem 0 .6rem; }
.gravity-main .familiar-grid p { font-size:.87rem; margin:0; }
.gravity-main #fall-tides[aria-pressed="true"] { background:#615aaf; color:white; }
.gravity-main #pattern-experiment .choices button { font-size:.85rem; }
@media(max-width:760px) {
 .gravity-main .rpi-hero h1 { font-size:clamp(2.7rem,10vw,4.2rem); }
 .gravity-main .hero-art { max-width:520px; }
 .gravity-main .comparison-strip { grid-template-columns:1fr; }
 .gravity-main .comparison-strip > div { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:.4rem 1rem; padding:1rem; }
 .gravity-main .comparison-strip > div .small-label { grid-column:1/-1; margin:0; }
 .gravity-main .comparison-strip > div + div { border-left:0; border-top:1px solid #bbbcc5; }
 .gravity-main .comparison-strip strong { font-size:1.6rem; }
 .gravity-main .coupling-map { grid-template-columns:1fr; padding:1.3rem; }
 .gravity-main .coupling-map > span { transform:rotate(90deg); }
 .gravity-main .coupling-centre { padding:1rem; }
 .gravity-main .familiar-grid { grid-template-columns:1fr; gap:.8rem; }
 .gravity-main .familiar-grid svg { max-width:250px; margin:auto; }
 .gravity-main .experiment-grid > svg { max-height:none; }
}

.gravity-main .diagram-summary { font-size:.9rem; line-height:1.7; margin:.8rem 0 .5rem; }
.gravity-main .diagram-values { font:500 .9rem/1.9 var(--rpi-mono,'JetBrains Mono',monospace); overflow-wrap:anywhere; margin:0; }
.gravity-main .phase-arithmetic { border-block:1px solid #bbbcc5; margin:.6rem 0; padding:.8rem 0; }
.gravity-main .phase-arithmetic p { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem 1rem; font-size:.85rem; margin:.4rem 0; }
.gravity-main .phase-arithmetic strong { font:500 .85rem/1.7 var(--rpi-mono,'JetBrains Mono',monospace); }
@media(max-width:760px) {
 .gravity-main #field-diagram text, .gravity-main #tidal-diagram text { display:none; }
 .gravity-main .diagram-summary, .gravity-main .diagram-values { font-size:.9rem; }
 .gravity-main .phase-arithmetic p { display:block; }
 .gravity-main .phase-arithmetic strong { display:block; font-size:.86rem; margin-top:.25rem; }
}

/* The clock reading uses the same source-controlled balanced chain. */
.gravity-main .bridge-clocks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; margin:1.5rem 0; text-align:center; }
.gravity-main .bridge-clocks > div { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:1.15rem .35rem; background:#e1e2ef; }
.gravity-main .bridge-clocks > .bridge-centre { background:#ead0bd; }
.gravity-main .bridge-clocks span { font-size:.9rem; line-height:1.45; }
.gravity-main .bridge-clocks strong { font:500 clamp(1.05rem,5vw,1.65rem)/1.5 var(--rpi-mono,'JetBrains Mono',monospace); }
.gravity-main .bridge-clocks .bridge-direction { font-size:2rem; color:#615aaf; }
.gravity-main .bridge-source-dot { display:flex; align-items:center; min-height:2.9rem; }
@media(max-width:760px) {
 .gravity-main .bridge-clocks { gap:.4rem; }
 .gravity-main .bridge-clocks span { font-size:.85rem; }
}

/* Keep the physical explanation visible before the detailed constructions. */
.gravity-main .answer-map { border-top:1px solid var(--rpi-line); padding:2.4rem 0 2rem; }
.gravity-main .answer-map h2 { font-size:clamp(1.9rem,3.5vw,3rem); }
.gravity-main .answer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.gravity-main .answer-grid article { border-top:2px solid var(--rpi-line); padding-top:1.2rem; }
.gravity-main .answer-grid h3 { font-size:1.08rem; line-height:1.4; margin:.5rem 0 .8rem; }
.gravity-main .answer-grid p { font-size:.94rem; line-height:1.75; }
.gravity-main .answer-scope { max-width:900px; border-left:3px solid #7e7199; padding-left:1rem; margin-top:1.4rem; font-size:.87rem; line-height:1.7; }
.gravity-main .reading-time { font-size:.8rem; color:var(--rpi-muted); }
.gravity-main .geometry-choices { border:0; padding:0; margin:1.1rem 0 0; }
.gravity-main .geometry-choices legend { font-size:.85rem; font-weight:600; }
.gravity-main .geometry-choices .choices { margin:.5rem 0; }
.gravity-main .geometry-response { font-size:.8rem; }
.gravity-main .geometry-response output { font-family:var(--rpi-mono); white-space:nowrap; }
.gravity-main .worked-wave { border:1px solid var(--rpi-line); margin:2rem 0; padding:0 1.5rem; }
.gravity-main .worked-wave > summary { font-size:1.05rem; padding:1.3rem 0; }
.gravity-main .worked-wave-body { padding:.5rem 0 1rem; }
.gravity-main .worked-wave .experiment { padding:1.2rem; }
@media(max-width:760px) {
 .gravity-main .answer-grid { grid-template-columns:1fr; gap:.4rem; }
 .gravity-main .answer-map { padding:2rem 0 1rem; }
 .gravity-main .worked-wave { padding:0 .85rem; }
 .gravity-main .worked-wave .experiment { padding:.85rem; margin-inline:-.1rem; }
}

.gravity-main .geometry-mobile-reading { display:none; }
@media(max-width:760px) {
 body[data-rpi-page="gravity"] :is(section[id],div[id],details[id]) { scroll-margin-top:12rem; }
 .gravity-main .geometry-mobile-reading { display:block; font-size:1rem; line-height:1.65; }
 .gravity-main #geometry-diagram text { display:none; }
 .gravity-main #geometry-diagram { margin-bottom:0; }
 .gravity-main #clock-diagram text { font-size:26px; }
 .gravity-main #pattern-slots text { font-size:27px; }
 .gravity-main #pattern-diagram > text:not(#pattern-center) { display:none; }
 .gravity-main #pattern-center { font-size:27px; }
 .gravity-main #fall-diagram g text { font-size:26px; transform:translateX(-70px); }
 .gravity-main #fall-diagram > text { display:none; }
 .gravity-main .hero-art svg text { display:none; }
 .gravity-main .hero-art svg :is(.hero-pattern-label,.hero-geometry-label) { display:block; font-size:26px; }
 .gravity-main .hero-pattern-label { transform:translateY(74px); }
 .gravity-main .hero-geometry-label { transform:translateY(12px); }
 .gravity-main .hero-geometry-badge { x:110px; width:300px; }
}

.gravity-main .fall-mobile-reading { display:none; }
@media(max-width:760px) {
 .gravity-main .fall-mobile-reading { display:block; font-size:1rem; line-height:1.65; margin-top:.5rem; }
 .gravity-main .fall-diagram-wrap svg { width:100%; }
}

/* Causal models: signed energy accounting and the shared mass cancellation. */
.gravity-main .energy-key, .gravity-main .phase-axis-title { font-size:.94rem; line-height:1.6; margin-bottom:1rem; }
.gravity-main .energy-row { padding:1rem 0; }
.gravity-main .energy-row > div:first-child { display:flex; justify-content:space-between; gap:1rem; font-size:.96rem; margin-bottom:.65rem; }
.gravity-main .energy-row output { font:500 1rem/1.6 var(--rpi-mono); }
.gravity-main .energy-track { position:relative; height:27px; background:#e0ddd5; }
.gravity-main .energy-track::after { content:""; position:absolute; left:50%; top:-5px; height:37px; border-left:1px solid #676877; }
.gravity-main .energy-bar { display:block; position:absolute; height:100%; }
.gravity-main .energy-positive { background:#875235; }
.gravity-main .energy-negative { background:#615aaf; }
.gravity-main .energy-total { border-top:1px solid #bbbcc5; font-weight:600; }
.gravity-main .energy-axis, .gravity-main .phase-height-axis { display:flex; justify-content:space-between; gap:.5rem; font-size:.9rem; line-height:1.5; }
.gravity-main .energy-axis { font-family:var(--rpi-mono); }
.gravity-main .phase-legend { display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-size:.94rem; }
.gravity-main .phase-light-key { color:#514a9a; }
.gravity-main .phase-heavy-key { color:#875235; }
.gravity-main #phase-diagram { max-height:310px; }
.gravity-main .mass-readings { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.4rem; }
.gravity-main .mass-readings > div { border-top:3px solid #615aaf; padding-top:.8rem; }
.gravity-main .mass-readings > div + div { border-color:#875235; }
.gravity-main .mass-readings p { font-size:.85rem; line-height:1.5; margin:.5rem 0; }
.gravity-main .mass-readings strong { display:block; font:500 1.25rem/1.5 var(--rpi-mono); }
.gravity-main .coupling-status { padding:1.6rem; margin:3rem 0 0; border-left:3px solid #7e7199; background:#eeece5; scroll-margin-top:12rem; }
.gravity-main .coupling-status h3 { margin:0 0 1rem; }
.gravity-main .coupling-status p { max-width:800px; font-size:.94rem; }
.gravity-main .coupling-status p:last-child { margin-bottom:0; }
@media(max-width:760px) {
 .gravity-main .energy-row > div:first-child { font-size:.9rem; }
 .gravity-main .mass-readings { gap:.7rem; }
 .gravity-main .experiment label:has(#binding-amount-value) { flex-wrap:wrap; }
 .gravity-main .coupling-status { padding:1.2rem; }
}