@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root { color-scheme: light; --paper:#fff; --ink:#000; --muted:#454545; --rule:#e0e0e0; --blue:#294e70; --orange:#a35323; --entropy:#3f6656; --soft:#f5f5f3; --serif:'EB Garamond',Georgia,'Times New Roman',serif; --sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:1.5rem; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 19px/1.6 var(--serif); }
a { color:inherit; text-underline-offset:4px; text-decoration-thickness:1px; }
a:hover { color:#555; }
button, input, select { font:400 14px/1.4 var(--sans); color:var(--ink); }
button, select, input[type='text'], input[type='number'] { border:1px solid #999; border-radius:0; background:var(--paper); min-height:38px; padding:7px 12px; }
button { cursor:pointer; }
button:hover { background:var(--soft); border-color:var(--ink); }
button.primary, button[aria-pressed='true'] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
button:disabled { cursor:default; opacity:.42; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
input[type='checkbox'] { width:16px; height:16px; margin:0; accent-color:var(--blue); }
input[type='range'] { width:100%; accent-color:var(--blue); margin:4px 0; min-height:26px; cursor:pointer; }
select { max-width:100%; }
figure { margin:0; min-width:0; }
p { margin:0 0 1rem; }
h1,h2,h3 { font-weight:400; line-height:1.3; }
h1 { font-size:2.5rem; margin:0 0 .65rem; letter-spacing:-.025em; }
h2 { font-size:1.75rem; margin:0; }
h3 { font-size:1.4rem; margin:0 0 .7rem; }
sub,sup { line-height:0; }
.wrap { width:calc(100% - 12vw); max-width:1200px; margin-inline:auto; }
.site-header { display:flex; align-items:center; justify-content:flex-end; padding:20px 0 16px; border-bottom:1px solid var(--ink); }
nav { display:flex; gap:28px; font-size:17px; }
nav a { text-decoration:none; }
nav a:hover { text-decoration:underline; }
.introduction { padding:30px 0 23px; max-width:840px; }
.standfirst { font-size:21px; line-height:1.45; max-width:800px; margin:0; }
.instrument { border-top:1px solid var(--ink); }
.figure-grid { display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:36px; padding:21px 0 17px; }
figcaption { display:flex; align-items:baseline; gap:10px; font-size:20px; line-height:1.3; }
.figure-number { font:12px/1 var(--sans); color:var(--muted); letter-spacing:.04em; }
figcaption output { margin-left:auto; font:16px/1 var(--sans); font-variant-numeric:tabular-nums; }
.ring-wrap { width:100%; }
#ring { display:block; width:100%; aspect-ratio:1.25; overflow:visible; }
.ring-figure { display:flex; flex-direction:column; }
.ring-legend { justify-content:center; margin-top:0!important; }
.legend { display:flex; align-items:center; flex-wrap:wrap; gap:9px 20px; font:12px/1.5 var(--sans); margin-top:4px; }
.legend span,.legend label { display:inline-flex; align-items:center; gap:7px; }
.legend label { cursor:pointer; }
.legend input { width:13px; height:13px; }
.sample { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; vertical-align:middle; }
.sample.plus { background:var(--blue); border:1.5px solid var(--blue); }
.sample.minus { background:var(--paper); border:1.5px solid var(--blue); }
.sample.scatterer { width:3px; height:15px; background:var(--orange); border-radius:0; }
.figure-note { font-size:17px; line-height:1.45; text-align:center; max-width:380px; margin:12px auto 0; color:var(--muted); }
.observable-figures { display:grid; gap:23px; align-content:start; }
.observable-figures figcaption { margin-bottom:8px; }
.chart { width:100%; position:relative; }
.chart svg { display:block; width:100%; touch-action:pan-y; }
.chart text { font:12px var(--sans); fill:var(--muted); }
.chart .axis-title { fill:var(--ink); }
.chart-note { font-size:15px; line-height:1.4; margin:4px 0 0; color:var(--muted); }
.line-sample { display:inline-block; width:21px; height:0; border-top:2px solid; }
.line-sample.exact { border-color:var(--blue); }
.line-sample.approximation { border-color:var(--orange); border-top-style:dashed; }
.math { font-style:italic; white-space:nowrap; }
.transport { display:flex; align-items:center; flex-wrap:wrap; gap:14px 25px; padding:12px 0; border-bottom:1px solid var(--rule); font:14px/1.5 var(--sans); }
.playback-buttons { display:flex; flex-wrap:wrap; gap:6px; }
.playback-buttons button { min-width:66px; }
.speed-label { display:flex; gap:10px; align-items:center; }
.speed-label select { border-color:var(--rule); }
.prediction-label { display:flex; align-items:center; gap:8px; margin-left:auto; }
.time-control { padding:0 0 12px; font:13px/1.5 var(--sans); }
.time-control label { display:block; }
.time-control output { margin-left:7px; font-variant-numeric:tabular-nums; }
.time-landmarks { display:flex; justify-content:space-between; gap:10px; }
.time-landmarks button { border:0; padding:0; min-height:30px; background:transparent; color:var(--muted); font-size:12px; text-align:left; }
.time-landmarks button:last-child { text-align:right; }
.time-landmarks button:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.state-note { font-size:18px; line-height:1.5; margin:0; padding:13px 0 16px; border-top:1px solid var(--rule); min-height:58px; }
.configuration,.history-section,.reading-section,.references { border-top:1px solid var(--ink); padding-top:24px; margin-top:18px; }
.section-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:7px 24px; margin-bottom:21px; }
.section-heading p { font-size:16px; color:var(--muted); margin:0; }
.parameter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:19px 32px; }
.parameter-grid label { display:flex; flex-direction:column; position:relative; gap:8px; font:14px/1.4 var(--sans); }
.parameter-symbol { position:absolute; right:0; top:0; font-variant-numeric:tabular-nums; color:var(--muted); }
.field-note { font:12px/1.5 var(--sans); color:var(--muted); }
.parameter-action { display:flex; flex-direction:column; justify-content:flex-start; align-items:start; gap:8px; padding-top:28px; }
.parameter-action button { width:100%; }
.advanced { border-top:1px solid var(--rule); padding:12px 0; margin-top:22px; font:14px/1.5 var(--sans); }
summary { width:fit-content; cursor:pointer; padding:3px 0; }
.editor { display:flex; align-items:end; flex-wrap:wrap; gap:14px; padding:20px 0 12px; }
.editor label { display:flex; align-items:center; gap:8px; }
.editor input { width:80px; }
.history-section { margin-top:10px; }
.history-chart { width:100%; height:288px; position:relative; }
.history-chart canvas { width:100%; height:100%; display:block; touch-action:pan-y; }
.history-caption { font-size:16px; line-height:1.4; display:flex; justify-content:flex-end; gap:15px; margin-top:10px; color:var(--muted); }
.history-caption>span:last-child { white-space:nowrap; }
.history-caption i { margin:0 3px 0 13px; }
.reading-section { margin-top:32px; }
.reading-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px 64px; margin-top:26px; }
.reading-grid p { font-size:18px; line-height:1.6; }
.equation { font-size:23px; text-align:center; margin:17px 0 20px; min-height:40px; line-height:1.5; }
.equation sub,.equation sup { font-size:.65em; }
.equation math { font-family:'Cambria Math','STIX Two Math',math; font-size:1em; }
.references { margin-top:22px; padding-bottom:12px; }
.references h2 { font-size:1.45rem; margin-bottom:14px; }
.references p,.references li { font-size:17px; max-width:950px; }
.references ol { padding-left:20px; margin:5px 0 0; }
.site-footer { border-top:1px solid var(--ink); margin-top:30px; padding:19px 0 28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:16px; }
.muted { color:var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:10px; top:-100px; background:var(--paper); padding:10px; z-index:10; }
.skip-link:focus { top:10px; }
@media(min-width:1400px) { .wrap { width:calc(100% - 240px); } }
@media(max-width:900px) { .figure-grid { gap:24px; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); } .standfirst { font-size:20px; } .legend { gap:7px 11px; } .prediction-label { margin-left:0; } .parameter-grid { gap:19px 22px; } .reading-grid { gap:25px 36px; } .ring-figure { justify-content:flex-start; } #ring { aspect-ratio:.94; } }
@media(max-width:680px) { body { font-size:18px; } .site-header { padding-top:18px; gap:15px; flex-wrap:wrap; } .site-name { font-size:1.4rem; } nav { font-size:15px; gap:20px; } .introduction { padding-top:24px; } h1 { font-size:2rem; } h2 { font-size:1.5rem; } .standfirst { font-size:19px; } .figure-grid { grid-template-columns:1fr; gap:26px; padding-top:18px; } .ring-wrap { max-width:430px; margin-inline:auto; } #ring { aspect-ratio:1.22; } .ring-legend { gap:18px; } .figure-note { margin-top:10px; max-width:360px; } .observable-figures { gap:20px; } .parameter-grid { grid-template-columns:1fr 1fr; gap:20px; } .parameter-symbol { position:static; display:inline; } .parameter-grid label { gap:6px; } .parameter-grid label:has(.parameter-symbol) { display:grid; grid-template-columns:1fr auto; align-content:start; } .parameter-grid label:has(.parameter-symbol)>select, .parameter-grid label:has(.parameter-symbol)>input, .parameter-grid label:has(.parameter-symbol)>.field-note { grid-column:1/-1; } .parameter-action { padding-top:26px; } .reading-grid { grid-template-columns:1fr; gap:16px; } .history-caption { flex-direction:column; gap:8px; } .history-chart { height:250px; } .section-heading { margin-bottom:18px; } .transport { gap:13px 20px; } .speed-label select { padding:5px 7px; } .prediction-label { font-size:13px; } .state-note { font-size:17px; } .site-footer { margin-top:22px; } }
@media(max-width:420px) { .wrap { width:88%; } .site-header { align-items:start; gap:8px; } nav { gap:20px; width:100%; } .parameter-grid { grid-template-columns:1fr; gap:17px; } .parameter-action { padding-top:0; } .parameter-grid select,.parameter-grid input[type=text] { min-height:42px; font-size:16px; } .transport { gap:12px; } .playback-buttons { gap:6px; width:100%; } .playback-buttons button { flex:1; min-width:0; padding:8px 9px; } .speed-label { width:100%; } .time-landmarks { gap:8px; } .time-landmarks button { font-size:11px; } .legend { font-size:11px; } .ring-legend { font-size:12px; gap:14px; } .editor { align-items:stretch; } .editor button { flex:1 1 45%; } .editor label { flex-basis:100%; } }
@media(pointer:coarse) { button,select,summary { min-height:44px; } input[type='range'] { min-height:38px; } .experiments { gap:3px 20px; } .experiments button { min-height:44px; } .time-landmarks button { min-height:44px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
@media print { .site-header nav,.transport,.time-control,.configuration,.skip-link { display:none; } .wrap { width:100%; } .figure-grid { break-inside:avoid; } .reading-grid { gap:24px; } a { text-decoration:none; } .site-footer { margin-top:10px; } }