/* The website in the extension's steel look: gunmetal, a dot-grid mat, cyan accents, Saira Condensed
   headings over Chakra Petch (both bundled in /fonts under the SIL Open Font License). Always dark. */

@font-face { font-family: 'Chakra Petch'; font-weight: 400; font-display: swap; src: url('/fonts/chakra-petch-400.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap; src: url('/fonts/chakra-petch-600.woff2') format('woff2'); }
@font-face { font-family: 'Saira Condensed'; font-weight: 700; font-display: swap; src: url('/fonts/saira-condensed-700.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --mat: #0e1318;
  --dot: #1b252f;
  --dot-major: #2b3a48;
  --panel: #161d24;
  --line: #2c3946;
  --ink: #e9eff4;
  --ink-2: #9fb1c1;
  --ink-3: #66798b;
  --signal: #39d0ec;
  --signal-top: #9aeefc;
  --signal-ink: #04202a;
  --signal-lip: #157a8f;
  --font: 'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
  --display: 'Saira Condensed', var(--font);
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  background-color: var(--mat);
  background-image:
    radial-gradient(ellipse at 50% 30%, transparent 40%, rgb(0 0 0 / 0.45)),
    radial-gradient(circle, var(--dot-major) 1.1px, transparent 1.4px),
    radial-gradient(circle, var(--dot) 0.8px, transparent 1.05px);
  background-size: 100% 100%, 80px 80px, 16px 16px;
  background-attachment: fixed, scroll, scroll;
  color: var(--ink); font: 400 16px/1.65 var(--font);
}
a { color: var(--signal); text-underline-offset: 3px; }
a:hover { color: var(--signal-top); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

h1, h2 { font-family: var(--display); font-weight: 700; line-height: 1.15; }
h1 { margin: 0 0 12px; font-size: 34px; letter-spacing: 0.04em; text-transform: uppercase; }
h2 { margin: 32px 0 8px; font-size: 22px; letter-spacing: 0.02em; }
ul { padding-left: 1.2em; }
li { margin: 4px 0; }

.page { max-width: 880px; margin: 0 auto; padding: 56px 16px; }
.prose { max-width: 70ch; margin: 0 auto; padding: 48px 16px; }
.card {
  max-width: 560px; margin: 56px auto; padding: 28px 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 1px 0 rgb(57 208 236 / 0.25), 0 18px 40px -20px rgb(0 0 0 / 0.8);
}

.card h1 { font-size: 30px; letter-spacing: 0.02em; text-transform: none; } /* sentence-length headings */
.hero h1 { font-size: 44px; }
.lede { color: var(--ink-2); font-size: 18px; }
.eyebrow { margin: 0 0 8px; color: var(--ink-3); font: 700 14px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }

/* the one action on a page: a lit keycap */
.button {
  display: inline-block; margin-bottom: 4px; padding: 10px 18px; border: 0; border-radius: 8px;
  background: linear-gradient(180deg, var(--signal-top), var(--signal) 60%); color: var(--signal-ink);
  box-shadow: 0 4px 0 var(--signal-lip), 0 0 14px rgb(57 208 236 / 0.35);
  font: 700 16px/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.button:hover { color: var(--signal-ink); filter: brightness(1.06); }
.button:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--signal-lip); }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 40px 0; }
.features > div, .price { padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.features h2, .price h2 { margin-top: 0; }

textarea {
  width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #0c1115; color: var(--ink);
  font: 13px/1.4 ui-monospace, Menlo, monospace; word-break: break-all; resize: none;
}
.fine { margin-top: 36px; color: var(--ink-3); font-size: 13px; }
.fine a { color: var(--ink-2); }