:root {
  --paper: #EEF1F4;
  --paper-2: #E2E7EC;
  --ink: #0E1B26;
  --ink-2: #16293A;
  --slate: #566676;
  --lens: #0A8CA6;       /* cyan darkened for text contrast on paper */
  --lens-bright: #19C3E0;
  --signal: #F0502D;
  --line: #CBD3DB;
  --code-fg: #D6E2EC;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B151E; --paper-2: #122130; --ink: #E6EDF3; --ink-2: #0E1B26;
    --slate: #93A5B5; --lens: #19C3E0; --line: #223445;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--display); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--lens-bright); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

/* header */
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.015em; }
.brand img { width: 36px; height: 36px; display: block; }
nav { display: flex; gap: 20px; align-items: center; font-weight: 500; }
nav a { text-decoration: none; color: var(--slate); }
nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.gh { color: var(--ink); padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 999px; }
.gh:hover { background: var(--ink); color: var(--paper) !important; text-decoration: none !important; }
@media (max-width: 560px) { nav a:not(.gh) { display: none; } }

/* hero */
.hero { padding: 40px 0 72px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.hero .wrap > *, .split > * { min-width: 0; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; } .hero { padding: 72px 0 104px; } }
h1 { font-weight: 700; font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 20px; font-variation-settings: 'opsz' 96; }
.lede { font-size: 1.25rem; color: var(--slate); max-width: 34ch; margin: 0 0 32px; }
.install {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink-2); color: var(--code-fg); border-radius: 10px;
  padding: 12px 12px 12px 18px; font: 400 0.875rem/1.4 var(--mono); max-width: 480px;
}
.install code { overflow-x: auto; white-space: nowrap; }
.install .p { color: var(--lens-bright); }
button.copy {
  font: 500 0.875rem var(--display); background: var(--lens-bright); color: #06202A; border: 0;
  border-radius: 7px; padding: 8px 14px; cursor: pointer; flex: none; min-width: 72px;
}
button.copy:hover { background: #4AD6EE; }
.links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; font-weight: 500; }
.links a { color: var(--lens); text-underline-offset: 4px; }

/* viewfinder frame around the terminal */
.finder { position: relative; padding: 22px; }
.finder::before, .finder::after, .finder i::before, .finder i::after {
  content: ''; position: absolute; width: 34px; height: 34px; border: 5px solid var(--lens-bright);
}
.finder::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.finder::after { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.finder i::before { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.finder i::after { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.term { background: var(--ink-2); border-radius: 10px; color: var(--code-fg); overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #243A4D; font: 400 0.75rem var(--mono); color: #8FA4B6; }
.rec { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); }
.term pre { margin: 0; padding: 18px 18px 22px; font: 400 0.8125rem/1.75 var(--mono); overflow-x: auto; min-height: 15.5em; }
.term .c { color: #7C93A6; } .term .g { color: var(--lens-bright); } .term .o { color: #F2A48F; } .term .w { color: #FFFFFF; }
#term { white-space: normal; }
.ln { display: block; white-space: pre; }
.js .ln { opacity: 0; }
.js .ln.on { opacity: 1; }
.cursor { display: inline-block; width: 0.6em; height: 1.1em; background: var(--lens-bright); vertical-align: text-bottom; }
@media (prefers-reduced-motion: no-preference) { .cursor { animation: blink 1.1s steps(1) infinite; } }
@keyframes blink { 50% { opacity: 0; } }

/* sections */
section { padding: 72px 0; border-top: 1px solid var(--line); }
h2 { font-weight: 700; font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; max-width: 22ch; }
.sub { color: var(--slate); max-width: 56ch; margin: 0 0 32px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; } .split h2 { max-width: 14ch; } }

/* code block with tabs */
.code { background: var(--ink-2); border-radius: 10px; color: var(--code-fg); overflow: hidden; min-width: 0; }
.tabs { display: flex; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid #243A4D; overflow-x: auto; }
.tabs button { font: 500 0.875rem var(--display); color: #8FA4B6; background: none; border: 0; padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: #fff; border-bottom-color: var(--lens-bright); }
.tabs button:hover { color: #fff; }
.tabs .file { font: 500 0.875rem var(--display); color: #fff; padding: 10px 14px; border-bottom: 2px solid var(--lens-bright); }
.code pre { margin: 0; padding: 20px; overflow-x: auto; font: 400 0.8125rem/1.7 var(--mono); }
.code [role="tabpanel"][hidden] { display: none; }
.k { color: #F2A48F; } .s { color: #9FE3A8; } .cm { color: #6F889B; } .f { color: var(--lens-bright); }

/* coverage table */
table { border-collapse: collapse; width: 100%; max-width: 760px; }
th, td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; width: 11rem; }
td.n { font-family: var(--mono); font-size: 0.875rem; white-space: nowrap; width: 6rem; color: var(--lens); }
td { color: var(--slate); }

@media (max-width: 640px) {
  table, tbody, tr, th, td { display: block; width: auto; }
  tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  th, td { border: 0; padding: 0; }
  td.n { margin: 2px 0 4px; }
}

/* tools */
.tools { display: grid; gap: 0; max-width: 820px; }
.tool { display: grid; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .tool { grid-template-columns: 14rem 1fr; } }
.tool b { font-family: var(--mono); font-weight: 500; font-size: 0.9375rem; }
.tool span { color: var(--slate); }

.brands { display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; margin: 0 0 12px; }

footer { border-top: 1px solid var(--line); padding: 40px 0 56px; color: var(--slate); font-size: 0.9375rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
footer a { text-underline-offset: 4px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 9; border-radius: 6px; }