/* SilentList, from SilentKey-web's stylesheet.

   No web font, on purpose. A page about a password manager should have the
   narrowest possible Content-Security-Policy, and `font-src 'self'` means either
   hosting a font or having none. The system font is what people read all day on
   Apple and on Windows alike — and it saves two hundred kilobytes that would be
   downloaded from elsewhere. Hierarchy comes from size, weight and space, not
   from an exotic typeface. (The one exception is the 1.5 kB self-hosted subset for
   the zavrel.net badge in the footer — see there.) */

/* SilentList — one stylesheet for both language versions. The colors are SLDesign's tokens
   (SPEC 9): background, surface, text, separator and the indigo accent, light and dark. */

:root {
  color-scheme: light dark;

  --ground: #f5f5f3;
  --surface: #ffffff;
  --sunk: #ecedea;
  --ink: #17181b;
  --muted: #5b5f66;
  --faint: #7b7f86;
  --accent: #3346c8;
  --accent-ink: #ffffff;
  --accent-soft: rgba(51, 70, 200, 0.10);
  --tag: #2a3aa8;
  --tag-fill: #eceef9;
  --due: #b54708;
  --rule: rgba(23, 24, 27, 0.12);
  --rule-firm: rgba(23, 24, 27, 0.26);
  --shadow: 0 1px 2px rgba(23, 24, 27, .06), 0 12px 32px rgba(23, 24, 27, .07);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1080px;
  --text: 36rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #141518;
    --surface: #1c1d21;
    --sunk: #18191c;
    --ink: #ecedee;
    --muted: #9a9ea6;
    --faint: #7d818a;
    --accent: #a9b4ff;
    --accent-ink: #141518;
    --accent-soft: rgba(169, 180, 255, 0.12);
    --tag: #a9b4ff;
    --tag-fill: #262b47;
    --due: #ffb38a;
    --rule: rgba(236, 237, 238, 0.13);
    --rule-firm: rgba(236, 237, 238, 0.28);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .34);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

a { color: var(--accent); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a.visually-hidden:focus {
  position: fixed; top: 10px; left: 10px; width: auto; height: auto;
  clip: auto; padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--rule-firm); border-radius: 8px; z-index: 20;
}

/* ---------------------------------------------------------------- nav bar */

.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.is-stuck { border-bottom-color: var(--rule); }

.nav__inner { display: flex; align-items: center; gap: 18px; height: 62px; }

.nav__brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 16.5px; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.nav__brand svg { width: 26px; height: 26px; color: var(--accent); }
.nav__brand .nav__icon { width: 28px; height: 28px; display: block; }

.nav__links { display: flex; gap: 20px; margin-left: auto; }
.nav__links a {
  color: var(--muted); text-decoration: none; font-size: 15px;
}
.nav__links a:hover { color: var(--ink); }

.lang { display: flex; gap: 8px; align-items: center; font: 500 12px/1 var(--mono); }
.lang span { color: var(--ink); }
.lang a { color: var(--faint); text-decoration: none; }
.lang a:hover { color: var(--accent); }

@media (max-width: 820px) {
  .nav__links { display: none; }
  .lang { margin-left: auto; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 11px;
  font: 600 15.5px/1 var(--sans); text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }

.btn--ghost { border-color: var(--rule-firm); color: var(--ink); }
.btn--ghost:hover { background: var(--accent-soft); border-color: var(--accent); }

.btn--sm { padding: 8px 14px; font-size: 14px; border-radius: 9px; }

/* -------------------------------------------------------------------- hero */

.hero { padding: 84px 0 68px; }
.hero .wrap { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

.badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--rule-firm);
  font: 500 12.5px/1 var(--mono); color: var(--muted);
  letter-spacing: .01em;
}
.badge__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

h1 {
  margin: 0; max-width: 15ch;
  font: 700 clamp(38px, 6.4vw, 66px)/1.03 var(--sans);
  letter-spacing: -.032em; text-wrap: balance;
}

.lead { margin: 0; max-width: var(--text); font-size: 19.5px; color: var(--muted); }

.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.hero__note { margin: 0; font-size: 14px; color: var(--faint); max-width: var(--text); }

/* ---------------------------------------------------------------- section */

.section { padding: 68px 0; border-top: 1px solid var(--rule); }
.section--tint { background: var(--sunk); }

.section__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 34px; }
.eyebrow {
  margin: 0; font: 600 11.5px/1 var(--mono);
  letter-spacing: .17em; text-transform: uppercase; color: var(--accent);
}
h2 {
  margin: 0; max-width: 20ch;
  font: 700 clamp(27px, 3.6vw, 38px)/1.12 var(--sans);
  letter-spacing: -.024em; text-wrap: balance;
}
h3 { margin: 0; font: 600 17.5px/1.3 var(--sans); letter-spacing: -.01em; }
.section__head p { margin: 0; max-width: var(--text); color: var(--muted); font-size: 18px; }

/* -------------------------------------------------------------- two halves */

.halves { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 16px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.card__mark {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.card__mark svg { width: 19px; height: 19px; }

.plus {
  display: grid; place-items: center; font: 600 22px/1 var(--mono); color: var(--faint);
}

/* -------------------------------------------------------------------- grid */

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ------------------------------------------------------------------- figure */

.figure {
  border: 1px solid var(--rule); border-radius: 18px; background: var(--surface);
  padding: 26px; box-shadow: var(--shadow); overflow: hidden;
}
.figure svg { display: block; width: 100%; height: auto; }
.figure figcaption {
  margin: 16px 0 0; font-size: 14.5px; color: var(--faint); text-align: center;
}

.figure img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* Two screenshots side by side under the feature grid. */
.shots {
  display: grid; gap: 16px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
.figure--half { padding: 18px; }

/* -------------------------------------------------------------------- list */

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; color: var(--muted); font-size: 16.5px; }
.checks svg { width: 19px; height: 19px; color: var(--accent); flex: none; margin-top: 2px; }
.checks b { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------------- table */

.table { overflow-x: auto; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
th {
  font: 600 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: var(--sunk); white-space: nowrap;
}
td b { font-weight: 600; }
.tag {
  display: inline-block; font: 600 11.5px/1 var(--mono);
  padding: 5px 8px; border-radius: 5px; border: 1px solid var(--rule-firm); color: var(--muted);
  white-space: nowrap;
}
.tag--now { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ------------------------------------------------------------------ page text */

.prose { max-width: var(--text); display: flex; flex-direction: column; gap: 16px; }
.prose h2 { margin-top: 22px; }
.prose h3 { margin-top: 14px; }
.prose p, .prose li { color: var(--muted); }
.prose ul { margin: 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose code {
  font: 400 .9em var(--mono); background: var(--sunk);
  border: 1px solid var(--rule); border-radius: 5px; padding: 1px 5px;
}
.prose .updated { font: 500 13px/1 var(--mono); color: var(--faint); }

/* ------------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--rule); padding: 40px 0 56px; color: var(--faint); font-size: 14.5px; }
.foot .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot__spacer { margin-left: auto; }

/* ------------------------------------------------------- powered by zavrel.net */

/* The badge every one of Jan's sites carries at the right end of its footer, linking to
   the hub. Taken as it is from zavrel.net/docs/powered-by.md (the pill, approved
   11 October 2026): it inherits the footer's text color, so it fits light and dark as it
   is. Everything is scoped under .zv; the mark is inline SVG.

   The one font on the site, and it does not break the rule at the top: it is self-hosted
   (assets/fonts/, OFL), so `font-src 'self'` stays as narrow as it was, and it is only the
   nine glyphs of "zavrel.net" at weight 800 — 1.5 kB (tools/subset-zv-font.sh). Any other
   letter falls back to the system's bold. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-zavrelnet-800.woff2?v=02748ad5") format("woff2");
  unicode-range: U+002E, U+0061, U+0065, U+006C, U+006E, U+0072, U+0074, U+0076, U+007A; }

.zv { --zv-blue: #3f7cff; --zv-amber: #f0a020; --zv-coral: #e5533f;
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px;
  color: inherit; text-decoration: none; font-size: 12.5px; line-height: 1; white-space: nowrap;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent); background: color-mix(in srgb, currentColor 4%, transparent);
  transition: background .3s; }
.zv::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; opacity: 0; transition: opacity .35s;
  background: linear-gradient(90deg, var(--zv-blue), var(--zv-amber), var(--zv-coral));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.zv:hover::before, .zv:focus-visible::before { opacity: 1; }
.zv:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
.zv svg { flex: none; width: 20px; height: 20px; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.zv:hover svg { transform: rotate(-10deg) scale(1.08); }
.zv-by { opacity: .62; }
.zv-word { font: 800 13.5px/1 "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; letter-spacing: -.015em; }
.zv-word span { background: linear-gradient(90deg, var(--zv-blue), var(--zv-amber) 55%, var(--zv-coral)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zv:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .zv, .zv *, .zv::before { transition: none; } }
/* The footer's link color and its accent on hover would otherwise win over .zv — the badge
   takes the footer's text color, not its links'. */
.foot .zv, .foot .zv:hover { color: inherit; }

/* ------------------------------------------------------------------- reveal */

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------ SilentList */

code, kbd { font: 500 .88em/1.2 var(--mono); }
code { color: var(--tag); background: var(--tag-fill); border-radius: 5px; padding: 1px 5px; }
kbd {
  display: inline-block; min-width: 1.6em; text-align: center; padding: 2px 6px 1px;
  border: 1px solid var(--rule-firm); border-bottom-width: 2px; border-radius: 6px;
  background: var(--surface); color: var(--ink);
}

/* The iPad and the iPhone in their bezels, the phone overlapping the tablet's corner. */
.devices { margin: 0; position: relative; }
.devices .shot { display: block; height: auto; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .18)); }
.devices .shot--ipad { width: min(100%, 860px); }
.devices .shot--iphone { position: absolute; right: 0; bottom: 40px; width: min(31%, 270px); }
.devices figcaption { margin-top: 18px; font-size: 14.5px; color: var(--faint); }
@media (max-width: 640px) {
  .devices .shot--iphone { position: static; width: 62%; margin: -18% 0 0 auto; }
}

.syntax td:first-child { width: 36%; white-space: nowrap; }
@media (max-width: 640px) { .syntax td:first-child { white-space: normal; } }

/* The course */
.contents ol { margin: 0 0 28px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.contents a { text-decoration: none; font-size: 15px; }
.part { padding: 38px 0 8px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.lesson { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 20px 22px; margin-top: 10px; scroll-margin-top: 80px; }
.lesson h3 a { color: var(--ink); text-decoration: none; }
.lesson h3 a:hover { color: var(--accent); }
.lesson__n { font: 600 13px/1 var(--mono); color: var(--accent); margin-right: 6px; }
.steps { margin: 14px 0 0; padding-left: 1.3em; display: grid; gap: 14px; }
.steps li::marker { color: var(--faint); font: 600 14px var(--mono); }
.step { margin: 0; color: var(--muted); font-size: 16px; display: grid; grid-template-columns: 8.5em 1fr; gap: 10px; }
.step--keys { color: var(--ink); }
.step__how { font: 600 11.5px/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 640px) { .step { grid-template-columns: 1fr; gap: 2px; } }

/* The shortcuts */
.keymaps { columns: 2 340px; column-gap: 22px; }
.keymap { break-inside: avoid; margin: 0 0 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; }
.keymap h3 { margin-bottom: 8px; }
.keymap__mode { font: 500 11.5px var(--mono); color: var(--faint); margin-left: 6px; text-transform: uppercase; letter-spacing: .06em; }
.keymap table { font-size: 15px; }
.keymap td { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.keymap tr:last-child td { border-bottom: 0; }
.keymap .keys { text-align: right; white-space: nowrap; padding-left: 12px; }
.keymap kbd { font-size: 12.5px; }

.nav__links a[aria-current="page"] { color: var(--ink); }

@media print {
  .nav, .foot, .no-print, .section__head .eyebrow { display: none; }
  body { background: #fff; color: #000; font-size: 11px; }
  .section { padding: 0; border: 0; }
  .keymaps { columns: 3; column-gap: 12px; }
  .keymap { border: 0; padding: 0; margin-bottom: 10px; }
  .keymap td { padding: 2px 0; }
  kbd { border-width: 1px; padding: 0 4px; }
}