:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       color: #152e3d; background: #fbfaf7; line-height: 1.5; }
main { max-width: 68rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
h1 { font-size: 1.9rem; line-height: 1.15; margin: 0 0 0.6rem; }
h2 { font-size: 1.25rem; margin: 1.2rem 0 0.8rem; }
h3 { font-size: 1.05rem; margin: 1.6rem 0 0.4rem; }
a { color: #0b5a8a; }
.crumb { margin: 0 0 1.2rem; font-size: 0.95rem; }
.intro { font-size: 1.1rem; max-width: 46rem; margin: 0 0 1.4rem; color: #2b4252; }
.embed-only { display: none; margin: 0 0 0.6rem; font-size: 0.95rem; }
body.embed .standalone-only { display: none; }
body.embed .embed-only { display: block; }
body.embed { background: #ffffff; }
body.embed main { padding: 0.75rem; }
body.embed h1 { font-size: 1.3rem; }

.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 2px solid #152e3d; }
.tabs button { font: inherit; font-weight: 600; color: #152e3d; background: #ece8dd; border: 1px solid #c9c3b3;
               border-bottom: none; border-radius: 0.4rem 0.4rem 0 0; padding: 0.5rem 0.9rem; cursor: pointer; }
.tabs button[aria-selected="true"] { background: #152e3d; color: #ffffff; border-color: #152e3d; }
button:focus-visible, input:focus-visible, canvas:focus-visible, [role="tabpanel"]:focus-visible, a:focus-visible,
summary:focus-visible, pre:focus-visible {
  outline: 3px solid #0072b2; outline-offset: 2px; }

.layout { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 760px) { .layout { grid-template-columns: 1fr; } }
.controls { background: #ffffff; border: 1px solid #d9d4c7; border-radius: 0.5rem; padding: 1rem; margin: 0; }
.control { margin: 0 0 1.1rem; }
.control label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem; }
.pair { display: flex; gap: 0.5rem; align-items: center; }
.pair input[type="range"] { flex: 1; min-width: 0; accent-color: #0b5a8a; }
.pair input[type="number"] { width: 6.2rem; font: inherit; padding: 0.2rem 0.3rem; border: 1px solid #87959e;
                             border-radius: 0.25rem; color: #152e3d; background: #ffffff; }
.hint { margin: 0.35rem 0 0; font-size: 0.92rem; color: #3d5566; }
.presets { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 1rem; }
.controls button { font: inherit; font-size: 0.95rem; text-align: left; color: #152e3d; background: #f3f0e8;
                   border: 1px solid #87959e; border-radius: 0.3rem; padding: 0.35rem 0.6rem; cursor: pointer; }
.controls button:hover { background: #e6e1d3; }
.controls p { margin: 0 0 0.8rem; }

figure { margin: 0; min-width: 0; }
canvas { display: block; width: 100%; background: #ffffff; border: 1px solid #d9d4c7; border-radius: 0.5rem; }
#timeseries { height: 40rem; cursor: crosshair; }
#compare, #sensitivity { height: 44rem; cursor: crosshair; }
#orbit { height: 15rem; border: none; margin-top: 0.4rem; }
.readout { margin: 0.5rem 0 0; font-size: 0.95rem; min-height: 3em; color: #152e3d; font-variant-numeric: tabular-nums; }
.summary { margin: 0.3rem 0 0; font-size: 0.95rem; color: #2b4252; }
.note { max-width: 46rem; font-size: 0.95rem; color: #2b4252; }
.cite { font-size: 0.95rem; padding-left: 1.5rem; text-indent: -1.5rem; color: #2b4252; }
#loading { font-weight: 600; }

/* The About tab */
#panel-about { max-width: 46rem; }
#panel-about h3 { font-size: 1.15rem; margin: 2.2rem 0 0.5rem; padding-top: 1.1rem; border-top: 1px solid #d9d4c7;
                  scroll-margin-top: 0.5rem; }
h4 { font-size: 1rem; margin: 1.6rem 0 0.3rem; }
#panel-about li { margin: 0 0 0.4rem; }
.jump { margin: 1.2rem 0 0; padding: 0.6rem 0.9rem; font-size: 0.95rem; background: #ffffff; border: 1px solid #d9d4c7;
        border-radius: 0.5rem; }
.jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.2rem; }
#panel-about .jump li { margin: 0; }

/* Equations. Each letter is written upright in the MathML and set in italics here, from an ordinary serif font,
   because Android has no font with the mathematical italic letters. A wide equation scrolls sideways. */
math { font-family: "STIX Two Math", "Cambria Math", "STIX Two Text", Cambria, Georgia, "Times New Roman", "Noto Serif", serif;
       font-size: 1.15em; }
math mi[mathvariant="normal"], var { font-family: "STIX Two Text", Cambria, Georgia, "Times New Roman", "Noto Serif", serif;
                                     font-style: italic; }
var { font-size: 1.06em; line-height: 0; }   /* no line height of its own, so a line with a letter in it is no taller */
.eq { margin: 0.8rem 0 0.8rem 1.5rem; padding: 0.2rem 0; overflow-x: auto; overflow-y: hidden; }
@media (max-width: 520px) { .eq { margin-left: 0.5rem; } }
@media (max-width: 400px) { math { font-size: 1.08em; } }   /* so the widest equation fits a 320-pixel screen */
#panel-about sub, #panel-about sup { line-height: 0; font-size: 0.72em; }

.symbols { border-collapse: collapse; width: 100%; margin: 0.6rem 0 1rem; font-size: 0.95rem; }
.symbols th, .symbols td { text-align: left; vertical-align: top; padding: 0.4rem 0.9rem 0.4rem 0; font-weight: 400;
                           border-bottom: 1px solid #d9d4c7; }
.symbols thead th { font-weight: 600; border-bottom: 2px solid #152e3d; }
.symbols th:last-child, .symbols td:last-child { padding-right: 0; white-space: nowrap; }
#panel-about .worked li { margin-bottom: 0.6rem; }

/* The code, shown in the page */
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
code { font-size: 0.92em; }
.code { margin: 0.6rem 0; background: #ffffff; border: 1px solid #d9d4c7; border-radius: 0.5rem; }
.code summary { padding: 0.55rem 0.9rem; cursor: pointer; }
.code pre { margin: 0; padding: 0.8rem 0.9rem; max-height: 30rem; overflow: auto; border-top: 1px solid #d9d4c7;
            font-size: 0.82rem; line-height: 1.45; white-space: pre; tab-size: 2; }

[hidden] { display: none !important; }