/* The application's own palette, from visualdynamics.theme — the site
   and the program it announces wear one set of colours. One stylesheet
   for every page, so a change lands everywhere rather than in three of
   four places (PRINCIPLES.md, 9). */
:root {
  --bg-top:    #0f1014;
  --bg-bottom: #31353d;
  --ink:       #e8e8ea;
  --muted:     #9a9aa2;
  --accent:    #ffb020;   /* scene_highlight */
  --rule:      #3a3f49;
  --panel:     #1a1c22;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0 6vw 10vh;
  background: radial-gradient(120% 60% at 50% 0%,
              var(--bg-bottom) 0%, var(--bg-top) 55%) no-repeat;
  background-color: var(--bg-top);
  color: var(--ink);
  font: 400 clamp(16px, 1.15vw + 13px, 19px)/1.65
        ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { max-width: 54rem; margin: 0 auto; }
a { color: var(--accent); }
p { margin: 0 0 1em; }
code { font-size: .9em; background: var(--panel); padding: .1em .35em;
       border-radius: 4px; }

/* ---- the bar every page carries ---- */
.top { max-width: 54rem; margin: 0 auto; display: flex; flex-wrap: wrap;
       align-items: center; gap: .4rem 1.4rem; padding: 1.6rem 0 .4rem; }
.top .home { display: flex; align-items: center; gap: .6rem;
             text-decoration: none; color: var(--ink); font-weight: 600;
             margin-right: auto; }
.top .home img { width: 30px; height: 30px; }
.top nav { display: flex; gap: 1.3rem; }
.top nav a { text-decoration: none; color: var(--muted);
             border-bottom: 1px solid transparent; padding-bottom: 2px; }
.top nav a:hover { color: var(--ink); }
.top nav a[aria-current="page"] { color: var(--ink);
                                  border-bottom-color: var(--accent); }

header { text-align: center; padding: 7vh 0 1vh; }
header.tall { padding: 9vh 0 2vh; }
.mark { width: clamp(96px, 13vw, 148px); height: auto; }
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin: .4em 0 .1em;
     letter-spacing: -0.02em; }
.tagline { color: var(--muted); font-size: 1.05em; margin: 0 0 .4em; }
/* The home page's is a sentence rather than a phrase. 34ch is wide
   enough to hold "Visualizing Structural Dynamics" on one line, so
   `balance` breaks it at the "and" rather than mid-phrase; narrower
   and it falls to three ragged lines. */
.tall .tagline { font-size: clamp(1.05em, 2.1vw, 1.3em);
                 max-width: 34ch; margin-inline: auto;
                 text-wrap: balance; }
h2 { font-size: 1.35rem; margin: 2.8em 0 .7em; letter-spacing: -0.01em; }
h2::after { content: ""; display: block; width: 2.5rem; height: 2px;
            background: var(--accent); margin-top: .5em; opacity: .8; }
h3 { font-size: 1.05rem; margin: 2em 0 .4em; }
.lede { font-size: 1.08em; }

/* ---- downloads ---- */
/* one row of four — one tile per package, chosen by eye rather than
   wrapped 3+1 (Brandon, 2026-08-31); narrow screens stack in pairs,
   phones in a column */
.downloads { display: grid; gap: 1rem;
             grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 52.01rem) {
  /* four across, the tiles are narrow: icon above text, centred, so
     "Apple silicon · .dmg · 392 MB" wraps inside the card instead of
     spilling out of it (Brandon, 2026-08-31) */
  .dl { flex-direction: column; text-align: center;
        gap: .6rem; padding: 1rem .7rem; }
}
@media (max-width: 52rem) {
  .downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
  .downloads { grid-template-columns: 1fr; }
}
.dl { display: flex; align-items: center; gap: .9rem;
      padding: 1.1rem 1.2rem; border: 1px solid var(--rule);
      border-radius: 10px; background: var(--panel); text-decoration: none;
      color: var(--ink); transition: border-color .15s, transform .15s; }
/* the application's own icon on each card: what arrives is one file
   that opens into the program, and the icon says so before the words
   do (Brandon, 2026-08-25) */
.dl .app { width: 46px; height: 46px; flex: none; border-radius: 10px; }
.dl .text { min-width: 0; }
.dl:hover, .dl:focus-visible { border-color: var(--accent);
                               transform: translateY(-2px); outline: none; }
.dl .os { display: block; font-weight: 600; font-size: 1.05em; }
.dl .file { display: block; color: var(--muted); font-size: .82em;
            margin-top: .25em; font-variant-numeric: tabular-nums; }
.dl[data-yours="1"] { border-color: var(--accent); }
/* short, and never broken across lines: "your system" wrapped the
   card onto a third line and left the icon looking uncentred */
.dl[data-yours="1"] .os::after { content: " — yours";
  color: var(--accent); font-weight: 400; font-size: .8em;
  white-space: nowrap; }
.note { color: var(--muted); font-size: .86em; margin-top: 1em; }
/* a command to be copied, so it keeps its line breaks and scrolls
   rather than wrapping — a wrapped shell command is a command that
   pastes wrong */
.command { background: var(--panel); border: 1px solid var(--rule);
           border-radius: 8px; padding: .7rem .9rem; margin: 0 0 1em;
           overflow-x: auto; font-size: .88em; line-height: 1.5;
           -webkit-user-select: all; user-select: all; }

/* ---- embedded figures ----
   No frame drawn around them: each one is a report page in an iframe
   that reports its own height (tools/make_web_examples.py), so it sits
   on the page as a figure rather than as a window with a scrollbar in
   it. The height here is only what shows before that message arrives. */
.figure { margin: 0 0 .6em; }
.figure iframe { display: block; width: 100%; height: 32rem; border: 0;
                 background: transparent; }
.caption { color: var(--muted); font-size: .86em; margin: 0 0 2.5em; }
.caption a { color: var(--muted); }

/* ---- tables ---- */
/* wide content scrolls inside its own box; the page itself never
   scrolls sideways */
.scrolls { overflow-x: auto; margin: 0 0 1em; }
table.formats { border-collapse: collapse; width: 100%; font-size: .92em; }
table.formats th, table.formats td { text-align: left; padding: .45rem .8rem;
  border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.formats th { color: var(--muted); font-weight: 600; font-size: .85em;
  letter-spacing: .04em; text-transform: uppercase; }
table.formats td:first-child { white-space: normal; }
table.formats tbody tr:last-child td { border-bottom: 0; }

/* ---- link rows ---- */
.links { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; padding: 0;
         list-style: none; margin: 0; }
.links a { text-decoration: none; border-bottom: 1px solid transparent; }
.links a:hover { border-bottom-color: var(--accent); }

footer { max-width: 54rem; margin: 5em auto 0; padding-top: 1.5em;
         border-top: 1px solid var(--rule); color: var(--muted);
         font-size: .85em; text-align: center; }
footer a { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .dl { transition: none; } }