/* X11 Droid — an X terminal room. Warm dark brown, amber phosphor, Motif-style bevelled
   frames around figures and screenshots; Martian Mono for headings, IBM Plex Sans for prose. */

:root {
  --page-bg: #1b1712; --page-text: #eadfcf; --page-muted: #b3a48e; --page-line: #3a3127;
  --page-accent: #e0a458; --strong: #fff6e8; --surface: #231d16; --raise: #2c241b;
  --code-bg: #15110d; --code-text: #f3d8ae;
  --page-ui: "IBM Plex Sans", system-ui, sans-serif;
  --display: "Martian Mono", ui-monospace, monospace;
  --mono: "Martian Mono", ui-monospace, monospace;
  --k-ink: #eadfcf; --k-accent: #e0a458; --k-b: #8fb8de; --k-c: #b9a0e0; --k-ok: #9fd39a; --k-muted: #8f8170; --k-file: #b3a48e;
  color-scheme: dark;
}
.hero h1 { font: 700 clamp(40px, 6vw, 72px)/1 var(--display); letter-spacing: -0.04em; color: var(--page-accent); }
.part > h2 { font: 600 clamp(22px, 2.6vw, 30px)/1.2 var(--display); letter-spacing: -0.02em; }
.bevel, .fig, .shot img {
  border: 2px solid; border-color: #4a3f33 #0f0c09 #0f0c09 #4a3f33; background: var(--surface);
}
.fig { padding: 16px 12px; }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; }
.shot.phone img { max-width: 360px; margin-left: auto; }
.shot.wide { margin-top: 18px; }
.shot.wide img { max-width: 720px; }
.shot figcaption { margin-top: 8px; font-size: 13.5px; color: var(--page-muted); }
.hero .shot.phone figcaption { text-align: right; }