/* SAME REACTIONS · field study 20. Self-contained, same Paper/UV tokens as the series. */
:root{color-scheme:dark;--field:#0d0b18;--panel:#171329;--ink:#f6f2ff;--muted:#c9c0e5;--faint:#a399bf;--rule:#4d4672;--accent:#b59bff;--summary:#67d7c4;--warm:#f2a65a;--grid:#302a4e}
:root[data-theme=paper]{color-scheme:light;--field:#f3eee4;--panel:#faf6ef;--ink:#272332;--muted:#51475d;--faint:#675c73;--rule:#c0b5c6;--accent:#6944a6;--summary:#176c61;--warm:#98500c;--grid:#dfd5df}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--field);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5}
button,input,a,summary{-webkit-tap-highlight-color:transparent}
a{color:var(--summary);text-underline-offset:4px}
button{font:inherit;cursor:pointer;background:transparent;color:var(--muted);border:1px solid var(--rule);border-radius:5px;padding:10px 16px;min-height:44px}
button:hover{border-color:var(--accent);color:var(--ink)}
button[aria-pressed=true]{border-color:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--summary);outline-offset:4px}
[hidden]{display:none!important}
.wrap{max-width:none;margin:0;padding:0}
.exhibit-stage{position:relative;isolation:isolate;min-height:100svh;display:grid;grid-template-columns:minmax(205px,.8fr) minmax(480px,1.8fr) minmax(220px,.9fr);grid-template-rows:44px minmax(0,1fr) auto 72px;gap:18px clamp(18px,2.5vw,44px);padding:max(22px,env(safe-area-inset-top)) clamp(22px,4vw,76px) max(20px,env(safe-area-inset-bottom))}
.exhibit-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 46% 45%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 65%),linear-gradient(color-mix(in srgb,var(--rule) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--rule) 10%,transparent) 1px,transparent 1px);background-size:auto,110px 110px,110px 110px;mask-image:radial-gradient(ellipse at center,#000 25%,transparent 82%)}
.utility{grid-column:1/-1;display:flex;align-items:center;gap:22px;font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.09em;text-transform:uppercase}
.utility a{text-decoration:none;color:var(--muted)}
.utility #theme{margin-left:auto;border:0;border-radius:0;padding:5px;min-width:62px;font-size:11px;letter-spacing:.08em}
.hero{grid-column:1;grid-row:2;align-self:start;padding-top:26px;min-width:0}
.eyebrow,.small-label{font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.hero h1{font-size:clamp(36px,3.5vw,64px);font-weight:400;line-height:.96;letter-spacing:-.065em;margin:26px 0 24px}
.subtitle{font-size:clamp(16px,1.25vw,22px);line-height:1.5;max-width:23ch;margin:0;color:var(--muted)}
.frozen-caption{max-width:30ch;margin:50px 0 0;font:11px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted)}
.frozen-caption span{display:block;color:var(--summary);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.field{grid-column:2;grid-row:2;align-self:center;min-width:0;width:100%;max-width:860px;justify-self:center}
.chart{margin:0 0 14px;min-width:0}
.chart figcaption{display:flex;justify-content:space-between;gap:8px 12px;margin-bottom:3px;font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--faint)}
.chart figcaption span:first-child{color:var(--muted)}
.chart svg{display:block;width:100%;height:auto;max-height:181px;overflow:visible;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.load-chart svg{max-height:195px}
.legend{display:flex;flex-wrap:wrap;gap:8px 19px;margin:2px 0 0;font:10px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--faint)}
.legend i{display:inline-block;width:18px;height:0;vertical-align:middle;margin-right:7px;border-top:2px solid var(--accent)}
.legend .key-reference{border-color:var(--summary);border-top-style:dashed}
.static-preview img{display:block;width:100%;height:auto;border:1px solid var(--grid);background:var(--panel)}
.static-preview p{font:11px ui-monospace,Consolas,monospace;color:var(--faint)}

/* Charts keep physical quantities in their separate, explicitly labeled axes. */
.field svg .beam{stroke:var(--ink);stroke-width:7;stroke-linecap:round;fill:none}
.field svg .support{stroke:var(--muted);stroke-width:1.4;fill:var(--panel)}
.field svg .support-ground{stroke:var(--rule);stroke-width:1.5;fill:none}
.field svg .load-arrow{stroke:var(--accent);stroke-width:2;fill:none;marker-end:url(#arrowDown)}
.field svg .marker-load{fill:var(--accent)}
.field svg .load-band{fill:color-mix(in srgb,var(--accent) 14%,transparent);stroke:var(--accent);stroke-width:1}
.field svg .reaction-arrow{stroke:var(--summary);stroke-width:2;fill:none;marker-end:url(#arrowUp)}
.field svg .marker-reaction{fill:var(--summary)}
.field svg .reaction-note{fill:var(--summary);font-size:13px}
.field svg .load-note{fill:var(--accent);font-size:13px}
.field svg .axis-note,.field svg .tick{fill:var(--faint);font-size:13px}
.field svg .grid-line{stroke:var(--grid);stroke-width:1;fill:none}
.field svg .axis-line{stroke:var(--rule);stroke-width:1.2;fill:none}
.field svg .midline{stroke:var(--rule);stroke-width:1;stroke-dasharray:3 6;fill:none}
.field svg .selected-fill{fill:color-mix(in srgb,var(--accent) 13%,transparent);stroke:none}
.field svg .selected-curve{stroke:var(--accent);stroke-width:3;fill:none;vector-effect:non-scaling-stroke}
.field svg .reference-curve{stroke:var(--summary);stroke-width:2;stroke-dasharray:7 5;fill:none;vector-effect:non-scaling-stroke}
.field svg .selected-point{fill:var(--accent);stroke:var(--field);stroke-width:2}

.exhibit-reading{grid-column:3;grid-row:2;align-self:end;min-width:0;padding-bottom:18px}
.exhibit-reading .small-label{color:var(--summary)}
.exhibit-reading h2{font-size:clamp(25px,2.4vw,42px);font-weight:400;letter-spacing:-.045em;line-height:1.1;margin:13px 0 16px}
.exhibit-reading>p{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 16px}
.values{display:grid;gap:12px;border-top:1px solid var(--rule);padding-top:16px;margin:18px 0 0}
.values dt{font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--faint)}
.values dd{font:clamp(19px,1.7vw,27px)/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;margin:3px 0 0}
.values div:nth-child(2) dd{color:var(--accent)}
.pair-tool{margin-top:24px;border-top:1px solid var(--rule);padding-top:14px}
.pair-tool label{display:flex;justify-content:space-between;gap:10px;font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted)}
.pair-tool label strong{font-weight:400;color:var(--ink);white-space:nowrap}
.pair-tool>div{display:flex;align-items:center;gap:10px}
.pair-tool input{width:100%;min-width:0;height:40px;accent-color:var(--accent)}
.pair-tool output{min-width:3.2em;text-align:right;font:14px ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.pair-tool p{font:10px/1.5 ui-monospace,Consolas,monospace;color:var(--faint);margin:0}
.exhibit-reading .invariant-line{border-top:1px solid var(--rule);padding-top:12px;margin-top:20px;font:11px/1.7 ui-monospace,Consolas,monospace}
.invariant-line strong{display:block;color:var(--summary);font-weight:400}
.exhibit-tools{grid-column:1/-1;grid-row:3;display:flex;align-items:center;justify-content:space-between;gap:10px 20px;font:11px/1.5 ui-monospace,Consolas,monospace;color:var(--faint)}
.exhibit-tools a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.exhibit-switcher{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;border-top:1px solid var(--rule)}
.exhibit-switcher button{display:flex;align-items:center;gap:15px;min-width:0;margin-top:-1px;padding:12px 0;text-align:left;border:0;border-top:2px solid transparent;border-radius:0;background:transparent;font-size:15px;color:var(--faint)}
.exhibit-switcher button[aria-pressed=true]{border-color:var(--ink);background:transparent;color:var(--ink)}
.exhibit-switcher button span{font:10px ui-monospace,Consolas,monospace;color:var(--accent)}
.exhibit-switcher button small{margin-left:auto;font:11px ui-monospace,Consolas,monospace;color:var(--faint)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fallback{margin:18px clamp(22px,4vw,76px);padding:18px;border:1px solid var(--rule);color:var(--muted)}
.study-notes,.footer{max-width:1190px;margin:30px auto;padding:20px clamp(22px,4vw,76px)}
.study-notes{border-top:1px solid var(--rule);scroll-margin-top:18px}
.study-notes summary{min-height:44px;padding:8px 0;cursor:pointer;color:var(--summary)}
.study-intro{max-width:75ch;font-size:17px;line-height:1.7;color:var(--muted)}
.contract{display:flex;flex-wrap:wrap;gap:12px 28px;border-block:1px solid var(--rule);padding:15px 0;margin:24px 0;font-size:14px;color:var(--muted)}
.contract strong{font-weight:500;color:var(--ink)}
.contract .retained{color:var(--summary)}
.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 42px}
.notes-grid h3,.audit h3{font-weight:400;font-size:19px;margin:0 0 10px}
.notes-grid p{color:var(--muted);margin:0 0 12px}
.audit{margin-top:24px;overflow-x:auto}
.audit table{width:100%;min-width:700px;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.audit th,.audit td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--rule)}
.audit th:first-child,.audit td:first-child{text-align:left}
.audit thead th{font-weight:500;color:var(--muted)}
.audit tbody th{font-weight:400}
.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;border-top:1px solid var(--rule);font-size:13px;margin-bottom:30px}

@media(max-width:1280px),(max-height:790px){
  .exhibit-stage{height:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;gap:14px 24px}
  .utility{grid-column:1/-1;grid-row:1}
  .hero{grid-column:1/-1;grid-row:2;padding-top:0}
  .hero h1{font-size:clamp(42px,6vw,72px);margin:12px 0 10px}
  .hero h1 br{display:none}
  .subtitle{max-width:none;font-size:17px}
  .frozen-caption{max-width:none;margin:12px 0 0}
  .frozen-caption span{display:inline;margin-right:10px}
  .field{grid-column:1/-1;grid-row:3;width:min(100%,800px)}
  .exhibit-switcher{grid-column:1/-1;grid-row:4}
  .exhibit-reading{grid-column:1/-1;grid-row:5;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:0 28px}
  .exhibit-reading .small-label,.exhibit-reading h2,.exhibit-reading>p#caseReading{grid-column:1}
  .exhibit-reading h2{margin:2px 0 7px}
  .exhibit-reading .values{grid-column:2;grid-row:1/4;align-self:start;margin:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:10px}
  .exhibit-reading .values dd{font-size:18px}
  .pair-tool{grid-column:1;grid-row:4;margin:0}
  .exhibit-reading .invariant-line{grid-column:2;grid-row:4;margin:0}
  .exhibit-tools{grid-column:1/-1;grid-row:6}
}
@media(max-width:760px){
  html{scroll-behavior:auto}
  .exhibit-stage{display:flex;flex-direction:column;padding:max(16px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));gap:14px}
  .utility{gap:14px;font-size:10px}
  .hero{margin-top:4px}
  .hero h1{font-size:clamp(32px,8.5vw,58px);overflow-wrap:anywhere}
  .subtitle{font-size:15px}
  .frozen-caption{font-size:10px;line-height:1.6}
  .field{order:1}
  .chart{margin-bottom:10px}
  .chart figcaption{font-size:9px;flex-wrap:wrap}
  .chart figcaption span:last-child{display:block}
  .field svg .tick,.field svg .axis-note,.field svg .load-note,.field svg .reaction-note{font-size:24px}
  .legend{font-size:9px}
  .exhibit-switcher{order:2;gap:10px}
  .exhibit-switcher button{flex-direction:column;align-items:flex-start;gap:4px;font-size:12px;padding:10px 0}
  .exhibit-switcher button small{margin:0;font-size:9px}
  .exhibit-reading{order:3;display:block}
  .exhibit-reading h2{font-size:27px;margin:3px 0 9px}
  .exhibit-reading>p#caseReading{font-size:13px}
  .exhibit-reading .values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 0}
  .exhibit-reading .values dt{font-size:9px}
  .exhibit-reading .values dd{font-size:clamp(13px,3.7vw,19px)}
  .pair-tool{margin-top:15px}
  .exhibit-reading .invariant-line{margin-top:16px}
  .exhibit-tools{order:4;display:block}
  .exhibit-tools span{display:block;font-size:10px}
  .study-notes,.footer{margin:18px auto;padding:16px 18px}
  .notes-grid{grid-template-columns:1fr;gap:18px}
  .study-intro{font-size:15px}
}
@media(max-width:390px){
  .exhibit-switcher button small{font-size:8px}
  .exhibit-reading .values{grid-template-columns:1fr 1fr}
  .exhibit-reading .values div:first-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0s!important}}