/* Tyler — tiles and a halo. Graphite deck, amber focus; every screenshot is a tile with the
   app's luminous ring, and every shortcut a keycap.
   Display: Anybody, expanded. Text: Instrument Sans. Keys: JetBrains Mono. */

:root {
  --page-bg: #0f1013; --page-text: #e7e8ea; --page-muted: #a2a6ae; --page-line: #24262c;
  --page-accent: #e2a64c; --strong: #fbfaf7; --surface: #17181c; --raise: #1d1f24;
  --code-bg: #17181c; --code-text: #f1d7a8;
  --page-ui: "Instrument Sans", system-ui, sans-serif;
  --display: "Anybody", "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 12px;
  --k-ink: #d8d9dc; --k-accent: #e2a64c; --k-b: #7fb2ff; --k-c: #c79bf2; --k-ok: #6fd3a0; --k-muted: #6c7079; --k-file: #a2a6ae;
  color-scheme: dark;
}
body { background: radial-gradient(1200px 500px at 70% -10%, rgba(226, 166, 76, 0.09), transparent 60%), var(--page-bg); }

.hero h1 { font: 800 clamp(64px, 10vw, 136px)/0.86 var(--display); font-stretch: 140%; letter-spacing: -0.02em; }
.part > h2 { font: 750 clamp(26px, 3.2vw, 40px)/1.05 var(--display); font-stretch: 125%; letter-spacing: -0.01em; }
.kicker { color: var(--page-accent); }

/* A screenshot is a tile: continuous corners, a hairline, and the focus halo. */
.tile { margin: 28px 0 0; }
.tile img {
  display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid #2c2e34;
  box-shadow: 0 0 0 2px rgba(226, 166, 76, 0.0), 0 30px 60px -36px #000;
  transition: box-shadow 0.25s ease;
}
.tile:hover img, .hero-shot img { box-shadow: 0 0 0 2px var(--page-accent), 0 0 34px -4px rgba(226, 166, 76, 0.55), 0 30px 60px -36px #000; }
.tile figcaption { margin-top: 10px; font-size: 14px; color: var(--page-muted); max-width: 72ch; }
.hero-shot { margin-top: 36px; }
.duo { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

kbd {
  display: inline-block; min-width: 1.9em; text-align: center; padding: 0.12em 0.42em 0.18em;
  font: 500 0.82em/1.2 var(--mono); color: var(--strong); background: #1c1e23;
  border: 1px solid #353840; border-bottom-width: 2px; border-radius: 5px;
}
table.keys td { padding: 10px 12px; vertical-align: middle; }
table.keys td:first-child { white-space: nowrap; width: 1%; }
table.keys tr:hover td { background: rgba(226, 166, 76, 0.05); }

.facts li { border-left-color: rgba(226, 166, 76, 0.45); }
.fig { margin: 4px 0 0; padding: 14px; background: var(--surface); border: 1px solid var(--page-line); border-radius: 14px; }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }