on the quickstart, an
in the reference — which per-element scroll-margin did not. --stickyh is the bar's measured height, kept current by site.js (it grows when the row wraps); the fallback is its one-line height, so the offset is right before the script runs. */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--stickyh, 70px) + 18px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* overflow-wrap: a long identifier in prose (Application.onCreate(), AppEnvironment.BETA) is wider than a 375px column, and inline code is not inside anything scrollable, so it pushes sideways. Inline code wraps; block code keeps its lines and scrolls inside its own
. */
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; overflow-wrap: anywhere;
       background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
pre { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
      padding: 16px 18px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; margin: 12px 0; }
pre code { background: none; border: none; padding: 0; font-size: inherit; overflow-wrap: normal; }
pre .c { color: var(--faint); }
pre .hl { color: var(--accent); font-weight: 600; }
pre .s { color: var(--good); }
strong { color: var(--text); font-weight: 640; }
p, li { color: var(--muted); font-size: 15px; }
ul { padding-left: 22px; }
li { margin: 4px 0; }
h1 { font-size: 34px; letter-spacing: -.03em; margin: 0 0 8px; line-height: 1.15; }
h2 { font-size: 22px; letter-spacing: -.015em; margin: 44px 0 10px; }
h3 { font-size: 16px; margin: 24px 0 6px; }
.sub { color: var(--muted); margin: 0 0 26px; max-width: 64ch; font-size: 16.5px; }
.sub a { font-weight: 600; }

/* ── Platform switch (shared with the landing page; site.js drives ) ── */
html[data-platform="android"] [data-plat="ios"] { display: none !important; }
html:not([data-platform="android"]) [data-plat="android"] { display: none !important; }
.ptabs { display: inline-flex; align-items: center; gap: 3px; background: var(--panel); border: 1px solid var(--line);
         border-radius: 999px; padding: 3px; }
.ptabs button { font: inherit; font-size: 13.5px; font-weight: 640; color: var(--muted); background: transparent; border: none;
                border-radius: 999px; padding: 7px 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.ptabs button .pi { width: 14px; height: 14px; }
.ptabs button.active { color: var(--text); background: var(--panel-2); box-shadow: var(--shadow); }
.ptabs.mini button { font-size: 12px; padding: 4px 11px; }
.ptabs.mini button .pi { width: 12px; height: 12px; }
.platbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
           background: var(--bg); padding: 12px 0; margin: 0 0 8px; border-bottom: 1px solid var(--line); }
.platbar .hint { color: var(--faint); font-size: 13px; }
/* The bar is sticky, so every row it wraps to is a row stolen from the reading area for the
   whole page — 126px of a phone screen, once this aside wrapped to three lines. It is a nice
   to know, not an instruction, so below the width where it fits on the tabs' line it goes. */
@media (max-width: 780px) { .platbar .hint { display: none; } }

/* ── Nav ── */
nav.top { border-bottom: 1px solid var(--line); background: var(--bg); }
/* min-height, not height: at the largest accessibility text sizes the row is taller than 58px,
   and a fixed height let it spill over the border instead of moving it down. flex-wrap is the
   last resort under the steps below: two tidy rows beat a nav hanging outside its own bar. */
.navrow { max-width: 1120px; margin: 0 auto; padding: 8px 22px; display: flex; align-items: center;
          min-height: 58px; gap: 20px; flex-wrap: wrap; row-gap: 6px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 740; letter-spacing: -.025em; color: var(--text); white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo .mark { width: 24px; height: 24px; flex: none; }
.navrow .links { margin-left: auto; display: flex; gap: 18px; font-size: 14px; }
/* nowrap: these are labels, not prose. Left to wrap, "Sign in" and "Start free" broke over two
   lines on a 375px phone and doubled the height of the bar. They drop out instead, in order. */
.navrow .links a { color: var(--muted); white-space: nowrap; }
/* Text links keep their place in the bar but hit 40px tall (the bar is 56-62px); the
   negative margin cancels the padding in the layout, so only the touch area grows. */
.navrow .links a:not(.cta) { padding: 10px 0; margin: -10px 0; }
.navrow .links a.on { color: var(--text); font-weight: 640; }
.navrow .links a.cta { color: #fff; background: linear-gradient(135deg, var(--accent-fill), var(--accent-fill-2)); border-radius: 9px; padding: 9px 12px; font-weight: 640; }
.navrow .links a.cta:hover { text-decoration: none; filter: brightness(1.08); }

/* ── Layout: sidebar + article ── */
.page { max-width: 1120px; margin: 0 auto; padding: 36px 22px 90px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
aside.toc { position: sticky; top: 24px; font-size: 13.5px; }
aside.toc .grp { color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 18px 0 6px; }
aside.toc .grp:first-child { margin-top: 0; }
aside.toc a { display: block; color: var(--muted); padding: 5px 10px; border-left: 2px solid transparent; margin-left: -1px; border-radius: 0 6px 6px 0; }
aside.toc a:hover { color: var(--text); text-decoration: none; background: var(--panel); }
aside.toc a.current { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
aside.toc nav { border-left: 1px solid var(--line); }
aside.toc .n { display: inline-block; width: 18px; color: var(--faint); font-variant-numeric: tabular-nums; }
aside.toc a.current .n { color: var(--accent); }
details.tocmobile { display: none; }
main { min-width: 0; }
.page > footer.backtop { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 900px) {
  .page { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 24px; }
  aside.toc { display: none; }
  details.tocmobile { display: block; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 0 16px; margin: 0 0 22px; }
  details.tocmobile summary { cursor: pointer; font-weight: 650; padding: 12px 0; list-style: none; }
  details.tocmobile summary::-webkit-details-marker { display: none; }
  details.tocmobile a { display: block; padding: 6px 0; color: var(--muted); font-size: 14px; }
  details.tocmobile .grp { color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 10px 0 2px; }
  details.tocmobile nav { padding-bottom: 12px; }
}

/* ── Steps (quickstart) ── */
.step { position: relative; padding: 4px 0 4px 0; margin: 34px 0 0; }
.step h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.step h2 .n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; flex: none;
              background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 740; }
.step h2 .est { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.step > p:first-of-type { margin-top: 0; }
.do { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px 14px; margin: 12px 0; }
.do > p { margin: 10px 0; }
.do pre { margin: 10px 0 0; background: var(--bg-2); border-radius: 10px; }
.do .snippet { margin-top: 10px; }
.do .snippet pre { margin: 0; }
.do ul { margin: 6px 0 0; }
.check { display: flex; gap: 10px; align-items: baseline; margin: 12px 0 0; padding: 10px 14px; border-radius: 10px;
         background: var(--good-soft); border: 1px solid transparent; font-size: 14px; color: var(--muted); }
.check b { color: var(--good); font-weight: 800; flex: none; }
.check strong { color: var(--text); }
/* The "why / more" drawer under a step: for the people who want to read; closed for the rest. */
details.more { margin: 12px 0 0; border: 1px solid var(--line); border-radius: 12px; background: transparent; }
details.more summary { cursor: pointer; list-style: none; padding: 10px 14px; font-size: 14px; font-weight: 620; color: var(--muted); display: flex; align-items: center; gap: 8px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "▸"; color: var(--faint); font-size: 12px; transition: transform .15s; }
details.more[open] summary::before { transform: rotate(90deg); }
details.more summary:hover { color: var(--text); }
details.more .body { padding: 0 16px 14px; }
details.more .body p { margin: 8px 0; font-size: 14.5px; }
details.more .body ul { margin: 6px 0; }
details.more .body li { font-size: 14.5px; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin: 16px 0; }
.box p { margin: 0; }
.box p + p { margin-top: 10px; }
.box.warn { border-color: var(--warn); background: var(--warn-soft); }
.box.warn .t { color: var(--warn); font-weight: 700; }
.box.win { border-color: var(--good); background: var(--good-soft); }
.box.win .t { color: var(--good); font-weight: 700; }
.box.tip { border-color: var(--accent); background: var(--accent-soft); }
.box.tip .t { color: var(--accent); font-weight: 700; }
.box.tip.soft { border-color: var(--line); background: var(--panel); }
.copyrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.btn { font: inherit; font-size: 13.5px; font-weight: 640; padding: 7px 14px; border-radius: 9px; cursor: pointer;
       border: 1px solid var(--line); background: var(--panel-2); color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.btn.done { border-color: var(--good); color: var(--good); }
.keyrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* min-width: 0 because a flex item defaults to min-width:auto, which refuses to shrink below the
   package URL's width and pushes the page sideways on a phone. With that released, the global
   overflow-wrap breaks the URL instead. */
.keyrow code { font-size: 14px; padding: 6px 12px; min-width: 0; }
.snippet { position: relative; }
.snippet .copy { position: absolute; top: 8px; right: 8px; font-size: 12px; padding: 4px 10px; opacity: .85; }
.snippet pre { padding-right: 84px; }
.console { color: var(--muted); }
.console b { color: var(--good); font-weight: 600; }
/* The AI-agent shortcut, above step 1 */
details.agent { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 14px; padding: 0 20px; margin: 0 0 8px; }
details.agent summary { cursor: pointer; font-weight: 650; color: var(--text); padding: 15px 0; list-style: none; display: flex; align-items: center; gap: 12px; }
details.agent summary::-webkit-details-marker { display: none; }
details.agent summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 20px; font-weight: 400; }
details.agent[open] summary::after { content: "−"; }  /* U+2212 minus, not an en dash */
details.agent summary .ic { font-size: 20px; }
details.agent summary .pill { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
                              background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
details.agent .body { padding: 0 0 18px; }
details.agent .body > p { margin: 0 0 12px; }
/* What the prompt will do, before the prompt itself: three lines anyone can read in five
   seconds, so the decision to paste it never depends on reading sixty lines of monospace. */
/* Hanging tick rather than a flex row: the lines carry inline  variants, and a
   flex li turns every one of them into its own flex item — gap and all — so the sentence came
   out as "the setup ␣ lines ␣ , gated". */
ul.willdo { list-style: none; padding: 0; margin: 0 0 14px; }
ul.willdo li { position: relative; padding-left: 22px; font-size: 14.5px; margin: 5px 0; }
ul.willdo li::before { content: "✓"; position: absolute; left: 2px; color: var(--accent); font-weight: 800; font-size: 12px; }
/* Copy first, on its own row: the button used to sit under the scroll box, so the primary
   action on this page was below a 420px wall of text you had no reason to read. */
details.agent .copyrow { margin: 0 0 12px; }
details.agent .copyrow .note { font-size: 13px; color: var(--faint); }
details.agent .copyrow .plat { font-size: 12px; font-weight: 640; color: var(--muted); background: var(--panel);
                               border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
/* Collapsed by default and faded at the cut, so it reads as a preview rather than a wall. The
   box clips; the  is never display:none, because the copy button reads the visible text
   out of it and a hidden element would copy an empty string. */
.promptbox { position: relative; max-height: 188px; overflow: hidden; }
.promptbox.open { max-height: none; }
.promptbox::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 13px; height: 90px; pointer-events: none;
                    border-radius: 0 0 11px 11px; background: linear-gradient(to bottom, transparent, var(--panel) 82%); }
.promptbox.open::after { display: none; }
.promptbox pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; margin: 0 0 12px; }
.promptbox:not(.open) pre { overflow: hidden; }
.promptbox.open pre { max-height: min(62vh, 620px); overflow-y: auto; }
ol.next { padding-left: 22px; }
ol.next li { margin: 8px 0; }
.next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 14px 0 0; }
.next-grid a.card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: var(--text); }
.next-grid a.card:hover { border-color: var(--accent); text-decoration: none; }
.next-grid a.card b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.next-grid a.card span { color: var(--muted); font-size: 13.5px; }
.backtop { margin-top: 48px; font-size: 14px; }
.hr { border: none; border-top: 1px solid var(--line); margin: 40px 0; }

/* ── Reference tables (docs) ── */
table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
     color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
td:first-child { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--text); white-space: nowrap; }
td code { font-size: 12.5px; }
.tablewrap { overflow-x: auto; }
dl.gloss dt { font-weight: 650; color: var(--text); margin-top: 14px; }
dl.gloss dd { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 14px 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.card h4 { margin: 0 0 4px; font-size: 15px; }
.card p { margin: 0; font-size: 14px; }
.card a.more { font-weight: 600; font-size: 13.5px; }
.pillrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; }
.pillrow span { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
/* Three steps down, each one dropping what a phone reader needs least, so the wordmark,
   Sign in and Start free survive to 320px: the secondary links and the page you are already
   on go first, then the type and the gaps tighten, then the last piece of wayfinding goes. */
@media (max-width: 640px) {
  .navrow { gap: 12px; padding: 8px 16px; }
  .navrow .links { gap: 12px; }
  .navrow .links a.hide-xs { display: none; }
  .navrow .links a.on { display: none; }
  details.agent summary .pill { display: none; }
  /* The platform tabs sit two lines above; on a phone this pill only earns a row of its own. */
  details.agent .copyrow .plat { display: none; }
  h1 { font-size: 28px; }
}
@media (max-width: 430px) {
  .navrow { gap: 10px; }
  .navrow .links { gap: 10px; font-size: 13px; }
  /* Vertical padding up, horizontal down: the button narrows without getting harder to hit. */
  .navrow .links a.cta { padding: 9px 10px; }
  .logo { font-size: 15px; }
}
@media (max-width: 359px) {
  /* Every page ends this row with Sign in and then Start free, so the last two children are
     the way in for a customer. Whatever precedes them is a link the page body also carries. */
  .navrow .links a:not(:nth-last-child(-n+2)) { display: none; }
}

/* ── Shared a11y utilities ── */
/* Skip link: first focusable thing on the page, visible only while focused. */
.skip { position: absolute; left: 16px; top: -100px; z-index: 200; padding: 10px 14px; border-radius: 8px;
        background: var(--panel); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow);
        font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; outline: 2px solid var(--accent); outline-offset: 2px; }
/* Visually hidden, still read by assistive tech (table captions, live notes). */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Wide tables: site.js wraps every .tablewrap / .cmpwrap in .scrollhint and keeps data-scroll
   current, and the edge that still has columns behind it gets a fade. Nothing shows when the
   table fits. The first column sticks so the row labels stay while the figures scroll. */
.scrollhint { position: relative; }
.scrollhint::before, .scrollhint::after { content: ""; position: absolute; top: 0; bottom: 0; width: 44px;
        pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 2; }
.scrollhint::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.scrollhint::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.scrollhint[data-scroll="start"]::after, .scrollhint[data-scroll="mid"]::after,
.scrollhint[data-scroll="mid"]::before, .scrollhint[data-scroll="end"]::before { opacity: 1; }
.scrollhint[data-scroll]:not([data-scroll="none"]) th:first-child,
.scrollhint[data-scroll]:not([data-scroll="none"]) td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { .scrollhint::before, .scrollhint::after { transition: none; } }