/* CONSOLE, docs/brand. Space Grotesk display, Space Mono for every value. Concrete ground,
     2px black rules, hard offset shadows, no radius. Blue acts. Yellow marks state, and
     appears three times at most: the headline, the caller readout, the refusal. */
  :root {
    --ground: #e8e6e1; --panel: #ffffff; --ink: #111111; --muted: #3a3a3a; --faint: #5c5c5c; --ghost: #a09d95;
    --hair: #d5d2ca; --wash: #f4f2ec;
    --blue: #1f38d8; --blue-hover: #142aa8; --yellow: #ffd400;
    --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px;
  }
  * { box-sizing: border-box; }
  html { background: var(--ground); }
  body { margin: 0; font: 16px/1.5 var(--display); color: var(--ink); -webkit-font-smoothing: antialiased; }
  a { color: var(--blue); text-decoration: none; } a:hover { color: var(--blue-hover); text-decoration: underline; }
  h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; }
  h1 { font-size: 60px; line-height: 0.97; letter-spacing: -0.04em; }
  h2 { font-size: 34px; }
  h3 { font-size: 18px; letter-spacing: -0.02em; }
  p { margin: 0; }
  .mono { font-family: var(--mono); }
  .wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px; }
  .box { border: 2px solid var(--ink); background: var(--panel); }
  .shadow { box-shadow: 6px 6px 0 var(--ink); }
  .btn { display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 12px 20px; font-weight: 700; font-size: 15px; background: var(--panel); color: var(--ink); cursor: pointer; }
  .btn:hover { text-decoration: none; color: var(--ink); transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--ink); }
  .btn.go { background: var(--blue); color: #fff; } .btn.go:hover { background: var(--blue-hover); color: #fff; }
  .btn:disabled { background: var(--ground); color: var(--ghost); border-color: var(--hair); box-shadow: none; cursor: default; transform: none; }

  nav { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }
  .navwrap { border-bottom: 2px solid var(--ink); background: var(--panel); }
  .mark { font-weight: 700; font-size: 22px; letter-spacing: -0.03em; color: var(--ink); }
  .mark:hover { text-decoration: none; color: var(--ink); }
  .mark em { font-style: normal; color: var(--blue); }
  nav .links { display: flex; gap: 10px; font-family: var(--mono); font-size: 13px; }
  nav .links a { border: 2px solid var(--ink); padding: 5px 12px; color: var(--ink); }
  nav .links a:hover { background: var(--yellow); text-decoration: none; }

/* The footer rule runs the full width of the page, not the width of the content. */
.foot { border-top: 2px solid var(--ink); }
footer { padding: 28px 0 40px; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; justify-content: space-between; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* tabbed code, used by the beta band */
.steps { border: 2px solid var(--ink); background: var(--ink); }
.steptabs { display: flex; }
.steptabs button { flex: 1; border: 0; border-right: 2px solid #3a3a3a; border-bottom: 2px solid #3a3a3a; background: var(--ink); color: #9d9a92; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em; padding: 11px 6px; cursor: pointer; text-align: center; }
.steptabs button:last-child { border-right: 0; }
.steptabs button[aria-selected="true"] { background: var(--blue); color: #fff; border-bottom-color: var(--blue); }
.steps .code { border: 0; margin: 0; white-space: pre; }
@media (max-width: 920px) { .steptabs { flex-direction: column; } .steptabs button { border-right: 0; padding: 13px 6px; } }