/* NoxDrop — every page opens at night.
   The top of each page is a night band: navy sky, heavy white type, the real
   app on screen, and the app's own accent light. Below it, the page follows
   Day or Night. SF Pro on Apple devices, Roboto everywhere else. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Tokens ---------- */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Roboto, "Segoe UI", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Roboto, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* The night band never changes with the theme. */
  --night: #0b1020;
  --night-2: #131c3a;
  --night-ink: #eef0f5;
  --night-soft: rgba(238, 240, 245, .78);
  --night-line: rgba(238, 240, 245, .16);
  --gold: #e9b545;
  --gold-rgb: 233, 181, 69;

  /* Day */
  --bg: #f1f3f7;
  --bg-raise: #ffffff;
  --ink: #121a2c;
  --ink-soft: #3b4558;
  --ink-mute: #5e6879;
  --line: rgba(18, 26, 44, .12);
  --line-strong: rgba(18, 26, 44, .28);
  --plate: #ffffff;
  --glass-edge: rgba(255, 255, 255, .9);
  --shadow: 0 30px 60px -34px rgba(11, 16, 32, .45);

  /* Product accent. --accent is the light itself; --accent-ink is safe for text on the page. */
  --accent: #e9b545;
  --accent-rgb: 233, 181, 69;
  --accent-ink: #8a6118;
  --filament: var(--accent-ink);

  --maxw: 1180px;
  --gutter: clamp(20px, 4.5vw, 48px);
  --radius: 18px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #0b1020;
  --bg-raise: #121a30;
  --ink: #eef0f5;
  --ink-soft: #c3c8d4;
  --ink-mute: #939aab;
  --line: rgba(238, 240, 245, .12);
  --line-strong: rgba(238, 240, 245, .3);
  --plate: #121a30;
  --glass-edge: rgba(238, 240, 245, .14);
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  --accent-ink: var(--accent);
  color-scheme: dark;
}

/* One accent per app. Legal pages reuse the same class names. */
.theme-gold    { --accent: #e9b545; --accent-rgb: 233, 181, 69;  --accent-ink: #8a6118; }
.theme-blue    { --accent: #5b96ff; --accent-rgb: 91, 150, 255;  --accent-ink: #1f5fd1; }
.theme-emerald { --accent: #2fd8a0; --accent-rgb: 47, 216, 160;  --accent-ink: #0c7453; }
.theme-rainbow { --accent: #c77bff; --accent-rgb: 199, 123, 255; --accent-ink: #7b3fc4; }
.theme-cipher  { --accent: #3a95ff; --accent-rgb: 58, 149, 255;  --accent-ink: #0b63b0; }
.theme-teal    { --accent: #3fc2a8; --accent-rgb: 63, 194, 168;  --accent-ink: #17705f; }
.theme-gloss   { --accent: #8f8cff; --accent-rgb: 143, 140, 255; --accent-ink: #4b47c9; }
.theme-adgap   { --accent: #5a7df0; --accent-rgb: 90, 125, 240;  --accent-ink: #2f4fc4; }
html[data-theme="dark"] :is(.theme-gold, .theme-blue, .theme-emerald, .theme-rainbow, .theme-cipher, .theme-teal, .theme-gloss, .theme-adgap) { --accent-ink: var(--accent); }

body {
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: rgba(var(--accent-rgb), .35); }
code { font-family: var(--mono); font-size: .92em; }

.skip {
  position: absolute; left: 12px; top: 12px; z-index: 200;
  background: var(--gold); color: var(--night); padding: .5rem .8rem; border-radius: 8px;
  font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Nav: part of the night ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  color: var(--night-ink);
  background: var(--night);
  border-bottom: 1px solid var(--night-line);
}
.nav__inner { display: flex; align-items: center; gap: .6rem; min-height: 64px; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; font-family: var(--display); font-weight: 800;
  font-size: 1.2rem; letter-spacing: -.02em;
}
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand b { font-weight: inherit; color: var(--gold); }
.footer .brand b { color: var(--accent-ink); }
.nav__links { order: 1; display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.theme-toggle { order: 2; margin-left: .6rem; }
.nav__toggle { order: 3; }
.nav__links > a {
  text-decoration: none; color: var(--night-soft);
  padding: .45rem .75rem; border-radius: 999px; font-size: .98rem;
}
.nav__links > a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav__links > a[aria-current="page"] { color: var(--night); background: var(--accent); font-weight: 600; }

/* The apps, as a little Dock. Icons grow toward the pointer, like the Mac. */
.dock {
  display: flex; align-items: flex-end; gap: 2px;
  list-style: none; margin: 0 0 0 .5rem; padding: 5px 7px 6px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--night-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.dock li { display: flex; }
.dock a { position: relative; display: block; padding: 0 2px; text-decoration: none; color: inherit; }
.dock img {
  width: 32px; height: 32px; border-radius: 8px;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
  outline: 1px solid rgba(255, 255, 255, .16); outline-offset: -1px;
  transform-origin: 50% 100%;
  transition: transform .2s var(--ease);
}
.dock__label {
  position: absolute; left: 50%; top: calc(100% + 13px); z-index: 2;
  padding: .28rem .6rem; border-radius: 8px; white-space: nowrap;
  font-size: .82rem; font-weight: 600; color: var(--night-ink);
  background: rgba(24, 31, 56, .96); border: 1px solid var(--night-line);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8);
  opacity: 0; transform: translate(-50%, -4px); pointer-events: none;
  transition: opacity .15s, transform .15s var(--ease);
}
.dock a:hover .dock__label, .dock a:focus-visible .dock__label { opacity: 1; transform: translate(-50%, 0); }
.dock a:focus-visible { outline-offset: 2px; border-radius: 10px; }
/* The Dock's "open" dot: bright for this page's app, dim for the app a legal page belongs to. */
.dock a[aria-current="page"]::after, .dock a.is-near::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 6px var(--accent);
}
.dock a.is-near::after { background: var(--night-soft); box-shadow: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .dock li { transition: margin .2s var(--ease); }
  .dock li:hover { margin-inline: 7px; }
  .dock li:hover img { transform: translateY(-2px) scale(1.34); }
  .dock li:has(+ li:hover), .dock li:hover + li { margin-inline: 3px; }
  .dock li:has(+ li:hover) img, .dock li:hover + li img { transform: translateY(-1px) scale(1.14); }
  .dock a:active img { animation: launch .5s var(--ease); }
}
@keyframes launch { 40% { transform: translateY(-7px) scale(1.34); } }
.theme-toggle {
  min-height: 38px; padding: .3rem .85rem; border-radius: 999px;
  border: 1px solid var(--night-line); font-size: .92rem; color: var(--night-ink);
}
.theme-toggle:hover { border-color: var(--gold); }
.when-dark { display: none; }
html[data-theme="dark"] .when-light { display: none; }
html[data-theme="dark"] .when-dark { display: inline; }
.nav__toggle {
  display: none; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--night-line); align-items: center; justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--night-ink); position: relative;
  transition: transform .2s var(--ease);
}
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after { position: absolute; top: 6px; }
.nav.open .nav__toggle span { background: transparent; }
.nav.open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed; inset: 64px 0 auto 0; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: .4rem var(--gutter) 1rem;
    background: var(--night);
    border-bottom: 1px solid var(--night-line);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .7);
    transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .2s, transform .2s var(--ease);
  }
  .nav.open .nav__links { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .nav__links > a { padding: .85rem .2rem; font-size: 1.12rem; border-radius: 0; border-bottom: 1px solid var(--night-line); }
  .nav__links > a[aria-current="page"] { background: transparent; color: var(--accent); }
  .theme-toggle { margin-left: auto; }
  /* On small screens the menu opens as a home screen. */
  .dock {
    order: -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem .5rem;
    align-items: start;
    margin: .6rem 0 .8rem; padding: 0; background: none; border: 0; box-shadow: none;
  }
  .dock li { justify-content: center; }
  .dock a { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 0; }
  .dock img { width: 56px; height: 56px; border-radius: 13px; }
  .dock__label {
    position: static; opacity: 1; transform: none; padding: 0; background: none; border: 0; box-shadow: none;
    font-size: .8rem; font-weight: 500; color: var(--night-soft); white-space: normal; text-align: center; line-height: 1.2;
  }
  .dock a[aria-current="page"] .dock__label { color: var(--accent); font-weight: 700; }
  .dock a[aria-current="page"]::after, .dock a.is-near::after { display: none; }
}

/* ---------- Type ---------- */
h1, h2, h3, .display, .h2 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.04;
  text-wrap: balance;
}
h1, .display { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2, .h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.lede, .lead { font-size: clamp(1.1rem, 1.6vw, 1.28rem); line-height: 1.55; color: var(--ink-soft); max-width: 44rem; }
h2 + .lede, h2 + .lead { margin-top: .8rem; }
.muted { color: var(--ink-mute); }
.mt-2 { margin-top: .8rem; }
.center { text-align: center; }
.center .lede, .center .lead { margin-inline: auto; }

.prose a, .legal a.inline, .obtain a:not(.button), .entry__copy a:not(.button), .pair__copy a:not(.button), .facts a, .feature a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
  text-decoration-color: var(--accent);
}
.hl { color: var(--accent-ink); font-weight: 600; }

/* ---------- The night band ---------- */
.stage, .page-hero, .legal-head, .gloss-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--night-ink);
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 34% 72%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 58% 26%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 76% 62%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 91% 14%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1px 1px at 6% 88%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(55% 70% at 82% 30%, rgba(var(--accent-rgb), .30), transparent 62%),
    radial-gradient(45% 60% at 0% 100%, rgba(var(--gold-rgb), .16), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb), .45);
}
.stage .lede, .page-hero .lede, .legal-head .lede, .gloss-hero .lede { color: var(--night-soft); }
.page-hero .meta, .page-hero .platforms, .gloss-hero .meta, .page-hero figcaption { color: var(--night-soft); }
.page-hero figcaption { margin-top: 1.2rem; }
.page-hero a:not(.button), .stage a:not(.button) { color: var(--night-ink); }

/* Company hero */
.stage { padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 7vw, 88px); }
.stage__grid {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.stage h1 {
  font-size: clamp(4rem, 10.5vw, 8.4rem);
  line-height: 1.2;
  letter-spacing: -.045em;
  /* background-clip: text only paints inside the box, so the box must hold every glyph */
  width: fit-content;
  padding: 0 .12em 0 .02em;
  margin: -.15em 0 -.12em -.02em;
  background-image: linear-gradient(105deg, #a67c12 0%, #e0b53a 24%, #ffe98a 44%, #fffbe6 50%, #f0c040 58%, #b88a1c 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: titlegloss 9s ease-in-out infinite;
}
.stage__line {
  margin-top: .7rem;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  color: #fff;
}
.stage .lede { margin-top: 1.2rem; max-width: 36rem; }
.stage .hero__actions { margin-top: 1.8rem; }

/* The apps, floating in the night */
.collage { position: relative; aspect-ratio: 1 / .86; }
.collage::before {
  content: ""; position: absolute; inset: 10% 6% 4% 10%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 50% 50%, rgba(var(--gold-rgb), .34), transparent 64%);
  filter: blur(10px);
}
.collage > a { position: absolute; display: block; }
.collage a:focus-visible { outline-offset: 6px; border-radius: 14px; }
.collage img { width: 100%; height: auto; }
.collage .c-zetacas   { right: 0; top: 0; width: 60%; z-index: 1; }
.collage .c-gloss   { left: 0; top: 29%; width: 62%; z-index: 2; }
.collage .c-zetacas img, .collage .c-gloss img { border-radius: 12px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255,255,255,.12); }
.collage .c-cloak   { right: 25%; bottom: 3%; width: 19%; z-index: 3; }
.collage .c-cloak img { border-radius: 10px; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .85); }
.collage .c-search  { right: 1%; bottom: 0; width: 21%; z-index: 4; }
.collage .c-search img { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); }
.collage .c-note    { left: 5%; bottom: 1%; width: 38%; z-index: 5; }
.collage .c-note img { border-radius: 14px; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .8); }
@media (prefers-reduced-motion: no-preference) {
  .collage > * { animation: arrive .9s var(--ease) both, drift 8s ease-in-out 1s infinite; }
  .collage .c-zetacas  { animation-delay: .15s, 1.2s; }
  .collage .c-search { animation-delay: .3s, 2.4s; }
  .collage .c-cloak  { animation-delay: .45s, 3.1s; }
  .collage .c-note   { animation-delay: .6s, 1.8s; }
}
@keyframes arrive { from { opacity: 0; transform: translateY(28px) scale(.97); } }
@keyframes drift { 50% { transform: translateY(-10px); } }
@keyframes titlegloss { 0%, 100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }
@media (max-width: 900px) {
  .stage__grid { grid-template-columns: 1fr; }
  .collage { max-width: 560px; width: 100%; margin: .5rem auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stage h1 { animation: none; background-position: 40% 0; }
}

/* Product page hero */
.page-hero { padding-block: clamp(44px, 7vw, 92px); }
.page-hero h1 { max-width: 16ch; color: #fff; }
.page-hero .lede { margin-top: 1.1rem; }
.page-hero .meta { margin-top: 1rem; }
.hero__split {
  display: grid; grid-template-columns: minmax(17rem, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem); align-items: center;
}
.hero__split figure { position: relative; }
.hero__split figure::before {
  content: ""; position: absolute; inset: 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .45), transparent 66%);
  filter: blur(18px);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: center; margin-top: 1.8rem; }
@media (max-width: 860px) {
  .hero__split { grid-template-columns: 1fr; }
  .hero__split figure { max-width: 520px; }
}

.pill {
  display: inline-flex; align-items: center; gap: .55em; padding: .4em .95em; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .12);
  color: var(--accent); font-size: .92rem; font-weight: 600; margin-bottom: 1.3rem;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.pill img { width: 22px; height: 22px; border-radius: 6px; margin-left: -.35em; }

/* ---------- Buttons ---------- */
.button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7rem 1.35rem; border-radius: 999px;
  background: var(--accent); color: var(--night);
  text-decoration: none; font-weight: 700; font-size: 1rem;
  box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb), .7);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.button:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(var(--accent-rgb), .85); }
.button:active, .btn:active { transform: none; }
.button--quiet {
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.button--quiet:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
:is(.stage, .page-hero, .gloss-hero) .button--quiet { color: var(--night-ink); box-shadow: inset 0 0 0 1.5px var(--night-line); }
:is(.stage, .page-hero, .gloss-hero) .button--quiet:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.button svg { width: 1.1em; height: 1.1em; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(44px, 7vw, 96px); }
.section--tight { padding-block: clamp(20px, 4vw, 40px); }
.section-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lede { margin-top: .8rem; }
.kicker, .eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.005em;
  color: var(--accent-ink); margin-bottom: .6rem;
}
.legal-head .kicker { color: var(--accent); }
.kicker img { width: 34px; height: 34px; border-radius: 8px; }
.block + .block { margin-top: clamp(3rem, 7vw, 5.5rem); }

/* ---------- Home: lead product and flagship ---------- */
.hero { padding-block: clamp(40px, 6vw, 80px) 0; }
.lead-product {
  --accent: #8f8cff; --accent-rgb: 143, 140, 255; --accent-ink: #4b47c9;
  display: grid;
  grid-template-columns: minmax(16rem, .82fr) 1.18fr;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  border-radius: 28px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(var(--accent-rgb), .18), transparent 60%),
    var(--bg-raise);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .lead-product { --accent-ink: #8f8cff; }
.mark { position: relative; width: 76px; height: 76px; border-radius: 18px; margin-bottom: 1rem; box-shadow: 0 14px 30px -12px rgba(var(--accent-rgb), .8); }
.lead-product .platforms {
  display: inline-block; margin: 0 0 .5rem; padding: .25em .8em; border-radius: 999px;
  background: rgba(var(--accent-rgb), .16); color: var(--accent-ink); font-weight: 700; font-size: .95rem;
}
.lead-product h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.lead-product h2 a, .flagship h2 a { text-decoration: none; }
.lead-product h2 a:hover, .flagship h2 a:hover { color: var(--accent-ink); }
.lead-product .lede { margin-top: .8rem; }
.lead-product .plate { align-self: start; }
.lead-product .plate img { width: 100%; height: auto; }
@media (max-width: 800px) { .lead-product { grid-template-columns: 1fr; } }

.flagship {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}
.flagship article {
  position: relative; display: flex; flex-direction: column;
  padding: 12px 12px clamp(1.2rem, 2.4vw, 1.6rem);
  border-radius: 24px; background: var(--bg-raise); border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.flagship article:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 30px 60px -30px rgba(var(--accent-rgb), .6); }
.flagship article > :not(.plate) { padding-inline: clamp(.5rem, 1.2vw, .8rem); }
.flagship .plate {
  aspect-ratio: 4 / 3; display: block; border-radius: 16px;
  background:
    radial-gradient(80% 90% at 50% 100%, rgba(var(--accent-rgb), .45), transparent 70%),
    linear-gradient(180deg, var(--night), var(--night-2));
  border: 0;
}
.flagship .plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.flagship .plate--device img { object-fit: cover; object-position: center top; padding: 20px 20% 0; }
.flagship .plate--banner img { object-fit: cover; object-position: left center; }
.flagship h2 { margin-top: 1rem; font-size: clamp(1.6rem, 2.4vw, 2rem); }
.flagship p { margin-top: .4rem; color: var(--ink-soft); }
.flagship .platforms { margin-top: .5rem; font-size: 1.05rem; color: var(--ink); }
.flagship--4 { grid-template-columns: repeat(2, 1fr); }
.flagship--4 .plate { aspect-ratio: 16 / 10; }
@media (max-width: 860px) {
  .flagship { grid-template-columns: 1fr; }
  .flagship .plate { aspect-ratio: 16 / 10; }
}
.p-gold    { --accent: #e9b545; --accent-rgb: 233, 181, 69;  --accent-ink: #8a6118; }
.p-blue    { --accent: #5b96ff; --accent-rgb: 91, 150, 255;  --accent-ink: #1f5fd1; }
.p-emerald { --accent: #2fd8a0; --accent-rgb: 47, 216, 160;  --accent-ink: #0c7453; }
.p-rainbow { --accent: #c77bff; --accent-rgb: 199, 123, 255; --accent-ink: #7b3fc4; }
.p-cipher  { --accent: #3a95ff; --accent-rgb: 58, 149, 255;  --accent-ink: #0b63b0; }
.p-teal    { --accent: #3fc2a8; --accent-rgb: 63, 194, 168;  --accent-ink: #17705f; }
.p-adgap   { --accent: #5a7df0; --accent-rgb: 90, 125, 240;  --accent-ink: #2f4fc4; }
html[data-theme="dark"] :is(.p-gold, .p-blue, .p-emerald, .p-rainbow, .p-cipher, .p-teal) { --accent-ink: var(--accent); }

.catalogue { padding-top: clamp(40px, 6vw, 72px); }
.catalogue > .wrap > h2 { margin-bottom: 1rem; }
.also { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 2vw, 1.4rem); }
.also a {
  display: grid; grid-template-columns: 76px 1fr; gap: 1rem; align-items: center;
  padding: 14px 18px 14px 14px; border-radius: 20px;
  background: var(--bg-raise); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.also a:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 24px 44px -28px rgba(var(--accent-rgb), .7); }
.also img {
  width: 76px; height: 104px; object-fit: contain; object-position: center;
  border-radius: 12px; padding: 6px;
  background: radial-gradient(90% 90% at 50% 100%, rgba(var(--accent-rgb), .5), transparent 70%), var(--night);
}
.also h3 { font-size: 1.2rem; }
.also p { margin-top: .2rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.45; }
@media (max-width: 800px) { .also { grid-template-columns: 1fr; } }

span.steps { color: #b01f1f; font-weight: inherit; }
html[data-theme="dark"] span.steps,
:is(.stage, .page-hero, .obtain) span.steps { color: #ff7a7a; }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem); margin-top: clamp(2.4rem, 6vw, 4rem); }
.values h3 { display: flex; align-items: center; gap: .6rem; }
.values svg { width: 26px; height: 26px; flex: none; stroke: var(--accent-ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.values p { margin-top: .45rem; color: var(--ink-soft); }
@media (max-width: 800px) { .values { grid-template-columns: 1fr; } }

.listen { margin: clamp(2.8rem, 7vw, 5rem) auto 0; padding: 0; border: 0; max-width: 40rem; text-align: center; }
.listen p {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.06; letter-spacing: -.035em; color: var(--ink);
}
.listen .listen__go { margin-top: 1rem; font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 700; letter-spacing: -.01em; }
.listen__go .email { font-family: inherit; color: var(--accent-ink); border-bottom-width: 2px; }

/* ---------- Glass plate ---------- */
.plate {
  position: relative;
  border-radius: var(--radius);
  background: var(--plate);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow);
  overflow: hidden;
}
.plate img { width: 100%; height: auto; }
.plate--device {
  display: grid; place-items: center; padding: clamp(18px, 3vw, 32px);
  background:
    radial-gradient(70% 70% at 50% 100%, rgba(var(--accent-rgb), .35), transparent 70%),
    linear-gradient(180deg, var(--night), var(--night-2));
  border-color: transparent;
}
.plate--device img { width: auto; max-height: 540px; border-radius: 26px; }
/* In the night band, phones and windows float without a box. */
.page-hero .plate, .gloss-hero .plate { background: transparent; border: 0; box-shadow: none; overflow: visible; padding: 0; }
.page-hero .plate img { border-radius: 14px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255,255,255,.1); }
.page-hero .plate--device img { max-height: 600px; margin-inline: auto; border-radius: 34px; box-shadow: none; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .75)); }
.glare, .flare { position: absolute; inset: 0; pointer-events: none; }
.glare { background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 24%); mix-blend-mode: soft-light; }
.page-hero .glare { display: none; }
.flare {
  inset: auto; width: 50%; height: 85%;
  left: var(--fx, 32%); top: var(--fy, 22%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,.08) 42%, transparent 70%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .2s ease;
}
@media (hover: hover) and (pointer: fine) { .plate:hover .flare { opacity: 1; } }
body.zetacas .flare { display: none; }
body.zetacas .plate { cursor: zoom-in; }
body.zetacas .page-hero .plate img { border-radius: 10px; }

.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(48px, 6vh, 72px) clamp(16px, 4vw, 48px);
  background: rgba(6, 9, 18, .92); cursor: zoom-out;
}
.lightbox img { max-width: min(1280px, 100%); max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; cursor: default; box-shadow: 0 28px 70px rgba(0, 0, 0, .5); }
.lightbox__close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 999px;
  background: #fff; color: var(--night); font-size: 1.7rem; line-height: 1;
}

figcaption, .caption { margin-top: .7rem; color: var(--ink-mute); font-size: 1rem; max-width: 62ch; }

/* ---------- Feature grid ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 3vw, 2.4rem); }
.features--4 { grid-template-columns: repeat(4, 1fr); }
.feature { padding-top: 1.1rem; border-top: 2px solid rgba(var(--accent-rgb), .55); }
.feature__icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1rem;
  background: rgba(var(--accent-rgb), .16); color: var(--accent-ink);
}
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { margin-bottom: .4rem; }
.feature p { color: var(--ink-soft); font-size: 1.02rem; }
.feature p b { color: var(--ink); }
@media (max-width: 900px) { .features, .features--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features, .features--4 { grid-template-columns: 1fr; } }

/* ---------- Split rows with a list ---------- */
.speclist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .8rem; margin-top: 1.3rem; }
.speclist li { display: flex; gap: .8rem; align-items: flex-start; color: var(--ink-soft); }
.speclist li::before {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: .6em; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .9);
}
.speclist b { color: var(--ink); }

/* ---------- facts / pair / stack (ZetaCAS, Gloss, TT) ---------- */
.facts { border-top: 1px solid var(--line); margin-top: 1.5rem; }
.facts > div {
  display: grid; grid-template-columns: minmax(9rem, 16rem) 1fr;
  gap: .4rem 2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line);
}
.facts dt { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }
.facts dd { margin: 0; color: var(--ink-soft); max-width: 62ch; }
@media (max-width: 640px) { .facts > div { grid-template-columns: 1fr; } }

.pair {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 5vw, 4rem); align-items: center;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.pair > .pair__copy { grid-column: 1; grid-row: 1; min-width: 0; }
.pair > .pair__copy ~ .pair__copy { grid-column: 2; grid-row: 1; }
.pair > .plate, .pair > .pair__media, .pair > .ratio { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; }
.pair.image-lead { grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr); }
.image-lead > .pair__copy { grid-column: 2; grid-row: 1; }
.image-lead > .pair__copy ~ .pair__copy { grid-column: 1; grid-row: 1; }
.image-lead > .plate, .image-lead > .pair__media, .image-lead > .ratio { grid-column: 1; grid-row: 1; }
.pair__copy p, .pair__copy li { color: var(--ink-soft); }
.pair__copy h2 + p, .pair__copy p + p, .pair__copy .lede { margin-top: .9rem; }
.pair__copy ul, .pair__copy ol { margin: .9rem 0 0; padding-left: 1.15rem; }
.pair__copy li + li { margin-top: .45rem; }
.pair__copy li::marker { color: var(--accent-ink); font-weight: 700; }
.stack { display: grid; gap: clamp(1.2rem, 3vw, 2rem); }
.stack--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) {
  .pair, .pair.image-lead { grid-template-columns: 1fr; }
  .pair > *, .image-lead > * { grid-column: auto !important; grid-row: auto !important; }
  .pair > .pair__copy { order: -1; }
  .stack--2 { grid-template-columns: 1fr; }
}
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 1.75rem); margin-top: 1.2rem; align-items: start; }
.phones .plate img { height: auto; }
@media (max-width: 640px) { .phones { grid-template-columns: 1fr; } }

.ease { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 2rem; margin-top: 1.6rem; }
.ease li { padding-top: 1.1rem; border-top: 2px solid rgba(var(--accent-rgb), .55); }
.ease svg { width: 30px; height: 30px; stroke: var(--accent-ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ease h3 { margin-top: .7rem; }
.ease p { margin-top: .35rem; color: var(--ink-soft); }
.measures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 2rem; margin-top: 1.2rem; }
.measures div { padding: 1.2rem 0; border-top: 2px solid rgba(var(--accent-rgb), .55); }
.measures b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -.04em; line-height: 1; color: var(--accent-ink); }
.measures span { display: block; margin-top: .4rem; color: var(--ink-soft); }
@media (max-width: 800px) { .ease, .measures { grid-template-columns: 1fr; } }

.eq { margin: .35rem 0 1.05rem; color: var(--ink); }
.eq svg { height: 3.4rem; width: auto; }
.math { display: inline-block; color: inherit; line-height: 0; vertical-align: middle; }
.math svg { display: inline-block; height: 1.2em; width: auto; vertical-align: -0.22em; }

/* ---------- Get it ---------- */
.obtain, .appstore {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem 2rem; flex-wrap: wrap;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  border-radius: 28px;
  color: var(--night-ink);
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(var(--accent-rgb), .45), transparent 60%),
    linear-gradient(135deg, var(--night), var(--night-2));
  box-shadow: 0 40px 80px -40px rgba(var(--accent-rgb), .55);
}
.obtain h2, .appstore h2 { max-width: 20ch; color: #fff; }
.obtain .muted, .appstore .muted { color: var(--night-soft); }
.obtain a:not(.button):not(.badge) { color: var(--night-ink); }
.obtain__actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.obtain .button--quiet { color: var(--night-ink); box-shadow: inset 0 0 0 1.5px var(--night-line); }
.badge img { height: 54px; width: auto; }

/* ---------- Custom Search ---------- */
.video {
  position: relative; border-radius: 22px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 50px 90px -40px rgba(var(--accent-rgb), .55), var(--shadow);
  background: #000;
}
.video video { width: 100%; aspect-ratio: 16 / 9; background: #000; }

.engine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.engine {
  display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: 14px;
  background: var(--bg-raise); border: 1px solid var(--line);
  transition: transform .2s var(--ease), border-color .2s;
}
.engine:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .6); }
.engine__badge {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  font-weight: 800; font-size: 1rem; color: #111;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.engine__name { display: block; font-size: .98rem; font-weight: 600; line-height: 1.2; }
.engine__bang { display: block; font-family: var(--mono); font-size: .8rem; color: var(--ink-mute); }
.engine-note { text-align: center; margin-top: 1.4rem; color: var(--ink-mute); }

.bang {
  max-width: 780px; margin: 0 auto; padding: clamp(18px, 3vw, 30px);
  border-radius: 24px; color: var(--night-ink);
  background: linear-gradient(180deg, var(--night), var(--night-2));
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .25), var(--shadow);
}
.bang__field {
  display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid var(--night-line);
}
.bang__field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .2); }
.bang__field .q { color: var(--accent); font-size: 1.4rem; line-height: 1; }
.bang__input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font-family: var(--mono); font-size: 1.02rem; padding: .2rem 0; }
.bang__input:focus { outline: none; }
.bang__out { margin-top: 1rem; font-family: var(--mono); font-size: .95rem; color: var(--night-soft); word-break: break-all; min-height: 3.2rem; }
.bang__out .bang__engine { color: var(--accent); font-weight: 700; }
.bang__out .url { color: #fff; }
.bang__hints { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.bang__hint {
  font-family: var(--mono); font-size: .88rem; padding: .35rem .75rem; border-radius: 999px;
  background: rgba(var(--accent-rgb), .14); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .3);
}
.bang__hint:hover { background: rgba(var(--accent-rgb), .26); }

.phonepair { display: flex; gap: clamp(.8rem, 2vw, 1.4rem); justify-content: center; align-items: flex-end; }
.phonepair img { width: min(46%, 270px); height: auto; filter: drop-shadow(0 30px 40px rgba(11, 16, 32, .35)); }
.phonepair img:first-child { transform: translateY(-24px); }
.phonepair img[src*="settings"] { border-radius: 26px; }
/* A settings panel behind, the phone in front. The panel fades out because the list goes on. */
.duo { position: relative; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; margin-inline: auto; }
.duo img { position: absolute; height: auto; }
.duo::before {
  content: ""; position: absolute; left: -7%; top: 2%; width: 72%; height: 92%; border-radius: 40px;
  background:
    radial-gradient(80% 70% at 30% 30%, rgba(var(--accent-rgb), .55), transparent 70%),
    radial-gradient(70% 60% at 80% 90%, rgba(var(--accent-rgb), .3), transparent 70%);
  filter: blur(4px);
}
.duo__back {
  left: 0; top: 12%; width: 54%;
  border-radius: 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  box-shadow: 0 0 0 1px var(--line);
}
.duo__front { right: 4%; top: 0; width: 46%; filter: drop-shadow(0 30px 34px rgba(11, 16, 32, .35)); }

.manifesto { text-align: center; max-width: 52rem; margin-inline: auto; }
.manifesto__lock {
  width: 64px; height: 64px; margin: 0 auto 1.3rem; border-radius: 20px; display: grid; place-items: center;
  background: rgba(var(--accent-rgb), .16); color: var(--accent-ink);
}
.manifesto__lock svg { width: 30px; height: 30px; }
.manifesto blockquote {
  font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
  font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 18ch; margin: 0 auto 1.3rem; text-wrap: balance;
}
.manifesto__art { border-radius: 20px; margin: 0 auto 2.2rem; max-width: 720px; width: 100%; box-shadow: var(--shadow); }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.8rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5em; padding: .55em 1.05em; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--bg-raise); font-size: .98rem; font-weight: 600;
}
.chip .x { color: #d63b3b; }
.chip.ok { border-color: rgba(31, 170, 120, .6); }
.chip .c { color: #13a06f; }

/* ---------- Bit Cloak ---------- */
.cascade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 1.6rem; }
.cascade__card { padding: 1.2rem 1.35rem; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-raise); }
.cascade__card.is-ultra { border-color: rgba(255, 159, 67, .6); background: linear-gradient(135deg, rgba(255, 159, 67, .16), var(--bg-raise) 70%); }
.cascade__label { display: block; font-weight: 800; font-size: 1.05rem; color: var(--accent-ink); margin-bottom: .35rem; }
.cascade__card.is-ultra .cascade__label { color: #c46a12; }
html[data-theme="dark"] .cascade__card.is-ultra .cascade__label { color: #ffa552; }
.cascade__path { font-family: var(--mono); font-size: 1rem; color: var(--ink); line-height: 1.5; }
@media (max-width: 700px) { .cascade { grid-template-columns: 1fr; } }
.layers { display: flex; flex-direction: column; gap: .7rem; }
.layer { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 16px; background: var(--bg-raise); border: 1px solid var(--line); }
.layer__mark {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  font-weight: 800; font-size: .9rem; color: var(--night); background: var(--accent);
}
.layer h3 { font-size: 1.08rem; margin-bottom: .2rem; }
.layer p { color: var(--ink-soft); font-size: 1rem; }
.guarantees { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2.4rem; margin-top: clamp(2rem, 5vw, 3rem); }
.guarantee { display: flex; gap: .85rem; align-items: flex-start; color: var(--ink-soft); }
.guarantee b { color: var(--ink); }
.guarantee__dot { flex: none; width: 10px; height: 10px; margin-top: .55em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .9); }
@media (max-width: 700px) { .guarantees { grid-template-columns: 1fr; } }

/* ---------- TT / video embeds ---------- */
.ratio { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: var(--shadow); }
.ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.float-note { margin-top: 1.4rem; max-width: 340px; border-radius: 14px; box-shadow: var(--shadow); }
.watch { display: flex; gap: 1.2rem; align-items: center; margin-top: 1.4rem; }
.watch img { width: 120px; border-radius: 22px; box-shadow: var(--shadow); }

/* ---------- Xylophone ---------- */
.xylo { display: flex; gap: clamp(6px, 1.4vw, 14px); justify-content: center; align-items: flex-end; padding: clamp(16px, 3vw, 28px) .6rem .6rem; }
.xylo__bar {
  position: relative; flex: 1; max-width: 80px; border-radius: 10px 10px 16px 16px;
  box-shadow: inset 0 -8px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px -14px rgba(0,0,0,.6);
  transition: transform .08s ease, filter .2s ease;
}
.xylo__bar::after { content: attr(data-note); position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: rgba(0,0,0,.5); font-weight: 800; font-size: .85rem; }
.xylo__bar:hover { filter: brightness(1.08); }
.xylo__bar.active { transform: translateY(6px) scaleY(.97); filter: brightness(1.2); }
.xylo__hint { text-align: center; color: var(--night-soft); margin-top: .8rem; }

/* ---------- Legal ---------- */
.legal-head { padding-block: clamp(44px, 7vw, 88px); margin-bottom: clamp(24px, 4vw, 44px); }
.legal-head h1, .legal-head .display { color: #fff; }
.legal { max-width: 70ch; }
.legal .updated { display: block; color: var(--ink-mute); margin: 0 0 1.4rem; font-size: 1rem; }
.legal h3 { margin: 2.2rem 0 .6rem; }
.legal h3 .n { color: var(--accent-ink); font-weight: 700; font-size: 1rem; margin-right: .5rem; }
.legal p { color: var(--ink-soft); margin-bottom: .9rem; }
.legal p b, .legal li b { color: var(--ink); }
.legal ul { color: var(--ink-soft); padding-left: 1.15rem; margin-bottom: 1rem; }
.legal li { margin-bottom: .4rem; }
.legal .callout {
  border-left: 3px solid var(--accent); border-radius: 0 14px 14px 0;
  background: rgba(var(--accent-rgb), .1); padding: 1rem 1.2rem; margin: 1.3rem 0 1.6rem; color: var(--ink);
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: clamp(40px, 5vw, 64px); margin-top: clamp(40px, 6vw, 80px); }
.footer__grid { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer__brand { display: flex; flex-direction: column; gap: .7rem; max-width: 34ch; }
.footer__brand p { color: var(--ink-mute); font-size: 1rem; }
.footer__links { display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap; }
.footer__col h4 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; }
.footer__col a { display: block; color: var(--ink-soft); text-decoration: none; padding: .28rem 0; }
.footer__col a:hover { color: var(--accent-ink); }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--ink-mute); font-size: .95rem;
}
.email { cursor: pointer; border-bottom: 1.5px solid var(--accent); }

.totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 46px; height: 46px; border-radius: 999px;
  color: var(--night-ink); background: rgba(11, 16, 32, .85); border: 1px solid var(--night-line);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.totop.show { opacity: 1; pointer-events: auto; transform: none; }
.totop svg { width: 18px; height: 18px; }

/* Legal pages still carry these from the old shell. */
.reveal { opacity: 1; }

/* ---------- CaffeinateCat ---------- */
.theme-cat { --accent: #ff7a2e; --accent-rgb: 255, 122, 46; --accent-ink: #b5470a; }
.p-cat     { --accent: #ff7a2e; --accent-rgb: 255, 122, 46; --accent-ink: #b5470a; }
html[data-theme="dark"] :is(.theme-cat, .p-cat) { --accent-ink: var(--accent); }
.plate--cat img { border-radius: 14px; }
.theme-cat code { font-family: var(--mono); font-size: .92em; padding: .08em .35em; border-radius: 6px; background: rgba(var(--accent-rgb), .12); overflow-wrap: anywhere; }

/* Homepage collage: the AdGap window top-left, and the CaffeinateCat icon floating between ZetaCAS and the phone. */
.collage .c-adgap { left: 1%; top: 0; width: 33%; z-index: 3; }
.collage .c-adgap img { border-radius: 10px; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255,255,255,.12); }
.collage .c-cat { right: 4%; top: 45%; width: 15%; z-index: 6; }
.collage .c-cat img { border-radius: 22%; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .6)); }
.collage .c-cat::before {
  content: ""; position: absolute; inset: -22%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 46, .5), transparent 65%);
}
@media (prefers-reduced-motion: no-preference) {
  .collage .c-adgap { animation-delay: .05s, 1.5s; }
  .collage .c-cat { animation: arrive .9s var(--ease) .75s both, catbob 5s ease-in-out 1.7s infinite; }
  .collage .c-cat::before { animation: catglow 3.2s ease-in-out infinite; }
}
@keyframes catbob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes catglow { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }

/* "Also from NoxDrop" with four cards: two by two. */
.also--4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 800px) { .also--4 { grid-template-columns: 1fr; } }

/* ---------- ZetaCAS: page structure ---------- */
.zetacas .zgroup { margin-top: clamp(3rem, 7vw, 5.5rem); }
.zetacas .zgroup > .lede { max-width: 66ch; margin-top: .7rem; }
.zetacas .katex { color: inherit; }

.statband {
  list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.statband li { background: var(--bg-raise); padding: 1.1rem 1.15rem; }
.statband b { display: block; font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--accent-ink); }
.statband span { display: block; margin-top: .35rem; color: var(--ink-soft); font-size: .98rem; line-height: 1.35; }

/* Looping previews */
.video--loop .video__toggle {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; min-height: 36px; padding: .3rem .95rem;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(10, 14, 28, .62); color: #fff;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .2s;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.video--loop:hover .video__toggle, .video--loop .video__toggle:focus-visible { opacity: 1; }
@media (hover: none) { .video--loop .video__toggle { opacity: .85; } }
.plate--loop { max-width: 330px; width: 100%; margin-inline: auto; }
.plate--loop video { display: block; width: 100%; height: auto; aspect-ratio: 480 / 1040; background: #000; }

/* Side by side with WolframAlpha, and a few more */
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); margin-top: 1.6rem; }
.vs__card {
  display: flex; flex-direction: column; gap: .8rem; min-width: 0;
  padding: clamp(1.1rem, 2.4vw, 1.6rem); background: var(--bg-raise);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow);
}
.vs__card--wide { grid-column: 1 / -1; }
.vs__tag {
  align-self: flex-start; padding: .22rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 700;
  letter-spacing: .02em; color: var(--accent-ink); background: rgba(var(--accent-rgb), .14);
}
.vs__card h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.2; }
.vs__query {
  margin: 0; padding: .55rem .75rem; border-radius: 10px; background: rgba(var(--accent-rgb), .08);
  font-family: var(--mono); font-size: .88rem; overflow-x: auto; white-space: nowrap;
}
.vs__math { margin: .1rem 0; padding: .2rem 0; overflow-x: auto; overflow-y: hidden; }
.vs__math .katex-display { margin: .3rem 0; }
.vs__math .katex-display > .katex { text-align: left; }
.vs__math .katex { font-size: clamp(1.02rem, 2.3vw, 1.35rem); }
.vs__card p { color: var(--ink-soft); }
.vs__card .vs__note { font-size: .98rem; color: var(--ink-mute); }
@media (max-width: 820px) { .vs { grid-template-columns: 1fr; } }

/* Integration methods and the topic grid */
.methods { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); }
.methods li { padding: .9rem 0; border-top: 1px solid var(--line); }
.methods b { display: block; font-size: 1.05rem; }
.methods span { color: var(--ink-soft); }
@media (max-width: 720px) { .methods { grid-template-columns: 1fr; } }
.topics { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.topics li {
  display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .7rem .95rem;
  border-radius: 14px; background: var(--bg-raise); border: 1px solid var(--line);
}
.topics li b { font-variant-numeric: tabular-nums; color: var(--accent-ink); font-size: 1.1rem; }

/* ZetaCAS: formulas typeset with KaTeX follow the page colour on both themes */
.zetacas .math { line-height: normal; vertical-align: baseline; }
.zetacas .math .katex { font-size: 1.08em; }
.zetacas .eq .katex-display { margin: 0; text-align: left; }
.zetacas .eq .katex { font-size: 1.55rem; }
.zetacas .eq .katex-display > .katex { text-align: left; }

/* ZetaCAS: "What you can ask" */
.zetacas .ask-title { color: var(--accent-ink); }
.zetacas .ask-sub { margin-top: clamp(2rem, 4vw, 3rem); font-size: 1.05rem; font-weight: 700; color: var(--ink-mute); letter-spacing: .02em; }
.ask { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: clamp(.8rem, 2vw, 1.2rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ask__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 820px) { .ask { grid-template-columns: 1fr; } }
.ask__card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1.1rem; align-items: start;
  padding: 1.15rem 1.25rem 1.15rem 1.5rem; border-radius: var(--radius); background: var(--bg-raise);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--glass-edge);
  transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.ask__card:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 22px 40px -28px rgba(var(--accent-rgb), .7); }
.ask__card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 5px; border-radius: 0 5px 5px 0; background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), .25)); transition: top .2s var(--ease), bottom .2s var(--ease); }
.ask__card:hover::before { top: 8px; bottom: 8px; }
.ask__icon {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .30), rgba(var(--accent-rgb), .08));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .30); color: var(--accent-ink); font-size: 1.45rem;
}
.ask__icon .katex { font-size: 1em; }
.ask__card h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.ask__card p { color: var(--ink-soft); }
.ask__card p b { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 62%, rgba(var(--accent-rgb), .30) 0); }
@media (max-width: 480px) { .ask__card { grid-template-columns: 62px minmax(0, 1fr); gap: .9rem; } .ask__icon { width: 62px; height: 62px; font-size: 1.2rem; } }

/* ---------- ECG Training ---------- */
.theme-ecg { --accent: #19b9a5; --accent-rgb: 25, 185, 165; --accent-ink: #0b7a6c; }
.p-ecg     { --accent: #19b9a5; --accent-rgb: 25, 185, 165; --accent-ink: #0b7a6c; }
html[data-theme="dark"] :is(.theme-ecg, .p-ecg) { --accent-ink: var(--accent); }
/* The app's own coral trace runs under the night band, like paper through a monitor. */
.pulse {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120' viewBox='0 0 300 120'%3E%3Cpath d='M0 70H70q8-14 16 0H104l5 9 9-66 9 74 6-17H150q14-24 28 0H300' fill='none' stroke='%23ff6b5e' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 300px 120px;
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 70%, transparent);
}
@media (prefers-reduced-motion: no-preference) { .pulse { animation: pulsefeed 3.2s linear infinite; } }
@keyframes pulsefeed { to { background-position-x: -300px; } }
.ecgtraining .page-hero .mark { width: 84px; height: 84px; border-radius: 20px; margin-bottom: 1.2rem; }
.ecgtraining .page-hero .plate--device img { max-height: 640px; border-radius: 38px; outline: 7px solid #0a0c14; outline-offset: -1px; }
.ecgtraining .plate--device img { outline: 6px solid #0a0c14; outline-offset: -1px; }
/* A phone on its side, and a tablet: the screenshot inside a dark bezel. */
.plate--phone, .plate--tablet { padding: 9px; border-radius: 34px; background: #0a0c14; border: 0; box-shadow: 0 40px 80px -40px rgba(var(--accent-rgb), .7), var(--shadow); }
.plate--phone img { border-radius: 26px; }
.plate--tablet { padding: 12px; border-radius: 30px; max-width: 520px; margin-inline: auto; }
.plate--tablet img { border-radius: 19px; }
.plate--phone .glare, .plate--tablet .glare { display: none; }
.mt-section { margin-top: clamp(3rem, 7vw, 5rem); }
.rhythms { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.rhythms li {
  display: flex; align-items: center; gap: .7rem; padding: .72rem 1rem; border-radius: 13px;
  background: var(--bg-raise); border: 1px solid var(--line); color: var(--ink); font-weight: 600; line-height: 1.25;
  transition: border-color .2s, transform .2s var(--ease);
}
.rhythms li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ff6b5e; box-shadow: 0 0 10px rgba(255, 107, 94, .8); }
.rhythms li:hover { border-color: rgba(var(--accent-rgb), .6); transform: translateY(-2px); }
.authors {
  position: relative; isolation: isolate; overflow: hidden;
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.8rem, 4.5vw, 3.4rem) clamp(1.6rem, 4vw, 3rem) clamp(5.5rem, 9vw, 7rem);
  border-radius: 28px; color: var(--night-ink);
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(var(--accent-rgb), .42), transparent 60%),
    linear-gradient(135deg, var(--night), var(--night-2));
  box-shadow: 0 40px 80px -40px rgba(var(--accent-rgb), .55);
}
.authors h2 { color: #fff; max-width: 18ch; font-size: clamp(2rem, 4.6vw, 3.4rem); }
.authors p { color: var(--night-soft); max-width: 60ch; margin-top: 1rem; }
.authors p b { color: #fff; }
.authors span.steps { color: #ff7a7a; }
.authors::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120' viewBox='0 0 300 120'%3E%3Cpath d='M0 70H70q8-14 16 0H104l5 9 9-66 9 74 6-17H150q14-24 28 0H300' fill='none' stroke='%23ff6b5e' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 300px 120px;
  opacity: .6;
}
@media (prefers-reduced-motion: no-preference) { .authors::after { animation: pulsefeed 3.2s linear infinite; } }
/* Homepage: the ECG Training feature card, and its phone floating in the collage. */
.lead-product.p-ecg { margin-top: clamp(1.2rem, 3vw, 1.8rem); }
html[data-theme="dark"] .lead-product.p-ecg { --accent-ink: #19b9a5; }
.lead-product.p-ecg .plate--phone { align-self: center; }
.collage .c-ecg { left: 36%; top: 6%; width: 17%; z-index: 7; }
.collage .c-ecg img { border-radius: 14%/6.5%; outline: 3px solid #0a0c14; outline-offset: -1px; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .7)); }
.collage .c-ecg::before {
  content: ""; position: absolute; inset: -14%; z-index: -1; border-radius: 40%;
  background: radial-gradient(circle, rgba(25, 185, 165, .55), transparent 68%);
}
@media (prefers-reduced-motion: no-preference) {
  .collage .c-ecg { animation: arrive .9s var(--ease) .9s both, ecgfloat 6s ease-in-out 1.9s infinite; }
  .collage .c-ecg::before { animation: catglow 1.6s ease-in-out infinite; }
}
@keyframes ecgfloat { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-16px) rotate(-2deg); } }
.pair__copy :is(ul, ol) + p { margin-top: .9rem; }

/* Custom Search: a Mac window on its own, and a full promo picture. */
.plate--window { background: transparent; border: 0; box-shadow: none; overflow: visible; max-width: 440px; width: 100%; margin-inline: auto; }
.plate--window img { filter: drop-shadow(0 34px 44px rgba(11, 16, 32, .38)); }
.plate--promo { margin-top: clamp(2rem, 5vw, 3.5rem); border: 0; border-radius: 22px; }
.theme-gold .duo__back { border-radius: 0; box-shadow: none; filter: drop-shadow(0 26px 34px rgba(11, 16, 32, .3)); }

/* Pictty */
.theme-pictty, .p-pictty { --accent: #4285f4; --accent-rgb: 66, 133, 244; --accent-ink: #1a5fd6; }
html[data-theme="dark"] :is(.theme-pictty, .p-pictty) { --accent-ink: var(--accent); }
.lead-product.p-pictty { margin-top: clamp(1.2rem, 3vw, 1.8rem); }
/* A term with a floating note: hover on a Mac, tap on a phone. */
.term { position: relative; font-weight: 700; text-decoration: underline dotted rgba(var(--accent-rgb), .9); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: help; outline: none; }
.term::after {
  content: attr(data-note); position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 30;
  width: max-content; max-width: min(19rem, 78vw); padding: .75rem .9rem; border-radius: 14px;
  background: rgba(11, 16, 32, .95); color: #eef1f8; border: 1px solid rgba(255, 255, 255, .14);
  font-size: .86rem; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal;
  box-shadow: 0 20px 44px -16px rgba(0, 0, 0, .65);
  opacity: 0; transform: translate(-50%, 6px); pointer-events: none; transition: opacity .18s, transform .18s;
}
.term:hover::after, .term:focus::after { opacity: 1; transform: translate(-50%, 0); }
/* A word that has to stand out in a dark hero, such as "Free". */
.page-hero .platforms .shout { color: #fff; font-weight: 900; font-size: 1.45em; letter-spacing: .01em; }
/* A note on a highlighted word keeps the highlight's colour. */
.term.steps { text-decoration-color: currentColor; }
/* Pictty: room between the video and the next heading. */
.theme-pictty .video { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
/* An elegant pill for "Free and open source". */
.badge-free {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .6rem;
  padding: .42rem 1rem .42rem .8rem; border-radius: 999px;
  color: #fff; font-weight: 500; font-size: 1.02rem; letter-spacing: .01em; text-decoration: none;
  background: linear-gradient(135deg, rgba(52, 168, 83, .28), rgba(66, 133, 244, .24));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 10px 26px -12px rgba(52, 168, 83, .7);
  transition: transform .2s, box-shadow .2s;
}
.badge-free::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 10px #3ddc84; }
.badge-free:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 14px 30px -12px rgba(52, 168, 83, .9); }

/* ---------- Mac App Store badge and support note ---------- */
.badge { display: inline-flex; line-height: 0; border-radius: 10px; transition: transform .2s var(--ease), filter .2s var(--ease); }
.badge:hover { transform: translateY(-2px); filter: drop-shadow(0 12px 22px rgba(var(--accent-rgb), .6)); }
.badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.hero__actions .badge img, .obtain .badge img { height: 56px; width: auto; }
.hero__actions .badge { flex: none; margin-right: 100%; }
.support { max-width: 46ch; margin-top: 1.1rem; font-size: 1rem; line-height: 1.55; }
.page-hero .support, .obtain .support { color: var(--night-soft); }
.obtain .support { margin: 1rem 0 0; }
@media (prefers-reduced-motion: reduce) { .badge, .badge:hover { transition: none; transform: none; } }

/* MockUpThis (2026-11-02): its coral, the window in the homepage collage (where Gloss Notes was), and wide window plates. */
.theme-mockupthis, .p-mockupthis { --accent: #ff5a36; --accent-rgb: 255, 90, 54; --accent-ink: #c2381a; }
html[data-theme="dark"] :is(.theme-mockupthis, .p-mockupthis) { --accent-ink: #ff7a59; }
.collage .c-mocky { left: 0; top: 29%; width: 62%; z-index: 2; }
.collage .c-mocky img { border-radius: 12px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255,255,255,.12); }
@media (prefers-reduced-motion: no-preference) {
  .collage .c-mocky { animation-delay: .1s, 2s; }
}
.plate--window-wide { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.plate--window-wide img { width: 100%; height: auto; filter: drop-shadow(0 34px 44px rgba(11, 16, 32, .38)); }
.plate--window-wide .glare, .plate--window-wide .flare { display: none; }
.flagship .p-mockupthis .plate img { object-fit: cover; object-position: center top; }

/* Homepage: "Making apps since 2020", a quiet pill above the wordmark (2026-11-02). */
.stage .since { margin: 0 0 1.1rem; }
.stage .since span { display: inline-flex; align-items: center; gap: .55em; padding: .42em 1em .42em .8em; border-radius: 999px;
  font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--night-soft);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.stage .since span::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: rgb(var(--gold-rgb));
  box-shadow: 0 0 0 .22em rgba(var(--gold-rgb), .22); }

/* DuetPlus */
.theme-duetplus, .p-duetplus { --accent: #7b5cff; --accent-rgb: 123, 92, 255; --accent-ink: #5a3df0; }
html[data-theme="dark"] :is(.theme-duetplus, .p-duetplus) { --accent-ink: #a48cff; }