:root {
  color-scheme: dark;
  --paper: #000000;
  --panel: #000000;
  --text: #e0efff;
  --ink: var(--text);
  --muted: #c0cbe5;
  --line: #626680;
  --accent: #c6acff;
  --route: #a5daff;
  --rail: #8990b2;
  --recess: #000000;
  --amber: var(--accent);
  font-family: system-ui, sans-serif;
  background: var(--paper);
}
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--paper);
}
.mast, .colophon {width: min(92%,78rem); margin: auto;}
header.mast {
  position: static; display: block; height: auto; min-height: 0;
  padding: 0; background: transparent; color: var(--text);
  border: 0; border-bottom: 1px solid var(--line);
}
.mast-inner,.mast nav,.mast a,.colophon {display:flex;align-items:center}
.mast-inner {justify-content:space-between;gap:1rem;min-height:4.75rem}
.mast nav {gap:clamp(.8rem,3vw,2rem)}
.mast a,.colophon a {color:inherit;font:600 .95rem/1.3 system-ui,sans-serif;text-decoration:none;min-height:44px;}
.wordmark {gap:.6rem}
.wordmark img {background:var(--accent);padding:3px;image-rendering:pixelated}
.mast a:hover,.colophon a:hover,.siblings a:hover {color:var(--accent);text-decoration:underline;text-underline-offset:.25em}
.colophon {gap:1rem;flex-wrap:wrap;padding:1rem 0 2rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.colophon a {display:inline-flex;align-items:center}
.colophon a:last-child {margin-left:auto}
.projection {background:var(--recess);border-color:var(--line)}
.transport {flex-wrap:wrap}
.section {background:var(--paper)}
.product-hero {background:var(--panel);border-bottom:1px solid var(--line)}
.detail-aside {background:var(--panel);border-color:var(--line)}
.breadcrumbs,.detail-aside dt {color:var(--accent)}
.process-map li::before {background:var(--accent);border-color:var(--paper)}
.siblings {width:min(92%,75rem);margin:0 auto 3rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-block:1px solid var(--line)}
.siblings a {display:grid;gap:.4rem;padding:1.1rem;color:var(--text);text-decoration:none;}
.siblings a + a {border-left:1px solid var(--line);text-align:right}
.siblings small {color:var(--muted);font: .78rem/1.4 ui-monospace,monospace}
.siblings span {font:400 clamp(1.1rem,2vw,1.55rem)/1.25 Georgia,serif}
:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:480px){.colophon{gap:.3rem 1rem}.colophon span{display:none}.mast-inner{gap:.4rem}.mast a{font-size:.85rem}.siblings a{padding:.8rem .55rem}}
/* Violet marks actions. Light blue connects related steps and destinations. */

.directory-title {border-color:var(--route)}
.detail-grid .process-map li {border-color:var(--rail);padding-inline-end:1rem}
.detail-grid .process-map li::before {background:var(--route);border-radius:50%}
.siblings small,.breadcrumbs,.detail-aside dt {color:var(--route)}
.detail-aside {border-top:2px solid var(--route)}
.detail-grid p,.detail-aside dd {max-width:65ch}
.detail-grid h2 + p {margin-block-start:.5rem}
.detail-aside .button.outline {border-color:var(--accent);color:var(--accent)}
.mast a:focus-visible,.siblings a:focus-visible,#products a:focus-visible {outline-offset:-3px}
@media(max-width:600px) {
  .siblings {grid-template-columns:1fr}
  .siblings a + a {border-left:0;border-top:1px solid var(--line);text-align:left}
  .transport {gap:.25rem .6rem}
}

/* Use one edge, ink and surface treatment for route information across pages. */
#products,.product-hero,.detail-aside {background-color:var(--panel)}
.directory-title span {color:var(--muted)}
#products a:hover,#products a:focus-visible,.siblings a:hover,.siblings a:focus-visible {background:var(--recess)}
.product-meta .status {color:var(--muted);background:transparent;border:0;padding:0;font-weight:400}
.detail-grid h2,.directory-title h1 {color:var(--text)}
.detail-aside .button.outline:hover,.detail-aside .button.outline:focus-visible {background:var(--accent);color:var(--recess)}
.transport .scene-thumb {display:inline-flex;justify-content:center;padding:0 .2rem;min-width:52px;min-height:44px}
.scene-thumb img {width:48px;height:27px;object-fit:cover;border:1px solid var(--rail)}
.scene-thumb[aria-current="location"] img {border:2px solid var(--route)}
.scene-thumb:hover img {border-color:var(--accent)}

.future-view,video,.skip {background:var(--recess)}
.play {color:var(--recess)}

.detail-aside .audience {margin:0;line-height:1.6;color:var(--muted)}

.mast a[aria-current="location"] {color:var(--route);text-decoration:underline;text-underline-offset:.25em}