:root {
  --bg: #fbf8ff;
  --surface: #ffffff;
  --surface-2: #f0ecf7;
  --line: #e2dcec;
  --ink: #1c1b22;
  --ink-2: #49454f;
  --ink-3: #6e6878;
  --accent: #5b3fd9;
  --accent-ink: #ffffff;
  --link: #4c32c4;
  --grad: linear-gradient(120deg, #4338ca 0%, #7c3aed 50%, #db2777 100%);
  /* The brand beam (the icon's background, scripts/store_graphics.sh): a near-black base, a band
     tilted 12° whose edge sits 80% up the gradient line, a deep red glow under the edge, a thin
     violet-blue line on it, cyan then white above; a red sweep screened along it, left to right. */
  --beam-angle: 12deg;
  --beam-edge: 80%;
  --beam: linear-gradient(var(--beam-angle), #000 calc(var(--beam-edge) - 230px), #400000 calc(var(--beam-edge) - 4px), #421aff calc(var(--beam-edge) + 4px), #59ffff calc(var(--beam-edge) + 40px), #fff calc(var(--beam-edge) + 305px));
  --beam-sweep: linear-gradient(90deg, #000, #990000);
  --radius: 18px;
  --shadow: 0 1px 2px rgba(28, 27, 34, .06), 0 8px 24px rgba(28, 27, 34, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131218;
    --surface: #1c1b22;
    --surface-2: #25232d;
    --line: #34313d;
    --ink: #e6e1ea;
    --ink-2: #c9c4d0;
    --ink-3: #9a94a3;
    --accent: #c8bfff;
    --accent-ink: #2b1680;
    --link: #c8bfff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131218; --surface: #1c1b22; --surface-2: #25232d; --line: #34313d;
  --ink: #e6e1ea; --ink-2: #c9c4d0; --ink-3: #9a94a3;
  --accent: #c8bfff; --accent-ink: #2b1680; --link: #c8bfff; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 2px; }

/* Header and footer */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px max(16px, calc((100% - 1080px) / 2));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); text-decoration: none; }
.brand img { border-radius: 8px; }
.top nav { display: flex; gap: 18px; flex-wrap: wrap; }
.top nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.top nav a:hover { color: var(--ink); }
.top nav { align-items: center; }
/* The coffee link: a small warm pill, visible without shouting; on a phone only the cup. */
.top nav a.coffee { padding: 4px 12px; border-radius: 999px; background: #ffe2a8; color: #4a2c00; font-weight: 600; font-size: 14px; }
.top nav a.coffee:hover { background: #ffd47f; color: #4a2c00; }
:root[data-theme="dark"] .top nav a.coffee { background: #4a3410; color: #ffdf9e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .top nav a.coffee { background: #4a3410; color: #ffdf9e; } }
@media (max-width: 480px) { .top nav a.coffee .long { display: none; } }
/* The menu button (three bars) and the drawer with every page, from the right. */
.top .menu { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.top .menu span { display: block; height: 2px; border-radius: 2px; background: var(--ink); }
.top .menu:hover { border-color: var(--ink-3); }
.drawer { position: fixed; inset: 0; z-index: 20; background: rgba(28, 27, 34, .35); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 90vw); display: flex; flex-direction: column; background: var(--surface); box-shadow: -8px 0 24px rgba(28, 27, 34, .12); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--ink); }
.drawer-head .close { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--ink-2); cursor: pointer; padding: 0 4px; }
.drawer-nav { flex: 1; overflow-y: auto; padding: 6px 18px 24px; }
.drawer-nav h4 { margin: 18px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.drawer-nav a { display: block; padding: 7px 0; color: var(--ink); text-decoration: none; font-size: 15px; border-bottom: 1px solid var(--surface-2); }
.drawer-nav a:hover { color: var(--link); }
body.drawer-open { overflow: hidden; }
/* On a phone the bar keeps one row: the text links live in the drawer, the cup and the menu stay. */
@media (max-width: 560px) { .top nav { flex-wrap: nowrap; } .top nav > a:not(.coffee) { display: none; } }
/* The rename notice, once at the top of the hero, now a quiet note at the end of Get started. */
.renamed-note { max-width: 70ch; margin: 22px 0 0; padding: 12px 16px; font-size: 14px; color: var(--ink-2); background: var(--surface-2); border-radius: 12px; }
.stage { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; background: #c8e6ff; color: #003258; vertical-align: middle; }
.foot p.support { margin-bottom: 10px; color: var(--ink-2); }
.foot { border-top: 1px solid var(--line); margin-top: 64px; padding: 28px 16px 40px; text-align: center; color: var(--ink-3); font-size: 14px; }
.foot div { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.foot a { color: var(--ink-2); }
.foot p { max-width: 640px; margin: 0 auto; }

/* Markdown pages */
.prose { max-width: 760px; margin: 0 auto; padding: 32px 16px; overflow-wrap: anywhere; }
.prose h1 { font-size: clamp(28px, 5vw, 38px); line-height: 1.2; margin: 8px 0 20px; }
.prose h2 { font-size: 22px; margin: 36px 0 10px; }
.prose h3 { font-size: 18px; margin: 28px 0 8px; }
.prose code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: .92em; }
.prose pre { background: var(--surface-2); padding: 14px; border-radius: 12px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; margin: 16px 0; font-size: 15px; overflow-wrap: normal; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--surface-2); }
.prose img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.prose blockquote { margin: 16px 0; padding: 4px 16px; border-left: 3px solid var(--accent); color: var(--ink-2); }
.prose li { margin: 4px 0; }

/* Landing page */
.home { padding: 0; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.hero { background: var(--beam-sweep), var(--beam) #000; background-blend-mode: screen, normal; color: #fff; }
.hero .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.hero h1 { font-size: clamp(36px, 7vw, 60px); line-height: 1.05; margin: 0 0 14px; letter-spacing: -.02em; }
.hero p.lead { font-size: clamp(17px, 2.4vw, 21px); margin: 0 0 8px; }
.hero p.sub { margin: 0 0 26px; }
/* The rename notice may land on the bright part of the beam on a phone: a dark panel keeps it readable anywhere. */
.hero .renamed { display: block; width: fit-content; max-width: 52ch; margin: 0 0 22px; padding: 10px 14px; font-size: 14px; line-height: 1.45; background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.28); border-radius: 12px; }
/* The icon's glass tile: white at 18 % with a faint lighter inner edge, corners at 0.24 of the side, the mark at 0.8. */
.hero .tile { width: 72px; height: 72px; border-radius: 17px; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 6px 20px rgba(0,0,0,.25); display: grid; place-items: center; margin-bottom: 18px; }
.hero .tile img { width: 58px; height: 58px; display: block; }
.get { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.get img { height: 58px; width: auto; display: block; }
.get .apk {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px; margin-left: 4px;
  border: 1.5px solid rgba(255,255,255,.75); border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600;
}
.get .apk:hover { background: rgba(255,255,255,.12); }
.get .apk.plugin { border-style: dashed; }
.playnote { margin-top: 14px; font-size: .95rem; opacity: .9; }
.get.also { margin-top: 12px; }
.playnote a { color: inherit; text-decoration: underline; }
.phone {
  justify-self: center; width: 250px; padding: 10px; border-radius: 34px;
  background: #0d0c12; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.phone img { display: block; width: 100%; border-radius: 24px; }

.section { padding: 56px 0 8px; }
.section h2 { font-size: clamp(24px, 4vw, 32px); margin: 0 0 8px; letter-spacing: -.01em; }
.section p.intro { color: var(--ink-2); margin: 0 0 24px; max-width: 680px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 6px; font-size: 17px; }
.card p { margin: 0; color: var(--ink-2); font-size: 15px; }
.card .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 12px; background: var(--surface-2); color: var(--accent); }
.card .ico svg { width: 20px; height: 20px; }

.shots { margin-top: 8px; }
.shots img { display: block; width: 100%; }

.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 15px; }
.compare th, .compare td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.compare tr:last-child td { border-bottom: 0; }
.compare thead th { background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.compare td:nth-child(2) { font-weight: 600; }
.table-scroll { overflow-x: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.chip small { color: var(--ink-3); margin-left: 4px; }
.group { margin-bottom: 16px; }
.group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 8px; }

.data { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; color: var(--ink-2); }
.data p { margin: 0 0 10px; }
.data p:last-child { margin: 0; }
.button-dl { display: inline-block; padding: 10px 20px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.server .get { gap: 16px; margin: 0; }
.server pre { margin: 0 0 14px; padding: 14px; border-radius: 12px; background: var(--surface-2); color: var(--ink); overflow-x: auto; font-size: .9rem; }

@media (max-width: 860px) {
  /* One column: the band's edge near the top, crossing the tile as it crosses the icon's, so the
     heading and the text below it sit on the dark side of the beam at any phone width. */
  :root { --beam-edge: calc(100% - 150px); }
  .hero h1, .hero p { text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
  .hero .wrap { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 40px; }
  .phone { width: 220px; }
  .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .top nav { gap: 12px; }
  .get img { height: 50px; }
}

/* On a phone the six screenshots scroll sideways instead of shrinking to stamps. */
@media (max-width: 700px) {
  .shots .wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .shots img { width: 900px; max-width: none; }
}

/* VirusTotal results (guide/security) and the home page's line about them. */
.vt-card { margin: 18px 0; padding: 4px 18px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.vt-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vt-scroll table { margin-top: 8px; }
.vt-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.vt-pill.ok { background: #d8f5e3; color: #135c33; }
.trust { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600; text-decoration: none; background: rgba(255,255,255,.14); color: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.trust:hover { background: rgba(255,255,255,.22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vt-pill.ok { background: #1d3b2a; color: #9ce6b8; } }
:root[data-theme="dark"] .vt-pill.ok { background: #1d3b2a; color: #9ce6b8; }