@font-face {
  font-family: "DM Sans";
  src: url(/fonts/DMSans-var.woff2) format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

/* Tokens copied from the app's Midnight Laboratory and Papiro themes. */
:root {
  --bg: #08080f;
  --bg2: #0b0b14;
  --key: #15151f;
  --key2: #1a1a26;
  --edge: #2c2c3c;
  --accent: #c9a84c;
  --text: #e9e4d6;
  --muted: #8f8a7a;
  --ok: #5cbf6a;
  --bad: #d0605a;
  --paper: #efe9dc;
  --ink: #3a352a;
  --paper-accent: #8a6d1f;
  --paper-muted: #5f5847; /* derived: 5.8:1 on paper */
  --paper-edge: #cdc3ab; /* derived */
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.55 "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Both languages live in the DOM; the root lang decides which one shows.
   data-keep marks Spanish that stays Spanish (the demo, quoted words). */
html[lang="es"] [lang="en"]:not([data-keep]),
html[lang="en"] [lang="es"]:not([data-keep]) { display: none; }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

a { color: inherit; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
section[id] { scroll-margin-top: 1rem; }

.wrap { max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}
.skip:focus { top: 1rem; }

.tag {
  display: inline-block;
  padding: 0.1em 0.55em;
  border: 1px solid currentColor;
  border-radius: 99px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  vertical-align: middle;
}

/* Header */
.top { display: flex; align-items: center; gap: 1rem; padding-block: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 650; text-decoration: none; }
.mark { width: 1.25rem; height: 1.25rem; fill: var(--accent); flex: none; }
.nav { display: none; margin-left: auto; gap: 2rem; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--text); text-decoration: underline; }
.langs { display: flex; gap: 0.25rem; margin-left: auto; }
.langs button {
  min-width: 2.75rem;
  height: 2.5rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.langs button:hover { color: var(--text); }
.langs [aria-pressed="true"] { background: var(--key2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }

/* Hero */
.hero { display: grid; gap: 3rem; padding-block: clamp(1.5rem, 5vw, 4.5rem) clamp(4rem, 9vw, 7rem); }
h1 {
  font-size: clamp(2.25rem, 1.1rem + 4.6vw, 4rem);
  font-weight: 750;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 span { display: block; }
.quiet { color: var(--muted); font-weight: 300; letter-spacing: -0.015em; }
.loud { margin-top: 0.12em; }
.lede { max-width: 34rem; margin-top: 1.5rem; font-size: 1.1875rem; line-height: 1.5; }

/* Download: state comes from release.json (see app.js) */
.dl { margin-top: 2rem; }
.pending .dl { visibility: hidden; }
html:not(.soon) .when-soon, .soon .when-ok { display: none; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0 1.5rem;
  border-radius: 12px;
  background: var(--accent);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.22);
  color: var(--bg);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 80ms, filter 80ms;
}
.btn svg { width: 1.25rem; height: 1.25rem; }
a.btn:hover { filter: brightness(1.08); }
a.btn:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.22); }
.btn.off { border: 1px dashed var(--muted); background: none; box-shadow: none; color: var(--text); }
.soon-note { max-width: 30rem; margin-top: 0.75rem; color: var(--muted); font-size: 0.9375rem; }
.facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin-top: 1rem; font-size: 0.9375rem; }
.facts div { display: flex; gap: 0.45rem; }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 500; }
.facts.full { display: grid; gap: 0.3rem; }
.facts .hash { display: grid; gap: 0; margin-top: 0.3rem; }
.hash code { font: 0.8125rem/1.5 ui-monospace, "Roboto Mono", monospace; overflow-wrap: anywhere; }

/* Keyboard demo. --k-* are the keyboard's own theme tokens. */
.demo {
  --k-bg: var(--bg2);
  --k-key: var(--key2);
  --k-fn: var(--key);
  --k-edge: var(--edge);
  --k-text: var(--text);
  --k-muted: var(--muted);
  --k-accent: var(--accent);
  --k-on-accent: var(--bg);
  --k-ring: 0px;
  min-width: 0;
}
/* Papiro, Noche de juego, Alto Contraste: bg, accent and text are the app's;
   key and edge shades are derived for this demo. */
.demo:has(#th-papiro:checked) {
  --k-bg: #efe9dc;
  --k-key: #f8f4ea;
  --k-fn: #e2dac8;
  --k-edge: #cdc3ab;
  --k-text: #3a352a;
  --k-muted: #5f5847;
  --k-accent: #8a6d1f;
  --k-on-accent: #f8f4ea;
}
.demo:has(#th-arcade:checked) {
  --k-bg: #07060e;
  --k-key: #16142a;
  --k-fn: #0f0d1e;
  --k-edge: #2a2748;
  --k-text: #e6f4f2;
  --k-muted: #8d8aa8;
  --k-accent: #3ee0cf;
  --k-on-accent: #07060e;
}
.demo:has(#th-hc:checked) {
  --k-bg: #000;
  --k-key: #000;
  --k-fn: #000;
  --k-edge: #fff;
  --k-text: #fff;
  --k-muted: #fff;
  --k-accent: #ffd60a;
  --k-on-accent: #000;
  --k-ring: 1.5px;
}
.demo label[for] { display: block; margin-bottom: 0.5rem; color: var(--muted); font-size: 0.9375rem; }
.demo q { color: var(--text); }
.demo input[type="text"] {
  width: 100%;
  height: 3.25rem;
  padding: 0 1rem;
  border: 1px solid var(--muted);
  border-radius: 12px;
  background: var(--bg2);
  color: var(--text);
  caret-color: var(--accent);
  font: inherit;
  font-size: 1.125rem;
}
.fix { min-height: 1.5rem; margin-block: 0.4rem 0.6rem; color: var(--muted); font-size: 0.9375rem; }
.fix del { color: var(--bad); }
.fix ins { color: var(--ok); font-weight: 600; text-decoration: none; }

.kb {
  margin-inline: calc(var(--gutter) * -1);
  padding: 6px;
  border-block: 1px solid var(--k-edge);
  background: var(--k-bg);
  color: var(--k-text);
  transition: background-color 0.2s;
}
.sug { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 2.75rem; margin-bottom: 6px; }
.sug button {
  grid-row: 1;
  overflow: hidden;
  padding: 0 0.5rem;
  border: 0;
  background: none;
  color: var(--k-muted);
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.sug button:nth-of-type(1) { grid-column: 1; }
.sug button:nth-of-type(2) { grid-column: 2; border-inline: 1px solid var(--k-edge); color: var(--k-text); font-weight: 650; }
.sug button:nth-of-type(3) { grid-column: 3; }
.sug button:focus-visible { outline-color: var(--k-accent); outline-offset: -3px; }
.keys { display: grid; gap: 6px; }
.row { display: flex; gap: 5px; }
.row button {
  display: grid;
  flex: 1 1 0;
  place-items: center;
  min-width: 0;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--k-key);
  box-shadow: inset 0 0 0 var(--k-ring) var(--k-edge), inset 0 -1px 0 var(--k-edge);
  color: var(--k-text);
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s;
}
.row svg { width: 1.375rem; height: 1.375rem; }
.row .fn { background: var(--k-fn); }
.row .fn svg { color: var(--k-muted); }
.row [aria-pressed="true"] svg { color: inherit; }
.row .w15 { flex-grow: 1.5; }
.row .w2 { flex-grow: 2; }
.row .space { flex-grow: 5; }
.row .go { background: var(--k-accent); color: var(--k-on-accent); }
.row button:active, .row [aria-pressed="true"] { background: var(--k-accent); color: var(--k-on-accent); transition: none; }
.kb.shift .row button { text-transform: uppercase; }

.themes { min-width: 0; margin-top: 1.25rem; padding: 0; border: 0; }
.themes legend { margin-bottom: 0.5rem; padding: 0; color: var(--muted); font-size: 0.9375rem; }
.themes label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  margin: 0 0.35rem 0.5rem 0;
  padding: 0 0.85rem 0 0.6rem;
  border: 1px solid var(--edge);
  border-radius: 99px;
  color: var(--muted);
  font-size: 0.9375rem;
  cursor: pointer;
}
.themes input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.themes label:has(:checked) { border-color: var(--accent); color: var(--text); }
.themes label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.sw { width: 1.125rem; height: 1.125rem; border: 1px solid var(--muted); border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); }
.th-midnight { --a: #0b0b14; --b: #c9a84c; }
.th-papiro { --a: #efe9dc; --b: #8a6d1f; }
.th-arcade { --a: #07060e; --b: #3ee0cf; }
.th-hc { --a: #000; --b: #ffd60a; }
.caption { margin-top: 0.5rem; color: var(--muted); font-size: 0.875rem; }

/* Features */
.features { padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 10vw, 8rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); font-weight: 650; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
h3, .spec dt { font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.spec { margin-top: clamp(2rem, 5vw, 3.5rem); }
.spec div { display: grid; gap: 0.35rem; padding-block: 1.4rem; border-top: 1px solid var(--edge); }
.spec dd { max-width: 38rem; }
.spec .tag { margin-left: 0.4rem; }

/* Privacy: the pledge, set on Papiro */
.privacy { padding-block: clamp(4.5rem, 11vw, 9rem); background: var(--paper); color: var(--ink); }
.privacy h2 { color: var(--paper-muted); font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); font-weight: 500; letter-spacing: -0.01em; }
.nots {
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
  font-size: clamp(1.75rem, 10vw, 7.5rem);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -0.04em;
}
.nots li + li { margin-top: 0.08em; }
.nots span { background: linear-gradient(var(--paper-accent), var(--paper-accent)) no-repeat 0 56% / 100% 0.085em; }
/* Paint the glyphs as a background layer so the strike can sit on top of them. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .nots span {
    background-image: linear-gradient(var(--paper-accent), var(--paper-accent)), linear-gradient(var(--ink), var(--ink));
    background-size: 100% 0.085em, 100% 100%;
    -webkit-background-clip: border-box, text;
    background-clip: border-box, text;
    color: transparent;
  }
  .nots span::selection { background: var(--ink); color: var(--paper); }
}
.pledge {
  max-width: 22ch;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.reasons { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--paper-edge); }
.reasons p { margin-top: 0.5rem; }

/* Install */
.install { display: grid; gap: 2rem; padding-block: clamp(4rem, 10vw, 8rem); }
.install-head p { max-width: 28rem; margin-top: 1rem; }
.steps { min-width: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 1.4rem 0 1.4rem 4rem; border-top: 1px solid var(--edge); counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 1.3rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 8px;
  background: var(--key2);
  box-shadow: inset 0 -2px 0 var(--edge);
  font-size: 1.125rem;
  font-weight: 600;
}
.steps p { max-width: 36rem; margin-top: 0.35rem; }
.steps .dl { margin-top: 1rem; }
.install-note { color: var(--muted); font-size: 0.9375rem; }

.foot { display: grid; gap: 0.5rem; padding-block: 2.5rem 3.5rem; border-top: 1px solid var(--edge); color: var(--muted); font-size: 0.9375rem; }
p, dd { text-wrap: pretty; }
.foot .brand { color: var(--text); margin-bottom: 0.5rem; }
.foot p { max-width: 40rem; }

/* 404 */
.lost { display: grid; gap: 1.25rem; justify-items: start; padding-block: clamp(2rem, 10vw, 7rem); }
.lost p { max-width: 34rem; }

@media (min-width: 35rem) {
  .kb { margin-inline: 0; padding: 8px; border: 1px solid var(--k-edge); border-radius: 16px; }
  .row button { height: 3.25rem; }
  .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
}
@media (min-width: 48rem) {
  .nav { display: flex; }
  .langs { margin-left: 1rem; }
  .spec div { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
}
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr) 27.5rem; gap: clamp(3rem, 7vw, 7rem); align-items: center; }
  .install { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem 4rem; }
  .install-head { position: sticky; top: 2rem; align-self: start; }
  .install-note { grid-column: 2; padding-left: 4rem; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* The one flourish: each "no" is struck through as you scroll to it. */
  @supports (animation-timeline: view()) {
    .nots span { animation: strike linear both; animation-timeline: view(); animation-range: cover 12% cover 42%; }
    @keyframes strike { from { background-size: 0% 0.085em, 100% 100%; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}