/* instrument-sans-latin-ext-wght-normal */
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/assets/instrument-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* instrument-sans-latin-wght-normal */
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/assets/instrument-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* instrument-serif-latin-ext-400-normal */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/instrument-serif-latin-ext-400-normal.woff2) format('woff2'), url(/assets/instrument-serif-latin-ext-400-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* instrument-serif-latin-400-normal */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/instrument-serif-latin-400-normal.woff2) format('woff2'), url(/assets/instrument-serif-latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* instrument-serif-latin-ext-400-italic */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/instrument-serif-latin-ext-400-italic.woff2) format('woff2'), url(/assets/instrument-serif-latin-ext-400-italic.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* instrument-serif-latin-400-italic */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/instrument-serif-latin-400-italic.woff2) format('woff2'), url(/assets/instrument-serif-latin-400-italic.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* jetbrains-mono-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/jetbrains-mono-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/jetbrains-mono-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/jetbrains-mono-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/jetbrains-mono-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* jetbrains-mono-latin-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* The Code Specimen website: the home page and the privacy page share this file.
   Tokens use the same names as the extension and the design boards (--bg, --sf, --tx and
   so on), so a value can be traced from a board to this stylesheet with one search. The
   site follows the visitor's system theme, like the product, and has no theme switch. */

:root {
  --bg: #F6F6F3; --sf: #FFFFFF; --rs: #EFEFEB; --bd: #E2E1DC; --bd2: #CBCAC4;
  --tx: #18181A; --t2: #4F5057; --t3: #6A6B72;
  --ac: #3847D6; --acs: #ECEEFE; --on: #FFFFFF;
  --ok: #137237; --oks: #E7F5EC;
  --sh: 0 1px 2px rgba(20,20,30,.06), 0 8px 24px rgba(20,20,30,.08);
  --lift: 0 2px 4px rgba(20,20,30,.06), 0 24px 64px rgba(20,20,30,.14);
  /* The indigo bands (hero stage and final call to action). */
  --stage: #3847D6; --stage-tx: #FFFFFF; --stage-t2: #DADDFB; --stage-btn: #FFFFFF; --stage-btn-tx: #3847D6;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-ui: 'Instrument Sans Variable', 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
  --gutter: 72px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F0F11; --sf: #17171A; --rs: #212125; --bd: #2C2C31; --bd2: #3E3E45;
    --tx: #F2F2EF; --t2: #B9B9BF; --t3: #92929A;
    --ac: #8E9BFF; --acs: #23264A; --on: #0F0F11;
    --ok: #4ADE80; --oks: #14301F;
    --sh: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
    --lift: 0 2px 4px rgba(0,0,0,.4), 0 24px 64px rgba(0,0,0,.6);
    --stage: #262E86; --stage-tx: #FFFFFF; --stage-t2: #D3D7FA; --stage-btn: #F2F2EF; --stage-btn-tx: #262E86;
    color-scheme: dark;
  }
}
@media (max-width: 1100px) { :root { --gutter: 40px; } }
@media (max-width: 700px) { :root { --gutter: 20px; } }
@media (max-width: 360px) { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--tx);
  font: 400 17px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ac); }
a:hover { text-decoration: none; }
:focus-visible { outline: 3px solid var(--ac); outline-offset: 3px; border-radius: 4px; }
.band :focus-visible, .final :focus-visible { outline-color: var(--stage-tx); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--ac); color: var(--on); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.serif { font-family: var(--font-display); font-weight: 400; }
.mono { font-family: var(--font-mono); font-variant-ligatures: none; }
.cap { margin: 0; font-size: 13px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--ac); font-weight: 600; }
.lede { color: var(--t2); font-size: 19px; line-height: 1.6; margin: 0; }
.muted { color: var(--t2); }

/* Keycaps, as in the product. */
.kbd { font-family: var(--font-mono); font-size: 12px; line-height: 18px; padding: 1px 7px; border: 1px solid var(--bd2); border-bottom-width: 2px; border-radius: 5px; background: var(--sf); color: var(--tx); display: inline-block; white-space: nowrap; }
.keys { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.keys .sep { color: var(--t3); }

/* Buttons. Every tap target is at least 44px tall. */
.cta { min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--ac); color: var(--on); font: 600 16px/1.2 var(--font-ui); display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 18px rgba(56,71,214,.28); transition: transform .15s ease, box-shadow .15s ease; }
.cta:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 10px 24px rgba(56,71,214,.34); }
.cta-lg { min-height: 60px; padding: 0 30px; font-size: 18px; border-radius: 14px; }
.cta svg { flex-shrink: 0; }
.link-more { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.link-more:hover { text-decoration: underline; }
.trust { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: var(--tx); }
.trust svg { color: var(--ok); flex-shrink: 0; }

/* Which call to action a visitor sees. Phones and tablets cannot install Chrome
   extensions, so a touch-only device gets "Send to my computer" instead of the download.
   The script refines this with the browser's own mobile flag where it has one. */
/* These rules only ever hide, never set a display value, so each element keeps its own
   layout (a button stays a flex row) when it is shown. */
@media not ((hover: none) and (pointer: coarse)) { html:not(.is-mobile) .only-mobile { display: none !important; } }
@media (hover: none) and (pointer: coarse) { html:not(.is-desktop) .only-desktop { display: none !important; } }
html.is-mobile .only-desktop { display: none !important; }
html.is-desktop .only-mobile { display: none !important; }

/* Which store a button points to. Each call to action and install card comes in versions
   marked data-when (the zip, the Chrome Web Store, Firefox Add-ons, or a note that the
   Firefox version is coming), and site.ts unhides the ones that fit this visitor. Buttons
   set their own display, so a hidden version needs this rule to stay hidden. */
[data-when][hidden], [data-for][hidden], [data-browser][hidden] { display: none !important; }

/* Two browsers: a pair of buttons, the visitor's own browser solid and first, the other
   outlined beside it (site.ts decides which is which; without scripts Chrome leads). */
.cta-pair { display: flex; flex-wrap: wrap; gap: 12px; }
.cta--ghost { background: transparent; color: var(--ac); box-shadow: inset 0 0 0 2px var(--ac); }
.cta--ghost:hover { box-shadow: inset 0 0 0 2px var(--ac), 0 6px 18px rgba(56,71,214,.18); }
.header-cta { display: contents; }
/* A listing that is not live yet (Firefox while it is in review): always outlined and
   quieter than a real button, and never the solid one, since it installs nothing. */
.cta[data-soon], .cta[data-soon]:hover { background: transparent; color: var(--t2); box-shadow: inset 0 0 0 2px var(--bd2); transform: none; }
.final .cta[data-soon], .final .cta[data-soon]:hover { background: transparent; color: var(--stage-t2); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }

/* "In progress" beside the names of the tools that are still being built. */
.soon-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--rs); color: var(--t2); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .02em; vertical-align: middle; }

/* Header: transparent at the top, a surface with a hairline and shadow once scrolled. */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--bd); transition: background .2s ease, box-shadow .2s ease; }
.site-header.scrolled { background: var(--sf); box-shadow: var(--sh); }
.site-header .wrap { height: 76px; display: flex; align-items: center; gap: 40px; transition: height .2s ease; }
.site-header.scrolled .wrap { height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--tx); text-decoration: none; font-size: 19px; font-weight: 600; letter-spacing: -.01em; min-height: 44px; }
.brand svg { flex-shrink: 0; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 32px; font-size: 16px; font-weight: 500; }
.nav a { color: var(--t2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--tx); }
.site-header .cta { min-height: 44px; font-size: 15px; padding: 0 18px; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; padding: 0; border: 1px solid var(--bd); border-radius: 12px; background: var(--sf); color: var(--tx); align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 860px) {
  .nav, .site-header .cta { display: none !important; }
  .menu-btn { display: inline-flex; }
  .site-header .wrap { height: 64px; }
}

/* The mobile menu is a full-height sheet. */
.menu { position: fixed; inset: 0; z-index: 40; background: var(--sf); display: flex; flex-direction: column; }
.menu[hidden] { display: none; }
.menu__top { height: 64px; padding: 0 var(--gutter); display: flex; align-items: center; border-bottom: 1px solid var(--bd); }
.menu__top .menu-btn { display: inline-flex; background: var(--rs); border-color: transparent; }
.menu__links { list-style: none; margin: 0; padding: 8px var(--gutter); flex-grow: 1; overflow-y: auto; }
.menu__links a { display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid var(--bd); color: var(--tx); text-decoration: none; font-size: 21px; font-weight: 600; }
.menu__foot { padding: 20px var(--gutter) 28px; border-top: 1px solid var(--bd); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.menu__foot .cta { width: 100%; }
.menu__foot p { margin: 0; color: var(--t2); font-size: 15px; }

/* Footer. */
.site-footer { background: var(--sf); border-top: 1px solid var(--bd); padding: 64px 0 40px; }
.site-footer .cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); gap: 48px; }
.site-footer .about p { margin: 14px 0 0; color: var(--t2); font-size: 16px; max-width: 320px; }
.site-footer .about .trust { margin-top: 14px; font-size: 15px; }
.site-footer h2 { margin: 0 0 12px; font-size: 13px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--ac); font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 48px; }
.site-footer li a { color: var(--t2); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; font-size: 16px; }
.site-footer li a:hover { color: var(--tx); text-decoration: underline; }
.site-footer ul.one { grid-template-columns: minmax(0, max-content); }
.site-footer li a[aria-current="page"] { color: var(--tx); font-weight: 600; }
.site-footer .legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--bd); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; font-size: 14px; color: var(--t2); }
.site-footer .legal a { font-weight: 600; color: var(--tx); }
.site-footer .legal .tm { margin-left: auto; }
@media (max-width: 1100px) { .site-footer .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .site-footer .about { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .site-footer { padding: 48px 0 32px; }
  .site-footer .cols { grid-template-columns: 1fr; gap: 32px; }
  .site-footer ul { column-gap: 24px; }
  .site-footer .legal { flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-footer .legal .tm { margin-left: 0; }
}

/* The Specimen family: one card per tool, on the home page and on each tool's page. */
.family { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.family__card { background: var(--sf); border: 1px solid var(--bd); border-radius: 18px; padding: 24px 24px 20px; display: flex; flex-direction: column; }
.family__card h3 { margin: 14px 0 0; font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.family__card p { margin: 8px 0 0; color: var(--t2); font-size: 16px; }
.family__card .link-more, .family__here { margin-top: auto; padding-top: 12px; }
.family__here { color: var(--t3) !important; font-size: 15px !important; }
.family__status { align-self: flex-start; margin: 0 !important; padding: 3px 10px; border-radius: 999px; background: var(--rs); color: var(--t2) !important; font-size: 13px !important; font-weight: 600; }
.family__status--live { background: var(--oks); color: var(--ok) !important; }
@media (max-width: 960px) { .family { grid-template-columns: minmax(0, 1fr); } }