:root{--bg:#000;--fg:#f2f0ff;--dim:#9a97b8;--accent:#ffc22e;--accent2:#ff6a0f}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
a{color:var(--accent)}
.wrap{position:relative;max-width:760px;width:100%;margin:0 auto;padding:0 24px;flex:1;display:flex;flex-direction:column}
header.nav{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
header.nav a{color:var(--dim);text-decoration:none;margin-left:20px;font-size:15px}
header.nav a:hover{color:var(--fg)}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg)!important;font-weight:600;margin:0!important}
.brand img{width:28px;height:28px}
/* landing hero: exactly one screen tall, content centred both ways with flexbox; the footer is pinned to the bottom of that screen, out of the flow, so it cannot shift the centring */
.hero{text-align:center;flex:none;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 0}
.hero ~ footer{position:absolute;left:0;right:0;bottom:0;margin:0}
.hero{--w:min(520px,78vw)}
/* lockup proportions measured from the approved store art, W = wordmark width */
.hero .bh{display:block;width:calc(var(--w)*.533);height:calc(var(--w)*.533);margin:0 auto;--spd:.2}
.logo circle[style*="--end"]{animation:spin linear infinite;stroke-linecap:round}
@keyframes spin{to{stroke-dashoffset:var(--end)}}
@media (prefers-reduced-motion:reduce){.logo circle{animation:none!important}}
.hero .wm{display:block;width:calc(var(--w)*1.0136);height:auto;margin:calc(var(--w)*-.0503) auto 0;position:relative}
.hero h1{font-size:clamp(20px,3.4vw,28px);line-height:1.1;margin:26px 0 30px;font-weight:500;color:var(--dim)}
.hero p{color:var(--dim);font-size:19px;max-width:560px;margin:0 auto 28px}
.btn{display:inline-block;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#1a0b00;font-weight:600;padding:13px 26px;border-radius:999px;text-decoration:none}
.btn{transition:filter .18s ease}
.btn:hover,.btn:focus-visible{filter:brightness(1.3) saturate(1.1)}
.btn:active{filter:brightness(1.15)}
.btn:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.btn.off{opacity:.6;pointer-events:none}
.btn.store{line-height:1.2}
@supports (text-box:trim-both cap alphabetic){.btn.store{text-box:trim-both cap alphabetic;padding:21px 32px}}
section{padding:36px 0}
h2{font-size:26px;margin:0 0 14px}
footer{margin-top:auto;color:var(--dim);font-size:14px;padding:26px 0 28px;text-align:center}
.doc h1{font-size:34px;line-height:1.15;margin:22px 0 10px}
.doc h2{font-size:20px;line-height:1.25;margin:26px 0 6px}
.doc h3{font-size:17px;line-height:1.3;margin:20px 0 4px}
.doc p{margin:0 0 10px}

/* static star field + corner glows (from the extension welcome page) */
body { background-image:
  radial-gradient(ellipse 70% 55% at 6% 4%, rgba(86,52,190,.16) 0%, rgba(40,24,110,.08) 40%, transparent 72%),
  radial-gradient(ellipse 66% 50% at 94% 96%, rgba(20,100,170,.15) 0%, rgba(10,50,100,.08) 40%, transparent 72%),
  radial-gradient(1.2px 1.2px at 8% 12%, #fff, transparent), radial-gradient(1px 1px at 22% 35%, #cfd8ff, transparent), radial-gradient(1.4px 1.4px at 35% 8%, #fff, transparent),
  radial-gradient(1px 1px at 48% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 61% 44%, #ffe8c8, transparent), radial-gradient(1px 1px at 74% 15%, #fff, transparent),
  radial-gradient(1.4px 1.4px at 83% 38%, #cfd8ff, transparent), radial-gradient(1px 1px at 93% 26%, #fff, transparent), radial-gradient(1px 1px at 14% 62%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 29% 78%, #cfd8ff, transparent), radial-gradient(1px 1px at 44% 66%, #fff, transparent), radial-gradient(1.4px 1.4px at 57% 88%, #fff, transparent),
  radial-gradient(1px 1px at 70% 72%, #ffe8c8, transparent), radial-gradient(1.2px 1.2px at 86% 90%, #fff, transparent), radial-gradient(1px 1px at 96% 60%, #cfd8ff, transparent),
  radial-gradient(1px 1px at 4% 92%, #fff, transparent), radial-gradient(1px 1px at 52% 52%, #fff, transparent), radial-gradient(1.2px 1.2px at 18% 24%, #fff, transparent),
  radial-gradient(1.2px 1px at 51% 84%, #fff, transparent),
  radial-gradient(1px 1.4px at 13% 47%, #fff, transparent),
  radial-gradient(1px 1px at 12% 56%, #ffe8c8, transparent),
  radial-gradient(1px 1px at 12% 71%, #ffe8c8, transparent),
  radial-gradient(1px 1.4px at 16% 29%, #fff, transparent),
  radial-gradient(1.4px 1px at 29% 6%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 19% 70%, #fff, transparent),
  radial-gradient(1.2px 1.4px at 88% 24%, #fff, transparent),
  radial-gradient(1px 1.2px at 13% 71%, #fff, transparent),
  radial-gradient(1px 1.4px at 27% 64%, #ffe8c8, transparent),
  radial-gradient(1.2px 1.2px at 75% 59%, #cfd8ff, transparent),
  radial-gradient(1.2px 1px at 24% 90%, #fff, transparent),
  radial-gradient(1px 1.4px at 39% 68%, #ffe8c8, transparent),
  radial-gradient(1.2px 1.4px at 58% 37%, #fff, transparent),
  radial-gradient(1px 1.4px at 54% 22%, #cfd8ff, transparent),
  radial-gradient(1px 1.2px at 54% 6%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 89% 45%, #ffe8c8, transparent),
  radial-gradient(1.4px 1px at 12% 35%, #ffe8c8, transparent),
  radial-gradient(1px 1px at 94% 90%, #cfd8ff, transparent),
  radial-gradient(1.4px 1.2px at 92% 50%, #cfd8ff, transparent),
  radial-gradient(1px 1.2px at 46% 22%, #fff, transparent),
  radial-gradient(1.4px 1px at 28% 99%, #cfd8ff, transparent),
  radial-gradient(1px 1.4px at 32% 51%, #ffe8c8, transparent),
  radial-gradient(1.4px 1px at 22% 58%, #ffe8c8, transparent),
  radial-gradient(1.2px 1px at 56% 71%, #cfd8ff, transparent),
  radial-gradient(1.4px 1.2px at 88% 49%, #fff, transparent),
  radial-gradient(1px 1px at 23% 20%, #fff, transparent),
  radial-gradient(1px 1px at 63% 76%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 1% 19%, #ffe8c8, transparent),
  radial-gradient(1.2px 1.4px at 73% 41%, #fff, transparent),
  radial-gradient(1px 1.2px at 88% 72%, #ffe8c8, transparent),
  radial-gradient(1.4px 1.2px at 51% 14%, #ffe8c8, transparent),
  radial-gradient(1.4px 1px at 25% 9%, #fff, transparent),
  radial-gradient(1.4px 1px at 15% 44%, #fff, transparent),
  radial-gradient(1px 1px at 73% 20%, #fff, transparent),
  radial-gradient(1.2px 1.4px at 4% 10%, #fff, transparent),
  radial-gradient(1.4px 1px at 82% 33%, #cfd8ff, transparent),
  radial-gradient(1.2px 1.2px at 16% 15%, #ffe8c8, transparent),
  radial-gradient(1.4px 1.2px at 62% 40%, #fff, transparent),
  radial-gradient(1px 1px at 96% 44%, #cfd8ff, transparent),
  radial-gradient(1.4px 1.4px at 21% 67%, #fff, transparent),
  radial-gradient(1px 1.4px at 47% 19%, #fff, transparent),
  radial-gradient(1.2px 1.4px at 12% 90%, #cfd8ff, transparent),
  radial-gradient(1.2px 1px at 46% 99%, #fff, transparent),
  radial-gradient(1.2px 1.4px at 29% 79%, #fff, transparent),
  radial-gradient(1px 1.2px at 95% 30%, #fff, transparent),
  radial-gradient(1.4px 1.2px at 94% 4%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 34% 25%, #cfd8ff, transparent),
  radial-gradient(1.4px 1.4px at 45% 47%, #fff, transparent),
  radial-gradient(1px 1px at 30% 61%, #fff, transparent),
  radial-gradient(1.2px 1px at 62% 80%, #fff, transparent),
  radial-gradient(1.4px 1.4px at 45% 83%, #fff, transparent),
  radial-gradient(1px 1.2px at 92% 97%, #fff, transparent),
  radial-gradient(1.4px 1px at 56% 82%, #cfd8ff, transparent),
  radial-gradient(1px 1.4px at 51% 60%, #ffe8c8, transparent),
  radial-gradient(1px 1.4px at 21% 22%, #fff, transparent),
  radial-gradient(1px 1px at 76% 60%, #fff, transparent),
  radial-gradient(1.4px 1.4px at 45% 20%, #fff, transparent),
  radial-gradient(1px 1px at 93% 84%, #fff, transparent),
  radial-gradient(1px 1.2px at 25% 28%, #fff, transparent),
  radial-gradient(1.2px 1px at 38% 65%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 70% 54%, #fff, transparent),
  radial-gradient(1px 1.4px at 46% 59%, #ffe8c8, transparent),
  radial-gradient(1px 1.4px at 20% 68%, #fff, transparent),
  radial-gradient(1.4px 1px at 78% 1%, #fff, transparent),
  radial-gradient(1px 1px at 61% 80%, #fff, transparent),
  radial-gradient(1px 1.2px at 88% 67%, #ffe8c8, transparent),
  radial-gradient(1px 1.4px at 8% 32%, #fff, transparent),
  radial-gradient(1.2px 1px at 99% 13%, #ffe8c8, transparent),
  radial-gradient(1px 1px at 57% 42%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 66% 69%, #ffe8c8, transparent),
  radial-gradient(1px 1.4px at 67% 34%, #fff, transparent),
  radial-gradient(1.4px 1px at 54% 16%, #ffe8c8, transparent),
  radial-gradient(1.4px 1.2px at 10% 86%, #fff, transparent),
  radial-gradient(1.4px 1px at 28% 86%, #cfd8ff, transparent),
  radial-gradient(1px 1px at 92% 83%, #cfd8ff, transparent),
  radial-gradient(1px 1.2px at 18% 60%, #fff, transparent),
  radial-gradient(1px 1.2px at 63% 21%, #fff, transparent),
  radial-gradient(1px 1.4px at 56% 66%, #ffe8c8, transparent),
  radial-gradient(1.2px 1.2px at 26% 46%, #cfd8ff, transparent),
  radial-gradient(1px 1.4px at 47% 3%, #cfd8ff, transparent),
  radial-gradient(1.4px 1.2px at 91% 3%, #ffe8c8, transparent),
  radial-gradient(1.2px 1.4px at 80% 38%, #fff, transparent),
  radial-gradient(1px 1px at 14% 11%, #cfd8ff, transparent),
  radial-gradient(1.2px 1px at 24% 35%, #fff, transparent),
  radial-gradient(1.4px 1.4px at 34% 52%, #fff, transparent),
  radial-gradient(1.4px 1.4px at 42% 12%, #cfd8ff, transparent),
  radial-gradient(1px 1.4px at 24% 55%, #fff, transparent),
  radial-gradient(1.2px 1px at 82% 12%, #cfd8ff, transparent),
  radial-gradient(1px 1.4px at 29% 9%, #cfd8ff, transparent);
  background-attachment: fixed; }
body{background-attachment:fixed}

/* feedback form */
.fb{display:flex;flex-direction:column;gap:8px;max-width:560px;margin:6px 0 8px}
.fb label:first-child{margin-top:0}
.fb label{font-size:15px;color:var(--fg);margin-top:10px}
.fb label span{color:var(--dim)}
.fb textarea,.fb input[type=email]{width:100%;font:inherit;color:var(--fg);background:rgba(255,255,255,.04);border:1px solid #2a2745;border-radius:10px;padding:12px 14px;outline:none;resize:vertical}
.fb textarea::placeholder,.fb input::placeholder{color:#6f6c8e}
.fb textarea:focus,.fb input[type=email]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,194,46,.15)}
.fb .btn{align-self:flex-start;margin-top:14px;border:0;font:inherit;font-weight:600;cursor:pointer}
.fb .btn:disabled{opacity:.6;cursor:default}
.fb .trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#status{min-height:1.5em;margin:6px 0 0;font-size:15px;color:var(--dim)}
#status.ok{color:#8fe3a0}#status.err{color:#ff8a7a}

/* side-by-side lockup header (inner pages): planet box = 7 cells, gap = 2 cells, cell = wordmark height / 3 */
.top{padding:30px 0 6px;text-align:center}
.lockup{--H:min(26px,6.2vw);display:inline-flex;align-items:center;gap:calc(var(--H)*2/3);padding-left:calc(var(--H)*7/3*.225);text-decoration:none}
.lockup .mark{flex:none;display:block;width:calc(var(--H)*7/3);height:calc(var(--H)*7/3);transform:scale(1.45);overflow:visible;--spd:.2}
.lockup .wm{display:block;width:calc(var(--H)*10.218);height:auto}

/* browser windows funneled into the black hole (landing page): canvas behind the content */
canvas.floaters{position:fixed;left:0;top:0;z-index:0;pointer-events:none}
.wrap{position:relative;z-index:1}

/* Zen mode (toggle button + Z): the text, button and footer fade away; the animation stays exactly where it is */
.zen-btn{position:fixed;top:16px;right:16px;z-index:5;display:flex;align-items:center;gap:8px;height:38px;min-width:38px;padding:0 10px;border:1px solid rgba(154,151,184,.35);border-radius:19px;background:rgba(0,0,0,.35);color:var(--dim);font:inherit;font-size:13px;line-height:1;cursor:pointer;opacity:.6;transition:opacity .35s,color .2s,border-color .2s}
.zen-btn:hover,.zen-btn:focus-visible{opacity:1;color:var(--fg);border-color:rgba(242,240,255,.6)}
.zen-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.zen-tip{display:none;white-space:nowrap}
.hero .wm,.hero h1,.hero ~ footer{transition:opacity .6s ease,visibility 0s}
.hero .btn{transition:opacity .6s ease,visibility 0s,filter .18s ease}
html.zen .hero .wm,html.zen .hero h1,html.zen .hero .btn,html.zen .hero ~ footer{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s .6s}
html.zen .zen-btn{opacity:.8}
html.zen .zen-tip{display:inline}
html.zen.zen-idle .zen-btn{opacity:0;pointer-events:none}
html.zen.zen-idle{cursor:none}
@media (prefers-reduced-motion:reduce){.hero .wm,.hero h1,.hero .btn,.btn,.hero ~ footer,.zen-btn{transition:none!important}}