:root {
  --bg: #0b0f17;
  --bg-2: #101624;
  --surface: #141b2b;
  --surface-2: #1a2236;
  --line: rgba(255, 255, 255, 0.08);
  --text: #e8edf6;
  --muted: #9aa6bb;
  --faint: #8792a6;
  /* The app icon's blues: sky #5fc7fb, ocean #099dda, deep #0a6fb8. */
  --accent: #5fc7fb;
  --accent-2: #099dda;
  --accent-ink: #03263f;
  --warn: #f5b84a;
  --warn-bg: rgba(245, 184, 74, 0.08);
  --shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f7f9fc;
    --bg-2: #eef3fa;
    --surface: #ffffff;
    --surface-2: #f1f5fb;
    --line: rgba(15, 30, 60, 0.1);
    --text: #0f1726;
    --muted: #4d5a70;
    --faint: #5c687c;
    --accent: #0a6fb8;
    --accent-2: #085c99;
    --accent-ink: #ffffff;
    --warn: #a86400;
    --warn-bg: rgba(245, 160, 40, 0.1);
    --shadow: 0 30px 70px -25px rgba(20, 40, 80, 0.35), 0 0 0 1px rgba(15, 30, 60, 0.08);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 24px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; font-size: 17px; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { border-radius: 7px; }
.nav nav { display: flex; gap: 22px; margin-left: auto; }
.nav nav a { color: var(--muted); font-size: 14.5px; }
.nav nav a:hover { color: var(--text); text-decoration: none; }
.gh { color: var(--muted); display: grid; place-items: center; }
.gh:hover { color: var(--text); }
@media (max-width: 720px) { .nav nav { display: none; } .gh { margin-left: auto; } }

/* Hero */
.hero { position: relative; padding: 88px 0 40px; text-align: center; overflow: hidden; }
.glow {
  position: absolute; inset: -20% -10% auto; height: 900px; pointer-events: none;
  background:
    radial-gradient(600px 340px at 50% 20%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%),
    radial-gradient(500px 300px at 20% 60%, color-mix(in srgb, #099dda 16%, transparent), transparent 70%),
    radial-gradient(500px 300px at 80% 55%, color-mix(in srgb, #0a6fb8 14%, transparent), transparent 70%);
  filter: blur(8px);
}
.hero-inner { position: relative; }
/* The headline's own face: Inter Display at 750, the weight the quill's
   strokes are traced from (scripts/site-headline-strokes.py). */
@font-face { font-family: "Quill Headline"; src: url("fonts/headline.woff2") format("woff2"); font-weight: 750; font-display: swap; }

h1 {
  margin: 0 auto; max-width: 900px;
  font-size: clamp(36px, 5.6vw, 64px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 750;
  text-wrap: balance;
}
h1 .accent { color: var(--accent); }
#hero-title { position: relative; font-family: "Quill Headline", var(--font); font-kerning: normal; letter-spacing: -0.018em; }
.lede { max-width: 680px; margin: 22px auto 0; font-size: clamp(17px, 2vw, 19.5px); color: var(--muted); }
.cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 22px;
  border-radius: 12px; font-weight: 600; font-size: 16px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn.primary {
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.ghost { color: var(--text); background: var(--surface); border: 1px solid var(--line); }
.fine { margin: 14px 0 0; font-size: 13px; color: var(--faint); }
.br { display: none; }
@media (min-width: 720px) { .br { display: inline; } }

.shot {
  margin: 0; border-radius: var(--radius); overflow: hidden; background: #000;
  box-shadow: var(--shadow); position: relative;
}
.chrome { height: 28px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #1b1b1d; }
.chrome i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.chrome i:nth-child(2) { background: #febc2e; }
.chrome i:nth-child(3) { background: #28c840; }
/* A generic laptop drawn in CSS; the clip plays on its screen. */
.laptop {
  --lid: #1b1c20; --lid-edge: #3a3c42; --base-top: #4a4d55; --base-bottom: #2a2c31; --groove: #1f2126;
  margin: 64px auto 0; width: min(1080px, 100%); position: relative;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .laptop {
    --lid: #16171a; --lid-edge: #c9ccd2; --base-top: #e6e8ec; --base-bottom: #b9bdc5; --groove: #a7abb3;
  }
}
.laptop-lid {
  position: relative; margin: 0 4.5%; padding: 1.7% 1.7% 2.2%;
  background: var(--lid); border-radius: 2.4% / 3.8%;
  box-shadow: 0 0 0 1px var(--lid-edge), inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 50px 120px -40px rgba(0, 0, 0, .55);
}
.laptop-screen { position: relative; overflow: hidden; border-radius: 0.6% / 1%; background: #0b0d14; aspect-ratio: 16 / 9; }
.laptop-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.laptop-notch {
  position: absolute; top: 1.7%; left: 50%; transform: translateX(-50%);
  width: 11%; height: 2.6%; background: var(--lid); border-radius: 0 0 9px 9px;
}
.laptop-notch::after {
  content: ""; position: absolute; top: 34%; left: 50%; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: #262a33; box-shadow: inset 0 0 0 1.5px #11141b;
}
.laptop-base {
  position: relative; height: 0; padding-bottom: 2.6%; margin-top: -0.4%;
  background: linear-gradient(180deg, var(--base-top), var(--base-bottom));
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 30px 50px -20px rgba(0, 0, 0, 0.55);
}
.laptop-groove {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 15%; height: 42%; background: var(--groove); border-radius: 0 0 12px 12px;
}
@media (prefers-reduced-motion: no-preference) {
  .laptop { animation: rise 1s cubic-bezier(.2,.7,.2,1) both .1s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }

/* Notice */
.notice { margin-top: 48px; }
.notice-card {
  display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: var(--radius);
  background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
.notice-card svg { color: var(--warn); flex: none; margin-top: 2px; }
.notice-card h2 { margin: 0 0 4px; font-size: 17px; }
.notice-card p { margin: 0; color: var(--muted); font-size: 15px; }

/* Sections */
section { scroll-margin-top: 72px; }
.section-title { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.025em; line-height: 1.1; margin: 0; font-weight: 720; }
.section-lede { color: var(--muted); max-width: 680px; margin: 12px 0 0; font-size: 17px; }
.features, .built, .download, .faq, .hdr, .measured { padding-top: 110px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 40px; }
.card {
  padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-2px); }
.card h3 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.ico {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.screens { margin-top: 110px; padding: 90px 0; background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-top: 1px solid var(--line); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 24px; }
.tabs button {
  font: inherit; font-size: 14px; cursor: pointer; color: var(--muted);
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
.gallery-shot img { transition: opacity .25s ease; }
.gallery-shot img.fading { opacity: 0; }

.built-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; margin-top: 36px; }
.built-grid h3 { margin: 0 0 8px; font-size: 18px; }
.built-grid p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* Download */
.no-release { margin-top: 24px; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px dashed var(--line); color: var(--muted); }
.no-release p { margin: 0; }
.no-release strong { color: var(--text); }
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 28px; }
.plat {
  display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  transition: border-color .2s ease, transform .2s ease;
}
.plat:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }
.plat.current { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.plat .name { font-weight: 650; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.plat .meta { color: var(--muted); font-size: 13.5px; }
.plat .sha { font-family: var(--mono); font-size: 11.5px; color: var(--faint); word-break: break-all; }
.plat .go { margin-top: 8px; color: var(--accent); font-weight: 600; font-size: 14.5px; }
.whatsnew { margin-top: 36px; padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.whatsnew h3 { margin: 0 0 4px; font-size: 20px; }
.notes { color: var(--muted); font-size: 15px; max-height: 460px; overflow: auto; }
.notes h1, .notes h2, .notes h3 { color: var(--text); font-size: 16px; margin: 18px 0 6px; background: none; -webkit-background-clip: initial; letter-spacing: 0; }
.notes ul { padding-left: 20px; }
.notes code { font-family: var(--mono); font-size: 13px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.notes table { display: none; }
.more { display: inline-block; margin-top: 12px; font-weight: 600; }
.reqs { color: var(--faint); font-size: 13.5px; margin-top: 22px; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq details:first-of-type { margin-top: 24px; border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--faint); font-weight: 400; font-size: 22px; line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--muted); margin: 10px 0 0; max-width: 760px; }

/* Footer */
.foot { margin-top: 120px; padding: 40px 0 56px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13.5px; }
.foot-brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 650; margin-bottom: 12px; }
.foot-brand img { border-radius: 6px; }
.foot p { margin: 6px 0; max-width: 760px; }
.foot .foot-small { font-size: 12.5px; }

/* Install: per system, the one-line installer first, the download and its first-open steps second. */
.install { margin-top: 44px; scroll-margin-top: 80px; }
.inst-title { font-size: 22px; margin: 0 0 14px; letter-spacing: -0.01em; }
.os-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.os-tabs[hidden] { display: none; }
.os-tabs button { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 600 14.5px var(--font); cursor: pointer; }
.os-tabs button:hover { color: var(--text); }
.os-tabs button[aria-selected="true"] { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
.os-panel + .os-panel { margin-top: 36px; }
.os-name { margin: 0; font-size: 17px; color: var(--muted); }
.js-tabs .os-panel + .os-panel { margin-top: 0; }
.js-tabs .os-name { display: none; }
.inst-card { position: relative; margin-top: 16px; padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.inst-card.recommended { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.inst-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.inst-card h4 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.inst-card h5 { margin: 26px 0 10px; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.inst-lede { margin: 6px 0 14px; color: var(--muted); }
.badge { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--accent-ink); background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.inst-steps, .open-steps { margin: 0; padding-left: 22px; }
.inst-steps li { margin: 8px 0; padding-left: 4px; }
kbd { font-family: var(--font); font-size: 13px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); }
.cmd { display: flex; align-items: stretch; gap: 8px; margin-top: 10px; }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: 13.5px; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); user-select: all; }
.copy { flex: none; padding: 0 16px; border-radius: 10px; border: 0; font: 600 14px var(--font); color: var(--accent-ink); background: linear-gradient(180deg, var(--accent), var(--accent-2)); cursor: pointer; }
.copy:hover { filter: brightness(1.08); }
.safe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 12px; }
.safe li { padding: 14px 16px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 14.5px; }
.safe strong { display: block; color: var(--text); margin-bottom: 2px; }
.why-note { margin: 16px 0 0; color: var(--faint); font-size: 14px; }
.inst-lede code, .safe code, .inst-steps code.inline { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; word-break: break-all; }
.why-note code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; word-break: break-all; }
.open-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 0; list-style: none; counter-reset: step; }
.open-steps li { counter-increment: step; display: flex; flex-direction: column; gap: 12px; }
.open-steps p { margin: 0; color: var(--muted); font-size: 14.5px; }
.open-steps p strong:first-child::before { content: counter(step) ". "; color: var(--accent); }
.open-steps p strong { color: var(--text); }

/* Drawn stand-ins for system dialogs, in the page's own light or dark theme. */
.mock { --m-bg: #2a2a2e; --m-text: #f2f2f4; --m-sub: #b8b8bf; --m-btn: #48484e; --m-line: rgba(255,255,255,.1);
  border-radius: 14px; background: var(--m-bg); color: var(--m-text); border: 1px solid var(--m-line); box-shadow: 0 14px 40px -18px rgba(0,0,0,.6); font-size: 12px; line-height: 1.35; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .mock { --m-bg: #f4f4f6; --m-text: #1d1d1f; --m-sub: #55555c; --m-btn: #e3e3e8; --m-line: rgba(0,0,0,.1); }
}
.mock .mbtn { display: block; font-style: normal; text-align: center; padding: 5px 10px; border-radius: 7px; background: var(--m-btn); font-weight: 500; }
.mock .mbtn.primary { background: #0064d1; color: #fff; }
.mock .ring { outline: 2.5px solid var(--accent); outline-offset: 2px; }

/* Drawn stand-in for the SmartScreen dialog, which is blue in either Windows theme. */
.mock-smartscreen { --m-bg: #0063b1; --m-text: #fff; --m-sub: #e6f0fa; --m-btn: rgba(255,255,255,.18); --m-line: rgba(255,255,255,.2);
  display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 4px; max-width: 300px; }
:root:not([data-theme="dark"]) .mock-smartscreen { --m-bg: #0063b1; --m-text: #fff; --m-sub: #e6f0fa; --m-btn: rgba(255,255,255,.18); --m-line: rgba(255,255,255,.2); }
.mock-smartscreen b { font-size: 16px; font-weight: 400; }
.mock-smartscreen span { color: var(--m-sub); }
.mock-smartscreen .mmeta { margin-top: 2px; }
.mock-smartscreen .mlink { align-self: flex-start; font-style: normal; text-decoration: underline; }
.mock-smartscreen .mrow { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.mock-smartscreen .mbtn { border-radius: 2px; border: 1px solid var(--m-line); min-width: 84px; }

/* Browser surfaces in the icon's blues. */
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
html { scrollbar-color: color-mix(in srgb, var(--accent) 35%, var(--surface)) var(--bg); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The measured claim under the hero buttons, linked to its method. */
.proof { max-width: 620px; margin: 22px auto 0; font-size: 15px; color: var(--muted); }
.proof a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-underline-offset: .25em; }
.proof strong { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* HDR */
.hdr-grid { display: grid; gap: 40px 56px; align-items: center; }
@media (min-width: 960px) { .hdr-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.tag { display: inline-block; padding: 0 7px; border-radius: 6px; font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); }
.hdr-list { margin: 26px 0 0; display: grid; gap: 14px; }
.hdr-list div { padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.hdr-list dt { font-weight: 650; font-size: 15px; }
.hdr-list dd { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.hdr-shots { margin: 0; position: relative; padding-bottom: 56px; }
.hdr-viewer { width: 100%; border-radius: 14px; box-shadow: var(--shadow); }
.hdr-bubble { position: absolute; right: -12px; bottom: 0; width: 36%; border-radius: 14px; box-shadow: var(--shadow); }
@media (max-width: 600px) {
  .hdr-shots { padding-bottom: 0; }
  .hdr-bubble { position: static; width: 70%; margin: -40px 0 0 auto; }
}

/* Measurements */
.table-card { margin-top: 32px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow-x: auto; }
.report { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.report th, .report td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.report tbody tr:last-child > * { border-bottom: 0; }
.report thead th { font-size: 13px; font-weight: 600; color: var(--faint); }
.report tbody th { font-weight: 500; }
.report td { white-space: nowrap; color: var(--muted); }
.report td { color: var(--accent); font-weight: 650; }
.method { margin: 16px 0 0; max-width: 820px; font-size: 13.5px; color: var(--faint); }
.method code { font-family: var(--mono); font-size: .92em; }
.agent-setup { max-width: 860px; margin-top: 28px; }
.agent-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 16px; padding: 24px 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.agent-panel .os-name { margin-bottom: -4px; }
.agent-step h5 { margin: 0; font-size: 15px; }
.agent-step p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
.agent-step p code, .agent-panel .method code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.agent-panel .method { margin: 0; }
.agent-panel[hidden] { display: none; }
.js-tabs .agent-panel.os-panel { margin-top: 16px; }
@media (max-width: 600px) { .agent-panel { padding: 18px 16px; } }
@media (max-width: 600px) { .report th, .report td { padding: 12px 12px; font-size: 14.5px; } }

/* Feature cards: the icon sits beside the title, the text runs full width under both. */
.card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 10px; }
.card p { grid-column: 1 / -1; }
.ico { width: auto; height: auto; background: none; border-radius: 0; }
.ico svg { width: 22px; height: 22px; }

/* The quill that writes the headline on load (quill-write.js). While it
   writes, the text is transparent but still there to select and read, and
   canvases over it show the ink. Without script, or with reduced motion,
   the headline is simply there. */
.quill-pen { position: fixed; left: 0; top: 0; z-index: 20; overflow: visible; pointer-events: none; opacity: 0; will-change: transform, filter; }
.quill-writing #hero-title { -webkit-text-fill-color: transparent; }
.quill-ink { position: absolute; pointer-events: none; transition: opacity .2s ease-out; }
.quill-ink.gone { opacity: 0; }
.brand-mark { position: relative; display: block; width: 28px; height: 28px; }
.brand-mark img { display: block; }
.brand-full { transition: opacity .28s ease-out; }
/* The logo's feather-less ring, shown only while the headline quill is on its way. */
.brand-base { position: absolute; inset: 0; opacity: 0; transition: opacity .2s ease-out .3s; }
.quill-awaiting .brand-full { opacity: 0; transition: none; }
.quill-awaiting .brand-base { opacity: 1; transition: none; }