.about{max-width:780px;margin:0 auto;padding:48px 24px 72px;line-height:1.6}
.about h1,.about h2{color:#ffcf52}
.about a{color:#87d7d2}
.translation-notice{margin-top:32px;padding:12px 14px;border-left:3px solid #ffcf52;background:#0b263d;color:#c4dbde;font-size:.9em}
.about .back{display:inline-block;margin-bottom:32px}
.about-shell{min-height:100vh}
.about-topbar{position:relative}
.about-topbar .brand{color:var(--text);text-decoration:none}
.about-topbar .language-switch{margin-left:auto}.about-topbar .language-switch select{box-sizing:border-box;height:38px;padding:5px 8px}
.about-topbar .help{color:var(--text);text-decoration:none}
.about-topbar .help[aria-current]{color:#ffcf52}
.high-contrast .about{color:#fff}
.manual-page .translation-notice,.versions-page .translation-notice{display:none}.historic-warning{margin-top:14px;padding:10px 12px;border-left:3px solid #ffcf52;background:#0b263d;color:#c4dbde;font-size:.9em}.historic-links{margin-top:10px;font-size:.95em}.historic-links a{color:#ffda63}.historic-source{margin-top:28px;font-size:.85em}
/* De tekening op de pagina Over eclipsen: een paneelvlak met de kleuren van de app. Zon goud, aarde aqua, maan labelgrijs; de kernschaduw donkerder dan de achtergrond, de halfschaduw een tint lichter. */
.eclipse-figure{margin:24px 0 32px;padding:14px;background:var(--navy);border:1px solid var(--line);border-radius:3px}.eclipse-figure svg{display:block;width:100%;height:auto}.eclipse-figure .sun{fill:#ffcf52}.eclipse-figure .moon{fill:#8eafb8}.eclipse-figure .earth{fill:#87d7d2;fill-opacity:.85;stroke:#cde9ed;stroke-width:1}.eclipse-figure .umbra{fill:#03101d;stroke:#ffcf52;stroke-width:.9;stroke-opacity:.8}.eclipse-figure .penumbra{fill:#274b63}.eclipse-figure .antumbra line{stroke:#8eafb8;stroke-width:1;stroke-dasharray:4 4}.eclipse-figure .rays line{stroke:#ffcf52;stroke-width:.8;stroke-opacity:.55}.eclipse-figure .leader{stroke:#ffda63;stroke-width:1}.eclipse-figure text{fill:#ffda63;paint-order:stroke;stroke:#03101d;stroke-width:3px;stroke-linejoin:round;font:600 11px 'DM Mono';letter-spacing:1px}.eclipse-figure figcaption{margin-top:10px;color:#c4dbde;font-size:.9em}.high-contrast .eclipse-figure{background:#000;border-color:#fff}
.about .contacts,.about .sources{padding-left:20px}.about .contacts li,.about .sources li{margin:6px 0}
/* Het knoppenoverzicht in de handleiding: de pictogramkolom links, de uitleg
   rechts. De pictogrammen zijn dezelfde die de app tekent, in dezelfde doos van
   34 px als in de app; zie `.selection-toggle`, `.location-lock` en `.track-icon`
   in style.css. Op een smal scherm gaat de uitleg onder de pictogrammen staan. */
.manual-icons{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;align-items:center;margin:14px 0 30px}
.manual-icons dt{display:flex;gap:6px}
.manual-icons dd{margin:0}
.manual-icon{position:relative;display:grid;place-items:center;flex:0 0 auto;box-sizing:border-box;margin:0;width:34px;height:34px;border:1px solid var(--line);border-radius:3px;background:#12334c;color:#b9d7db;font:500 15px/1 Arial}
.manual-icon.selection-toggle{display:grid;font-size:0}
.manual-icon.location-lock{font-size:0!important}
.manual-icon svg{width:17px;height:17px}
.high-contrast .manual-icon{background:#000;border-color:#fff;color:#fff}
@media(max-width:520px){.manual-icons{grid-template-columns:minmax(0,1fr);gap:6px 0}.manual-icons dd{margin-bottom:10px}}
/* Codeblokken in de handleiding (de insluitvoorbeelden): het paneelvlak, DM Mono, en de lange adresregel breekt binnen het blok in plaats van de pagina te verbreden. */
.about pre{margin:10px 0 22px;padding:10px 12px;background:var(--navy);border:1px solid var(--line);border-radius:3px;color:#c4dbde;font:11px/1.55 'DM Mono';white-space:pre-wrap;overflow-wrap:anywhere}.about pre code{font:inherit}.high-contrast .about pre{background:#000;border-color:#fff}
/* Het echte insluitvoorbeeld in de handleiding: het iframe vult de kolom en houdt de verhouding van 640 bij 400. */
.embed-live{margin:0 0 26px}.embed-live iframe{display:block;width:100%;max-width:640px;height:auto;aspect-ratio:8/5;border:1px solid var(--line);border-radius:3px}.embed-live--point iframe{max-width:420px;aspect-ratio:21/19}.embed-live figcaption{margin-top:8px;color:#c4dbde;font-size:.9em}
/* Onderlinge navigatie van de tekstpagina's: About, handleiding en versies. */
.page-nav{display:flex;flex-wrap:wrap;gap:14px;margin:-16px 0 28px;padding-bottom:14px;border-bottom:1px solid var(--line);font:10px 'DM Mono';letter-spacing:1.1px;text-transform:uppercase}
.page-nav a[aria-current]{color:#ffcf52;text-decoration:none}
/* De vier soortfiguren onder de alinea's op Over eclipsen: dezelfde tekening als de grote figuur (scripts/build-kind-figures.mjs), plus een waarnemer op de aarde en rechtsboven wat die ziet. */
.eclipse-figure.eclipse-kind-figure{margin:16px 0 30px}.eclipse-figure.eclipse-kind-figure figcaption{text-align:left;color:#c4dbde;font:inherit;letter-spacing:normal}.eclipse-kind-figure .observer{fill:#ffda63;stroke:#03101d;stroke-width:1}.eclipse-kind-figure .view-sun{fill:#ffcf52}.eclipse-kind-figure .view-moon{fill:#07192b}.eclipse-kind-figure .view-corona{fill:none;stroke:#fff9d1;stroke-width:6;stroke-opacity:.9}
.figure-link{margin:-20px 0 30px;font-size:.9em}
/* De inhoudsopgave van de handleiding. Die pagina telt vijftien kopjes; zonder
   overzicht scrol je maar wat. Twee kolommen zodra er ruimte is, zodat zij het
   begin van de tekst niet wegduwt. */
.manual-contents{margin:0 0 30px;padding:14px 16px;border:1px solid var(--line);border-radius:3px;background:rgba(6,24,41,.45)}
.manual-contents h2{margin:0 0 9px;font:600 10px 'DM Mono';letter-spacing:1.1px;color:#8eafb8}
.manual-contents ol{margin:0;padding:0 0 0 1.4em;columns:2;column-gap:26px;font-size:.95em}
.manual-contents li{margin:0 0 4px;break-inside:avoid}
.manual-contents a{color:#cfe8ec}
.manual-contents a:hover{color:#ffda63}
@media (max-width:560px){.manual-contents ol{columns:1}}
/* Een sprong naar een kopje zet dat kopje niet tegen de bovenrand. */
.about h2[id]{scroll-margin-top:16px}