/* What the home and download pages share: colors, nav, footer, buttons and the download menu, the demo window. */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light;
  --bg: #f3f0e8;
  --paper: #fbfaf6;
  --fg: #1b1a17;
  --muted: #6f6b62;
  --line: #d9d3c5;
  --teal: #0f706a;
  --btn-bg: transparent;
  --btn-bg-hover: rgba(0, 0, 0, 0.04);
  --btn-border: rgba(27, 26, 23, 0.18);
  --btn-fg: var(--fg);
  --primary-bg: #1b1a17;
  --primary-bg-hover: #000;
  --primary-fg: #fbfaf6;
  --split: rgba(255, 255, 255, 0.18);
  --menu-bg: #fbfaf6;
  --menu-border: var(--line);
  --menu-hover: rgba(0, 0, 0, 0.05);
  --window-border: rgba(0, 0, 0, 0.12);
  --footer-bg: #ebe6da;
  --window-shadow: 0 50px 100px -30px rgba(40, 30, 10, 0.35), 0 20px 40px -20px rgba(40, 30, 10, 0.25);
  /* Surfaces over the paper (cards, menus) and under it (a sidebar, a lane), hovers and hairlines inside a window. */
  --raised: #fff;
  --well: #f1ede3;
  --wash: rgba(0, 0, 0, 0.05);
  --edge: rgba(0, 0, 0, 0.06);
  --rule: #ece7db;
  --line-strong: #bfb7a5;
  --faint: #a59f92;
  --bullet: #8a8478;
  --bar: #e9e4d7;
  --scroll: #cfc8b8;
  --teal-wash: #e3efe9;
  --teal-edge: #b9d8cf;
  --orange: #b5622a;
  --orange-wash: #f8e4d8;
  --violet: #6a52b5;
  --shade: 40, 30, 10;
}
/* Dark: the same warm paper, at night (the system's look, or the one picked: home/theme.js). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151411;
  --paper: #1d1c18;
  --fg: #ebe7dc;
  --muted: #a29c90;
  --line: #34312a;
  --teal: #46b3a6;
  --btn-bg-hover: rgba(255, 255, 255, 0.06);
  --btn-border: rgba(235, 231, 220, 0.2);
  --primary-bg: #ebe7dc;
  --primary-bg-hover: #fff;
  --primary-fg: #151411;
  --split: rgba(0, 0, 0, 0.18);
  --menu-bg: #24231e;
  --menu-hover: rgba(255, 255, 255, 0.06);
  --window-border: rgba(255, 255, 255, 0.1);
  --footer-bg: #1a1915;
  --window-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.7), 0 20px 40px -20px rgba(0, 0, 0, 0.5);
  --raised: #26241f;
  --well: #191814;
  --wash: rgba(255, 255, 255, 0.06);
  --edge: rgba(255, 255, 255, 0.07);
  --rule: #2b2924;
  --line-strong: #4d493f;
  --faint: #757064;
  --bullet: #7f796d;
  --bar: #23211d;
  --scroll: #3b382f;
  --teal-wash: rgba(70, 179, 166, 0.15);
  --teal-edge: rgba(70, 179, 166, 0.45);
  --orange: #e3925c;
  --orange-wash: rgba(227, 146, 92, 0.15);
  --violet: #a993f0;
  --shade: 0, 0, 0;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* A column the height of the window at least, so the footer sits at its bottom on a short page. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Thin scrollbars in the page's colours (the plugins' files, the setup command). */
* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--line-strong); }
.serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; }

nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: 0.9rem;
}
nav .brand { display: flex; align-items: center; gap: 0.5rem; font-family: "Instrument Serif", serif; font-size: 1.55rem; margin-right: auto; }
nav .brand img { width: 26px; }
nav a.link { color: var(--muted); }
nav a.link:hover { color: var(--fg); }
/* GitHub, Discord and X at the nav's end, as icons (assets/social.svg); they stay beside the phone menu's button. */
nav .social { display: flex; gap: 2px; margin: -6px -8px -6px -0.6rem; }
nav .social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); transition: color 0.15s, background 0.15s; }
nav .social a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
nav .social a:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
nav .social svg { width: 17px; height: 17px; }
/* Light or dark: the icon of the look it switches to. */
nav .social .theme { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; transition: color 0.15s, background 0.15s; }
nav .social .theme:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
nav .social .theme:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
nav .social .theme svg { width: 16px; height: 16px; }
:root[data-theme="dark"] .theme .moon, :root:not([data-theme="dark"]) .theme .sun { display: none; }
nav .social .x svg { width: 15px; height: 15px; }

/* The footer: a panel the window's width (its content the page's), the name and a way in (download, the demo), then
   every page in columns, the logo's crystal cut off in its corner. The same on every page. */
footer {
  position: relative;
  overflow: hidden;
  margin-top: 140px;
  padding: 88px max(24px, calc((100% - 1180px) / 2 + 24px)) 44px;
  background: var(--footer-bg);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}
/* (the body is a column: what's centred with a max-width would otherwise shrink to its content) */
body > :not(svg) { width: 100%; }
body > :has(+ footer) { flex-grow: 1; } /* (what's above the footer takes the room left) */
footer > :not(.mark) { position: relative; z-index: 1; }
footer .mark { position: absolute; z-index: 0; right: -40px; bottom: -130px; width: 400px; transform: rotate(-9deg); pointer-events: none; }
footer .name { display: inline-block; font-size: clamp(3.6rem, 8vw, 5.6rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--fg); }
footer .pitch p { max-width: 30rem; margin: 1rem 0 2rem; font-size: 1.08rem; line-height: 1.55; }
footer .pitch .cta { justify-content: flex-start; }
footer .pitch .arrow { width: 14px; height: 14px; transition: transform 0.2s; }
footer .pitch .button.primary:hover .arrow { transform: translateX(3px); }
footer .columns { display: grid; grid-template-columns: repeat(3, minmax(0, 12rem)); gap: 2.5rem; margin-top: 72px; }
footer .columns nav { all: unset; display: flex; flex-direction: column; align-items: flex-start; }
footer h2 { margin-bottom: 0.9rem; font-size: 0.92rem; font-weight: 600; color: var(--fg); }
footer .columns a { display: flex; align-items: center; gap: 0.55rem; width: fit-content; padding: 0.3rem 0; transition: color 0.15s; }
footer .columns svg { width: 15px; height: 15px; }
footer .columns .x svg { width: 13px; height: 13px; margin: 0 1px; }
footer a:hover, footer a[aria-current="page"] { color: var(--fg); }
footer a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
footer .credit { margin-top: 72px; font-size: 0.85rem; }
footer .heart { display: inline-block; width: 0.95em; height: 0.95em; vertical-align: -0.12em; color: var(--teal); }
@media (max-width: 760px) {
  footer { padding-top: 64px; }
  footer .columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; margin-top: 56px; }
  footer .mark { width: 240px; right: -70px; bottom: -90px; opacity: 0.6; }
  footer .credit { margin-top: 56px; }
}
@media (max-width: 760px) {
  nav a.link { display: none; }
  nav .social { margin-right: -0.6rem; }
}

/* The phone menu (home/menu.js): under 760px a two-line button opens the nav's links over the page. */
.menu-button, .sheet { display: none; }
@media (max-width: 760px) {
  .menu-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -10px -12px -10px 0;
    border: 0;
    background: none;
    color: var(--fg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-button .bars { position: relative; width: 18px; height: 8px; }
  .menu-button .bars::before, .menu-button .bars::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.25s ease;
  }
  .menu-button .bars::before { top: 0; }
  .menu-button .bars::after { bottom: 0; }
  .menu-button[aria-expanded="true"] .bars::before { transform: translateY(3.25px) rotate(45deg); }
  .menu-button[aria-expanded="true"] .bars::after { transform: translateY(-3.25px) rotate(-45deg); }

  /* Open: the bar stays at the top of the screen and the page behind doesn't scroll. */
  .menu-open { overflow: hidden; }
  .menu-open body > nav { position: fixed; top: 0; left: 0; right: 0; z-index: 31; background: var(--bg); }
  .sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    overflow-y: auto;
    padding: 8px 16px 40px;
    background: var(--bg);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .sheet[hidden] { display: none; }
  .sheet.open { opacity: 1; }
  .sheet nav { all: unset; display: flex; flex-direction: column; }
  .sheet a {
    padding: 8px 0;
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 2.4rem;
    line-height: 1.1;
    color: var(--fg);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: calc(var(--i) * 30ms + 40ms);
  }
  .sheet.open a { opacity: 1; transform: none; }
  .sheet a[aria-current="page"] { color: var(--teal); }
  .sheet a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet a, .menu-button .bars::before, .menu-button .bars::after { transition: none; }
}
img, svg { display: block; }
/* The agents' one-colour logos (black in their files) turn light on the dark page. */
:root[data-theme="dark"] img.mono { filter: invert(0.92); }
a { color: inherit; text-decoration: none; }

.icon { width: 16px; height: 16px; flex: none; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 1.15rem;
  border-radius: 12px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.button:hover { background: var(--btn-bg-hover); }
.button.primary { background: var(--primary-bg); color: var(--primary-fg); border-color: transparent; }
.button.primary:hover { background: var(--primary-bg-hover); }
.button.icon-only { width: 44px; padding: 0; }

.cta { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }

.download { display: inline-flex; position: relative; }
.download > .button { border-radius: 12px 0 0 12px; }
.download-more summary { list-style: none; border-radius: 0 12px 12px 0; width: 40px; padding: 0; border-left: 1px solid var(--split); }
.download-more summary::-webkit-details-marker { display: none; }
.download-more .menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 220px;
  z-index: 20;
  padding: 6px;
  border-radius: 14px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  text-align: left;
}
.download-more .menu a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 9px; font-size: 0.9rem; }
.download-more .menu a:hover { background: var(--menu-hover); }

/* The demo: the real app in a window. */
.window {
  border-radius: 14px;
  overflow: hidden;
  background: #1e1e1e;
  border: 1px solid var(--window-border);
  box-shadow: var(--window-shadow);
}
.window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: #262626;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #8a8a8a;
  font-size: 0.78rem;
}
.window-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.window-bar i:nth-child(2) { background: #febc2e; }
.window-bar i:nth-child(3) { background: #28c840; }
.window-bar span { flex: 1; text-align: center; margin-right: 52px; }
.window iframe { display: block; width: 100%; height: min(680px, 78vh); border: 0; background: #1e1e1e; }
/* A demo shown dark (a picker's data-theme="dark"): its bar goes dark with it. */
.window.dark, .window.dark iframe { background: #1a1b26; }
.window.dark .window-bar { background: #16161e; color: #787c99; border-bottom-color: rgba(255, 255, 255, 0.06); }

@media (max-width: 640px) {
  .window iframe { height: 560px; }
}