@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@800&display=swap");
/* Aurora glass theme. Loaded last. */

/* ── Full-width layout ── */
:root { --page: 100vw; --gutter: clamp(20px, 5vw, 96px); }
.wrap { max-width: none; }
.closing .give { max-width: none; }

/* ── Home hero ── */
.hero h1 {
  font: 800 clamp(60px, 9.4vw, 164px)/.94 "Plus Jakarta Sans", var(--display); letter-spacing: -.055em;
  background: linear-gradient(95deg, #fff 15%, #d5f3ff 50%, #7ee8f0 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em;
}
.hero h1 .soft { color: inherit; }
:root[data-theme="light"] .hero h1 { background-image: linear-gradient(95deg, #0b0c12 20%, #0b4a6e 60%, #0891b2 90%); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero h1 { background-image: linear-gradient(95deg, #0b0c12 20%, #0b4a6e 60%, #0891b2 90%); }
}
.hero .lede { max-width: 760px; font-size: clamp(19px, 1.55vw, 22px); line-height: 1.6; }
.hero .cta { margin-top: 44px; }
.hero .cta .btn-lg { height: 60px; padding: 0 34px; font-size: 17px; font-weight: 600; }
.hero .cta .btn-lg svg { width: 19px; height: 19px; }

:root {
  --bg: #000; --bg-2: rgba(255, 255, 255, .025);
  --surface: rgba(255, 255, 255, .05); --surface-2: rgba(255, 255, 255, .085); --surface-3: rgba(255, 255, 255, .12);
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .12);
  --inset: rgba(255, 255, 255, .055);
  --edge: rgba(255, 255, 255, .09);
  --glass-shadow: 0 30px 80px -34px rgba(0, 0, 0, .75);
  --blur: blur(24px) saturate(1.5);
  --a1: #16b8e6; --a2: #3d5bff; --a3: #ff4fa8; --a4: #ffae2c; --ao: .42;
  --thumb: rgba(255, 255, 255, .16); --thumb-2: rgba(255, 255, 255, .3);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f5f2; --bg-2: rgba(255, 255, 255, .4);
    --surface: rgba(255, 255, 255, .56); --surface-2: rgba(255, 255, 255, .76); --surface-3: rgba(255, 255, 255, .9);
    --line: rgba(31, 29, 26, .08); --line-2: rgba(31, 29, 26, .13);
    --inset: rgba(31, 29, 26, .05);
    --edge: rgba(255, 255, 255, .95);
    --glass-shadow: 0 24px 60px -32px rgba(60, 50, 30, .22);
    --a1: #7fdcff; --a2: #9db0ff; --a3: #ffb3d6; --a4: #ffd59a; --ao: .55;
  --thumb: rgba(31, 29, 26, .18); --thumb-2: rgba(31, 29, 26, .32);
  }
}
:root[data-theme="light"] {
  --bg: #f6f5f2; --bg-2: rgba(255, 255, 255, .4);
  --surface: rgba(255, 255, 255, .56); --surface-2: rgba(255, 255, 255, .76); --surface-3: rgba(255, 255, 255, .9);
  --line: rgba(31, 29, 26, .08); --line-2: rgba(31, 29, 26, .13);
  --inset: rgba(31, 29, 26, .05);
  --edge: rgba(255, 255, 255, .95);
  --glass-shadow: 0 24px 60px -32px rgba(60, 50, 30, .22);
  --a1: #7fdcff; --a2: #9db0ff; --a3: #ffb3d6; --a4: #ffd59a; --ao: .55;
  --thumb: rgba(31, 29, 26, .18); --thumb-2: rgba(31, 29, 26, .32);
}

/* ── Aurora ── */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(140px); opacity: var(--ao); will-change: transform; transform: translateZ(0); }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; min-width: 420px; min-height: 420px; background: var(--a1); left: -12vw; top: -18vw; animation: hz-drift1 26s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 40vw; height: 40vw; min-width: 380px; min-height: 380px; background: var(--a2); right: -10vw; top: 8vh; opacity: calc(var(--ao) * .8); animation: hz-drift2 30s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 36vw; height: 36vw; min-width: 340px; min-height: 340px; background: var(--a3); left: 34vw; bottom: -22vw; opacity: calc(var(--ao) * .7); animation: hz-drift3 34s ease-in-out infinite alternate; }
.aurora i:nth-child(4) { width: 22vw; height: 22vw; min-width: 240px; min-height: 240px; background: var(--a4); right: 12vw; bottom: -6vw; opacity: calc(var(--ao) * .45); animation: hz-drift2 38s ease-in-out infinite alternate-reverse; }
@keyframes hz-drift1 { to { transform: translate3d(8vw, 6vh, 0) scale(1.08); } }
@keyframes hz-drift2 { to { transform: translate3d(-6vw, 10vh, 0) scale(.94); } }
@keyframes hz-drift3 { to { transform: translate3d(-10vw, -8vh, 0) scale(1.1); } }
.aurora.paused i { animation-play-state: paused; }

/* ── Scrollbar ── */
html { scrollbar-width: thin; scrollbar-color: var(--thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--thumb); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--thumb-2); }

/* ── Frosted bars ── */
.nav { background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.nav.scrolled { background: color-mix(in srgb, var(--bg) 68%, transparent); box-shadow: inset 0 -1px 0 var(--edge); }
.mobile-menu.open { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
footer { background: var(--bg-2); box-shadow: inset 0 1px 0 var(--edge); }


/* ── Glass cards ──
   Cards, chips and the footer sit over nothing but the aurora, which is already blurred, so
   they skip their own backdrop blur on every screen. With the aurora drifting behind them, a
   blur on each one was redone every frame. Only bars and controls that cover page content or
   images keep it. */
.tile, .way, .privacy .left, .privacy li, .numbers > *, .verify, .panel, .steps li, .device,
details.q, .faq-still, .faq-empty, .give a, .help-grid > *, .promise, .next-up a, .f-panel {
  box-shadow: inset 0 0 0 1px var(--edge), var(--glass-shadow);
}
.pill, .btn-ghost, .search-btn, .gallery-nav button, .viewer button, .toc-mobile select, .faq-search input {
  box-shadow: inset 0 0 0 1px var(--edge);
}
.gallery-nav button, .viewer button { backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.pill { border-color: transparent; }
.faq-search input:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.f-panel { background: color-mix(in srgb, var(--bg) 70%, transparent); }

/* Chips and rows inside cards */
.mini, .share div:not(.on), .chips span:not(.on), .opt:not(.on), .kinds span:not(.on), .steps-mini i,
.fingerprint code, .copy-btn, .langs span, .credits li, .search-btn kbd { background: var(--inset); }

/* A touch firmer fill on every screen, standing in for the blur the cards no longer take. */
:root { --surface: rgba(255, 255, 255, .06); }
:root[data-theme="light"] { --surface: rgba(255, 255, 255, .64); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --surface: rgba(255, 255, 255, .64); }
}
@media (max-width: 1260px) and (min-width: 1081px), (max-width: 640px) {
  .search-btn { box-shadow: none; }
}
/* Phones: lighter blur, a still aurora, a slightly firmer fill and a shorter shadow. */
@media (max-width: 640px) {
  :root { --blur: blur(14px) saturate(1.3); --surface: rgba(255, 255, 255, .065); --glass-shadow: 0 12px 28px -18px rgba(0, 0, 0, .6); }
  :root[data-theme="light"] { --surface: rgba(255, 255, 255, .7); --glass-shadow: 0 10px 24px -18px rgba(60, 50, 30, .18); }
  .aurora i { filter: blur(90px); }
  .aurora i:nth-child(n) { animation: none; }
  .gallery-nav button, .viewer button { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 640px) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --surface: rgba(255, 255, 255, .7); --glass-shadow: 0 10px 24px -18px rgba(60, 50, 30, .18); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora i:nth-child(n) { animation: none; }
}