: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, select:focus-visible, canvas:focus-visible, [role="tabpanel"]:focus-visible,
a:focus-visible, summary:focus-visible, pre:focus-visible, .scroll: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 output { flex: none; width: 8.2rem; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.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; }
.controls select { width: 100%; font: inherit; padding: 0.25rem 0.3rem; border: 1px solid #87959e; border-radius: 0.25rem;
                   color: #152e3d; background: #ffffff; }
.controls input:disabled { color: #5f6d75; background: #f3f0e8; }
.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; }
.controls p:last-child { margin-bottom: 0; }

figure { margin: 0; min-width: 0; }
canvas { display: block; width: 100%; background: #ffffff; border: 1px solid #d9d4c7; border-radius: 0.5rem; }
#flows { height: 29rem; }
#profile { height: 22rem; }
.views { min-width: 0; }
.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; font-variant-numeric: tabular-nums; }
.levels { border-collapse: collapse; width: 100%; margin: 0.9rem 0 0.2rem; font-size: 0.95rem;
          font-variant-numeric: tabular-nums; }
.levels caption { text-align: left; font-weight: 600; padding: 0 0 0.25rem; }
.levels th, .levels td { text-align: left; vertical-align: top; font-weight: 400; padding: 0.3rem 0.9rem 0.3rem 0;
                         border-bottom: 1px solid #e3dfd3; }
.levels thead th { font-weight: 600; border-bottom: 2px solid #152e3d; }
.levels th:last-child, .levels td:last-child { padding-right: 0; }
.levels tr.ground th, .levels tr.ground td { font-weight: 600; }
@media (max-width: 520px) { .levels { font-size: 0.88rem; } .levels th, .levels td { padding-right: 0.5rem; } }
.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; }

/* The key above the drawing: each kind of arrow, drawn the way the drawing draws it */
.key { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.3rem; font-size: 0.92rem; }
.key li { display: flex; align-items: center; gap: 0.45rem; }
.key .swatch { flex: none; width: 2.1rem; height: 0.75rem; }
.key .swatch path { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.key .swatch .sunlight { stroke: #a85400; }
.key .swatch .earthlight { stroke: #0072b2; }
.key .swatch .sunlight.head { fill: #a85400; stroke: none; }
.key .swatch .earthlight.head { fill: #0072b2; stroke: none; }
.key .swatch .rising { stroke: #99306f; stroke-width: 4; stroke-linecap: butt; stroke-dasharray: 5 3; }
.key .swatch .rising.head { fill: #99306f; stroke: none; }
.key .swatch .yours { stroke: #152e3d; stroke-width: 2.4; }
.key .swatch .yours.dot { fill: #152e3d; stroke: none; }
.key .swatch .still { stroke: #5f6d75; stroke-width: 1.8; stroke-dasharray: 5 4; stroke-linecap: butt; }
.key .swatch .still.dot { fill: #ffffff; stroke-dasharray: none; }

/* The About tab: one column of reading */
#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; }
@media (max-width: 520px) {   /* on a phone the values may wrap, so the words beside them get room */
  .symbols th, .symbols td { padding-right: 0.6rem; }
  .symbols th:last-child, .symbols td:last-child { white-space: normal; }
}
#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; }