/* madal landing: one centered screen, monospace, lots of room. */
@font-face {
  font-family: "Martian Mono";
  src: url("/s/cf48ec1eee8f/fonts/martian-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}
:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #6b6b6b;
  --faint: #e8e8e8;
  --soft: #f6f6f6;
  --seal: #e8411b;
  --mono: "Martian Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0c0c;
    --fg: #ededed;
    --muted: #8a8a8a;
    --faint: #262626;
    --soft: #151515;
    --seal: #ff6a3d;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 14px/1.65 var(--mono); }
a { color: inherit; }

/* The first screen */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 48px 16px; text-align: center;
}
.word { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -0.03em; }
.word .m { color: var(--seal); }
.hint { margin: -10px 0 0; font-size: 11.5px; color: var(--muted); letter-spacing: 0.02em; transition: opacity 600ms ease; }
.hint.gone { opacity: 0; }
.field { position: absolute; inset: 0; pointer-events: none; }
/* The content sits in front of the ciphertext. Each line gets a blur that
   reaches past it and feathers out; neighbouring lines' blurs merge into one
   zone that follows the content's outline. Everywhere else stays sharp. */
.front {
  position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; gap: 22px;
  max-width: 100%; padding: 32px 36px;
}
/* The blurs sit in .front's own layer, behind every line and box in it. */
.front > * { position: relative; }
.front > ::before {
  content: ""; position: absolute; inset: -22px -56px; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent),
    linear-gradient(transparent, #000 14px, #000 calc(100% - 14px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent),
    linear-gradient(transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-composite: intersect;
}
@media (max-width: 640px) { .front { padding: 24px 12px; } }
.tagline { margin: 0; color: var(--fg); font-size: 15px; line-height: 1.7; }
.agents { margin: -12px 0 0; color: var(--muted); font-size: 12.5px; }

.cmd {
  display: flex; align-items: stretch; max-width: min(100%, 720px);
  border: 1px solid var(--faint); border-radius: 8px; background: var(--soft);
}
.cmd code {
  padding: 11px 14px; font-size: 13.5px; white-space: nowrap; overflow-x: auto; text-align: left;
  scrollbar-width: none;
}
.cmd code::-webkit-scrollbar { display: none; }
.copy {
  font: 13px var(--mono); color: var(--muted); background: transparent; cursor: pointer;
  border: 0; border-left: 1px solid var(--faint); padding: 0 16px; min-width: 64px;
}
.copy:hover { color: var(--fg); }
.copy:focus-visible, .platforms a:focus-visible, .links a:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

.platforms { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.platforms a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--faint); border-radius: 8px; text-decoration: none; font-size: 13.5px;
}
.platforms a:hover { border-color: var(--muted); }
.platforms svg { width: 15px; height: 15px; fill: currentColor; }

.links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 13.5px; color: var(--muted); }
.links a { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 4px; color: var(--fg); }
.links a:hover { text-decoration-color: var(--fg); }

/* Below the fold */
.how { max-width: 640px; margin: 0 auto; padding: 24px 16px 96px; }
.how h2 { font-size: 15px; font-weight: 700; margin: 0 0 18px; }
.term {
  margin: 0 0 24px; padding: 18px 20px; border: 1px solid var(--faint); border-radius: 8px;
  background: var(--soft); font-size: 13.5px; line-height: 1.8; overflow-x: auto;
}
.dim { color: var(--muted); }
.hash { color: var(--fg); font-weight: 700; }
.key { color: var(--seal); font-weight: 700; }
/* Demo video */
.how.demo { max-width: 960px; padding-bottom: 32px; }
.film { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--faint); border-radius: 12px; background: #0c0c0c; overflow: hidden; color: var(--muted); }
.film iframe { width: 100%; height: 100%; border: 0; display: block; }
.demo .note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.demo .note a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
/* The player's controls show no focus ring; they have their own hover states. */
#demo-player button, #demo-player [role="button"], #demo-player input,
#demo-player button:focus-visible, #demo-player input:focus-visible { outline: none; }
/* Try it */
.try { padding-bottom: 32px; }
.lede { margin: -6px 0 22px; color: var(--muted); }
.step { display: flex; gap: 10px; align-items: baseline; margin: 20px 0 8px; font-size: 13px; color: var(--muted); }
.n { color: var(--seal); font-weight: 700; }
.box {
  display: block; width: 100%; margin: 0; padding: 12px 14px; border: 1px solid var(--faint); border-radius: 8px;
  background: var(--soft); color: var(--fg); font: 13px/1.6 var(--mono);
}
.try textarea { display: block; width: 100%; resize: vertical; padding: 12px 14px; border: 1px solid var(--faint); border-radius: 8px; background: var(--soft); color: var(--fg); font: 13.5px/1.6 var(--mono); }
.try textarea:focus, .try input:focus { outline: 2px solid var(--seal); outline-offset: 1px; }
.blob { white-space: pre-wrap; word-break: break-all; color: var(--muted); max-height: 9.6em; overflow: hidden; }
.try pre.box, .try a.box { white-space: pre-wrap; word-break: break-all; }
.try a.box { text-decoration: none; }
.try a.box:hover { border-color: var(--muted); }
.keyrow { display: flex; border: 1px solid var(--faint); border-radius: 8px; overflow: hidden; background: var(--soft); }
.keyrow .copy { white-space: nowrap; }
.keyrow input { border: 0; border-radius: 0; color: var(--seal); font-weight: 700; min-width: 0; }
.out { white-space: pre-wrap; min-height: 3.2em; }
.out.bad { color: var(--seal); }

/* Get started */
/* minmax(0, 1fr): a grid column otherwise grows to its widest line, and the
   commands don't wrap, so on a phone the page went sideways. */
.steps { margin: 0 0 40px; padding: 0; list-style: none; counter-reset: step; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.steps li { counter-increment: step; min-width: 0; }
.steps h3 { margin: 0 0 10px; font-size: 14px; display: flex; gap: 10px; }
.steps h3::before { content: counter(step); color: var(--seal); }
.steps p { margin: 10px 0 0; color: var(--muted); }
.steps .term { margin: 0; white-space: pre; }
.steps code { color: var(--fg); }
.steps .cmd { max-width: 100%; }
.steps .cmd code { flex: 1; min-width: 0; }
.you { color: var(--seal); }

.points { margin: 0; padding-left: 18px; display: grid; gap: 10px; color: var(--muted); }
.points b { color: var(--fg); }

@media (max-width: 640px) {
  .term { padding: 14px 14px; font-size: 12px; }
  .how { padding-bottom: 64px; }
}

.foot {
  max-width: 640px; margin: 0 auto; padding: 24px 16px 40px; border-top: 1px solid var(--faint);
  text-align: center; font-size: 12.5px; color: var(--muted);
}
.foot p { margin: 0; }
.foot .fine { margin-top: 6px; font-size: 11.5px; opacity: 0.75; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }