:root {
  --bg: #fbfaf8; --fg: #1d1d1f; --muted: #6e6e73; --card: #ffffff; --line: #e6e3de;
  --accent: #1a73f2; --code: #f2f0ec;
  --g: #33b34d; --b: #1a73f2; --o: #f28c1a;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #141414; --fg: #f2f2f2; --muted: #a1a1a6; --card: #1e1e1e; --line: #2f2f2f; --accent: #5aa0ff; --code: #242424; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 40px 16px 64px; }
header { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
header img { width: 64px; height: 64px; flex: none; }
h1 { font-size: 32px; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: 21px; margin: 40px 0 10px; letter-spacing: -0.01em; }
h3 { font-size: 17px; margin: 24px 0 6px; }
.lead { font-size: 19px; margin: 0 0 8px; }
.muted { color: var(--muted); }
a { color: var(--accent); }
code { background: var(--code); padding: 2px 6px; border-radius: 6px; font-size: 0.88em; overflow-wrap: anywhere; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0; align-items: start; }
.shots img { width: 100%; height: auto; border-radius: 12px; display: block; }
.copy { position: relative; background: var(--code); border-radius: 10px; padding: 14px 92px 14px 16px; margin: 8px 0 4px;
        font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.copy button { position: absolute; top: 10px; right: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg);
               border-radius: 8px; padding: 4px 10px; font: 600 13px -apple-system, system-ui, sans-serif; cursor: pointer; }
.btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; padding: 10px 18px;
       border-radius: 10px; font-weight: 600; margin: 28px 0 0; }
.btn.alt { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.dots { font-size: 18px; letter-spacing: 2px; }
.dots .g { color: var(--g); } .dots .b { color: var(--b); } .dots .o { color: var(--o); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
td, th { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }
td:first-child { width: 46%; }
footer { margin-top: 56px; color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; }
.langs a { margin-left: 8px; text-decoration: none; }
.langs a[aria-current] { font-weight: 700; text-decoration: underline; }
@media (max-width: 600px) {
  .shots { grid-template-columns: 1fr; }
  h1 { font-size: 28px; }
  table, tbody, tr, td { display: block; } tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  td { border: 0; padding: 4px 0; } td:first-child { width: auto; } thead { display: none; }
  .langs a { margin: 0 8px 0 0; }
}

/* make become brand: the studio's dot and wordmark, as on make-become.github.io */
.mb { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; color: var(--muted); text-decoration: none;
      font: 500 15px/1 Syne, "Avenir Next", -apple-system, system-ui, sans-serif; letter-spacing: -0.01em; }
.mb:hover { color: var(--fg); }
.mb-dot { flex: none; width: 9px; height: 9px; border-radius: 999px; background: #7fad9a; box-shadow: 0 0 0 4px rgba(183, 216, 200, 0.45); }
.mb-name { color: var(--fg); font-weight: 600; }
.mb-role { color: #7fad9a; }

/* Bottom row of the landing page: "More info" on the left, the studio's green button on the right. */
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 28px; }
.actions .btn { margin: 0; }
.mb-btn { display: inline-grid; gap: 2px; padding: 10px 18px; border-radius: 10px; text-decoration: none; text-align: left;
          background: #7fad9a; color: #0f1a15; font-family: Syne, "Avenir Next", -apple-system, system-ui, sans-serif; }
.mb-btn:hover { background: #8fbda9; }
.mb-btn-name { font-weight: 600; font-size: 17px; line-height: 1.1; letter-spacing: -0.01em; }
.mb-btn-role { font-weight: 500; font-size: 13px; line-height: 1.1; opacity: 0.8; }