/* ==========================================================================
   Waiz Earn — Crystal Odyssey public site (shared layer)
   Hand-authored, no build step. Loaded by every public page; the homepage
   adds home.css. Tokens first, then base, then components.
   Fonts: Manrope + Inter (SIL OFL 1.1, licences in ../fonts/OFL-*.txt).
   ========================================================================== */

/* ---------- Fonts: per-subset files, the browser fetches only what a page uses ---------- */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("../fonts/manrope-latin.v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("../fonts/manrope-latin-ext.v1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("../fonts/manrope-vietnamese.v1.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter-latin.v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The currency block (₱ and friends) is left to Manrope: 15 KB instead of 85 KB for one glyph. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter-latin-ext.v1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter-vietnamese.v1.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* ---------- Tokens: dark is the brand default ---------- */
:root {
  color-scheme: dark;
  --bg: #050914;
  --bg-2: #070D1C;
  --panel: rgba(12, 20, 35, .95);
  --panel-solid: #0C1423;
  --panel-2: #121D2E;
  --panel-3: #18253A;
  --text: #F5F7FC;
  --text-2: #BAC9DA;
  --text-3: #93A4B8;
  --line: rgba(186, 201, 218, .13);
  --line-2: rgba(186, 201, 218, .24);
  --line-3: rgba(186, 201, 218, .38);
  --ok: #7BE3B0; --ok-bg: rgba(123, 227, 176, .12);
  --warn: #FFD18A; --warn-bg: rgba(255, 209, 138, .12);
  --bad: #FF9BA8; --bad-bg: rgba(255, 155, 168, .12);
  --focus: #FFFFFF; --focus-gap: #050914;
  --cta-a: #4C55E0; --cta-b: #8B3FE0;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -24px rgba(0, 0, 0, .8);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 70px -30px rgba(0, 0, 0, .9);

  /* World: the default "waiz" world blends the two brand lights. */
  --w-base: #071526; --acc: #8FE3F2; --acc-2: #B8A4FF; --acc-ink: #04212A;
  --acc-text: #8FE3F2;
  --acc-rgb: 143 227 242; --acc2-rgb: 184 164 255;

  --f-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Khmer", "Noto Sans Devanagari", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --f-body: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Khmer", "Noto Sans Devanagari", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px;
  --gutter: 16px;
  --content: min(100% - 2 * var(--gutter), 1280px);
  --wide: min(100% - 2 * var(--gutter), 1440px);
  --hdr-h: 64px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 180ms; --t-med: 320ms; --t-slow: 650ms;
}
@media (min-width: 360px) { :root { --gutter: 20px; } }
@media (min-width: 480px) { :root { --gutter: 24px; } }
@media (min-width: 768px) { :root { --gutter: 32px; --hdr-h: 72px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }
@media (min-width: 1440px) { :root { --gutter: 80px; } }

/* Worlds. One machine, three sets of parameters. */
[data-world="hearnify"] { --w-base: #061F24; --acc: #8AF2D7; --acc-2: #6DD8FF; --acc-ink: #062A24; --acc-text: #8AF2D7; --acc-rgb: 138 242 215; --acc2-rgb: 109 216 255; }
[data-world="learnify"] { --w-base: #120B27; --acc: #D7A5FF; --acc-2: #8B6DFF; --acc-ink: #1E0B3A; --acc-text: #D7A5FF; --acc-rgb: 215 165 255; --acc2-rgb: 139 109 255; }
[data-world="paldearn"] { --w-base: #08132D; --acc: #9CC4FF; --acc-2: #FFD18A; --acc-ink: #071634; --acc-text: #9CC4FF; --acc-rgb: 156 196 255; --acc2-rgb: 255 209 138; }

/* Light theme: warm-white canvas, deep navy text, crisp surfaces. Artwork stays dark and bounded. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F3EC; --bg-2: #F1ECE3;
  --panel: #FFFFFF; --panel-solid: #FFFFFF; --panel-2: #F3EFE8; --panel-3: #E6DFD3;
  --text: #0B1A33; --text-2: #34445C; --text-3: #4F5D73;
  --line: rgba(11, 26, 51, .12); --line-2: rgba(11, 26, 51, .2); --line-3: rgba(11, 26, 51, .34);
  --ok: #0F6B44; --ok-bg: #E2F4EA; --warn: #7A4B00; --warn-bg: #FFF1D6; --bad: #A3122A; --bad-bg: #FCE6EA;
  --focus: #0B1A33; --focus-gap: #FFFFFF;
  --shadow-1: 0 1px 2px rgba(11, 26, 51, .06), 0 12px 30px -18px rgba(11, 26, 51, .25);
  --shadow-2: 0 2px 4px rgba(11, 26, 51, .06), 0 24px 60px -30px rgba(11, 26, 51, .35);
  --acc-text: #116C8A;
}
:root[data-theme="light"][data-world="hearnify"] { --acc-text: #0B7A66; }
:root[data-theme="light"][data-world="learnify"] { --acc-text: #6A3BD2; }
:root[data-theme="light"][data-world="paldearn"] { --acc-text: #1F55B8; }

/* A region that is always dark (the portal scenes), whatever the page theme. */
.scope-dark {
  color-scheme: dark;
  --text: #F5F7FC; --text-2: #C4D1DF; --text-3: #A3B2C4;
  --line: rgba(186, 201, 218, .14); --line-2: rgba(186, 201, 218, .26); --line-3: rgba(186, 201, 218, .4);
  --panel: rgba(9, 15, 28, .9); --panel-solid: #0A1222; --panel-2: #111B2C; --panel-3: #18253A;
  --focus: #FFFFFF; --focus-gap: #050914;
  --ok: #7BE3B0; --ok-bg: rgba(123, 227, 176, .12); --warn: #FFD18A; --warn-bg: rgba(255, 209, 138, .12); --bad: #FF9BA8;
  --acc-text: var(--acc);
  color: var(--text);
}

/* High contrast: solid surfaces, full-strength text, no decorative glow. */
:root[data-contrast="high"] {
  --panel: #000000; --panel-solid: #000000; --panel-2: #0A0A0A; --panel-3: #141414;
  --text: #FFFFFF; --text-2: #FFFFFF; --text-3: #E8EEF6;
  --line: rgba(255, 255, 255, .55); --line-2: rgba(255, 255, 255, .75); --line-3: #FFFFFF;
  --shadow-1: none; --shadow-2: none;
}
:root[data-contrast="high"] .scope-dark { --text-2: #FFFFFF; --text-3: #E8EEF6; --panel: #000000; --panel-solid: #000000; }
:root[data-contrast="high"][data-theme="light"] {
  --bg: #FFFFFF; --panel: #FFFFFF; --panel-solid: #FFFFFF; --panel-2: #FFFFFF; --panel-3: #F2F2F2;
  --text: #000000; --text-2: #000000; --text-3: #1A1A1A;
  --line: rgba(0, 0, 0, .6); --line-2: rgba(0, 0, 0, .8); --line-3: #000000;
}

/* Text size preference scales every rem. */
:root[data-textsize="large"] { font-size: 112.5%; }
:root[data-textsize="larger"] { font-size: 125%; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr-h) + 16px);
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="reduced"]) { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  background: var(--bg); color: var(--text);
  font-family: var(--f-body); font-size: 1rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(h1, h2, h3, h4) { font-family: var(--f-display); line-height: 1.15; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:where(ul, ol)[role="list"] { list-style: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }
[hidden] { display: none !important; }
::selection { background: rgb(var(--acc-rgb) / .35); color: var(--text); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-gap), 0 0 0 6px var(--focus-gap);
}
:root[data-underline="on"] main a:not(.btn):not(.res-link):not(.tile-link),
:root[data-underline="on"] .site-footer a,
:root[data-contrast="high"] main a:not(.btn):not(.res-link):not(.tile-link) { text-decoration: underline; }

.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--text); color: var(--bg); font-weight: 650; text-decoration: none;
  transform: translateY(-160%); transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus-visible { transform: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { flex: none; width: 1.25em; height: 1.25em; }

.container { width: var(--content); margin-inline: auto; }
.container-wide { width: var(--wide); margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: .8125rem; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acc-text);
}
.lede { color: var(--text-2); font-size: clamp(1rem, .96rem + .2vw, 1.125rem); line-height: 1.6; max-width: 62ch; }
.muted { color: var(--text-2); }
.small { font-size: .875rem; line-height: 1.5; }
.mono { font-family: var(--f-mono); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--panel-2); --btn-fg: var(--text); --btn-bd: var(--line-2);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-pill);
  border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--f-body); font-weight: 650; font-size: 1rem; line-height: 1.2; letter-spacing: -.005em;
  text-decoration: none; text-align: center; cursor: pointer; user-select: none;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn .ic { width: 20px; height: 20px; }
.btn::after { /* narrow light sweep, transform only */
  content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%);
  transform: translateX(-130%);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(130%); transition: transform 360ms var(--ease); }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.btn:active { transform: translateY(0) scale(.98); transition-duration: 90ms; }
.btn[aria-disabled="true"], .btn:disabled { cursor: not-allowed; opacity: .62; transform: none; }
.btn[aria-disabled="true"]::after, .btn:disabled::after { display: none; }
.btn-cta {
  --btn-fg: #FFFFFF; --btn-bd: rgba(255, 255, 255, .22);
  background: linear-gradient(100deg, var(--cta-a), var(--cta-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 14px 34px -14px rgba(118, 84, 255, .85);
}
.btn-cta:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 40px -12px rgba(118, 84, 255, .95); }
.btn-accent { --btn-bg: var(--acc); --btn-fg: var(--acc-ink); --btn-bd: transparent; box-shadow: 0 12px 30px -16px rgb(var(--acc-rgb) / .9); }
.btn-glass { --btn-bg: rgba(8, 13, 26, .62); --btn-bd: var(--line-2); }
.btn-glass:hover { --btn-bd: var(--line-3); }
.btn-outline { --btn-bg: transparent; --btn-bd: var(--line-3); }
.btn-outline:hover { --btn-bg: rgb(var(--acc-rgb) / .08); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
.btn-block { width: 100%; }
:root[data-theme="light"] .btn-glass { --btn-bg: #FFFFFF; }
:root[data-theme="light"] .scope-dark .btn-glass { --btn-bg: rgba(8, 13, 26, .62); }
:root[data-contrast="high"] .btn-cta { background: #3B44C9; box-shadow: none; border: 2px solid #FFFFFF; }
:root[data-contrast="high"] .btn::after { display: none; }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0;
  border-radius: 50%; border: 1px solid var(--line-2); background: rgba(8, 13, 26, .55); color: var(--text);
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--line-3); background: rgba(20, 30, 50, .7); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .ic { width: 20px; height: 20px; }
/* Light theme: white controls on the light bar and in dialogs; anything inside a dark scene keeps its glass. */
:root[data-theme="light"] .site-header .icon-btn,
:root[data-theme="light"] dialog .icon-btn { background: #FFFFFF; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--acc-text); font-weight: 600; text-decoration: none;
}
.link-arrow .ic { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .ic { transform: translateX(3px); }

/* ---------- Header: a floating crystal command bar ----------
   Open over the homepage scene at the top. Once the page moves (and on every other page)
   the same row folds into a free-floating long hexagon — both ends cut to a point — with a
   solid prism fill, two lights that run around its edge, a sweep of light every few seconds,
   glowing nodes at its tips and a lit plate that slides to the link under the pointer.
   No frosted glass and no full-width slab: the page stays visible around the bar. */
.site-header {
  position: sticky; top: 0; z-index: 60; height: var(--hdr-h);
  color: var(--text); pointer-events: none;
}
.hdr-inner {
  --cut: 16px; --bar-h: calc(var(--hdr-h) - 14px);
  --shape: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%);
  position: relative; isolation: isolate; pointer-events: auto;
  transition: width 560ms var(--ease), min-height 460ms var(--ease), transform 560ms var(--ease), padding 460ms var(--ease);
}
.hdr-inner::before, .hdr-inner::after, .hdr-fx {
  content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity 420ms var(--ease);
}
/* Edge colour (a quiet gradient) and fill, both cut to the same shape. */
.hdr-inner::before { inset: 0; clip-path: var(--shape);
  background: linear-gradient(90deg, rgb(var(--acc-rgb) / .75), rgba(255, 255, 255, .34) 30%, rgb(var(--acc2-rgb) / .55) 62%, rgb(var(--acc-rgb) / .7)); }
.hdr-inner::after { inset: 1.5px;
  clip-path: polygon(calc(var(--cut) - .6px) 0, calc(100% - var(--cut) + .6px) 0, 100% 50%, calc(100% - var(--cut) + .6px) 100%, calc(var(--cut) - .6px) 100%, 0 50%);
  background:
    radial-gradient(48% 120% at 50% -30%, rgb(var(--acc-rgb) / .30), transparent 72%),
    radial-gradient(30% 140% at 0% 50%, rgb(var(--acc2-rgb) / .30), transparent 70%),
    radial-gradient(30% 140% at 100% 50%, rgb(var(--acc-rgb) / .24), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 46%),
    linear-gradient(90deg, #22165E, #3C24A0 34%, #2442A6 66%, #134C80); }
.hdr-fx { inset: 0; }
.hdr-sweep { position: absolute; inset: 1.5px; clip-path: var(--shape); overflow: hidden; }
.hdr-sweep::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16) 45%, rgba(255, 255, 255, .05) 60%, transparent);
  transform: translateX(-120%); animation: hdr-sweep 7.5s var(--ease) infinite; animation-play-state: paused; }
.hdr-edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hdr-edge path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: hdr-edge 9s linear infinite; animation-play-state: paused; }
.hdr-edge .e-glow { stroke: rgb(var(--acc-rgb)); stroke-width: 5; opacity: .32; stroke-dasharray: 80 420; }
.hdr-edge .e-core { stroke: #FFFFFF; stroke-width: 1.5; opacity: .95; stroke-dasharray: 46 454; animation-delay: -.1s; }
.hdr-fx::before, .hdr-fx::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 0 0 2px rgb(var(--acc-rgb) / .35), 0 0 14px 3px rgb(var(--acc-rgb) / .8); animation: hdr-node 2.8s ease-in-out infinite; animation-play-state: paused; }
.hdr-fx::before { left: -2px; }
.hdr-fx::after { right: -2px; animation-delay: -1.4s; box-shadow: 0 0 0 2px rgb(var(--acc2-rgb) / .35), 0 0 14px 3px rgb(var(--acc2-rgb) / .8); }
@keyframes hdr-sweep { 0%, 58% { transform: translateX(-120%); } 100% { transform: translateX(560%); } }
@keyframes hdr-edge { to { stroke-dashoffset: -1000; } }
@keyframes hdr-node { 0%, 100% { opacity: .55; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
/* Folded into the bar: on scroll, and always on pages without a scene behind the header. */
.site-header.is-stuck .hdr-inner, .site-header:not(.is-overlay) .hdr-inner, :root[data-theme="light"] .site-header .hdr-inner {
  width: min(100% - 20px, 1180px); min-height: var(--bar-h); transform: translateY(7px);
  padding-inline: calc(var(--cut) + 10px) calc(var(--cut) + 6px); gap: var(--s3);
  --text: #F5F7FC; --text-2: #D3DCF0; --line-2: rgba(214, 222, 255, .3); --line-3: rgba(214, 222, 255, .5);
  color: var(--text);
}
.site-header.is-stuck .hdr-inner::before, .site-header.is-stuck .hdr-inner::after, .site-header.is-stuck .hdr-fx,
.site-header:not(.is-overlay) .hdr-inner::before, .site-header:not(.is-overlay) .hdr-inner::after, .site-header:not(.is-overlay) .hdr-fx,
:root[data-theme="light"] .site-header .hdr-inner::before, :root[data-theme="light"] .site-header .hdr-inner::after, :root[data-theme="light"] .site-header .hdr-fx { opacity: 1; }
.site-header.is-stuck .hdr-fx *, .site-header.is-stuck .hdr-fx::before, .site-header.is-stuck .hdr-fx::after,
.site-header:not(.is-overlay) .hdr-fx *, .site-header:not(.is-overlay) .hdr-fx::before, .site-header:not(.is-overlay) .hdr-fx::after,
:root[data-theme="light"] .site-header .hdr-fx *, :root[data-theme="light"] .site-header .hdr-fx::before, :root[data-theme="light"] .site-header .hdr-fx::after { animation-play-state: running; }
.site-header.is-stuck .hdr-sweep::before, .site-header:not(.is-overlay) .hdr-sweep::before, :root[data-theme="light"] .site-header .hdr-sweep::before { animation-play-state: running; }
/* Over the homepage scene, before the page moves: open, with a faint shade for legibility. */
:root:not([data-theme="light"]) .site-header.is-overlay:not(.is-stuck) { background: linear-gradient(180deg, rgba(3, 6, 14, .34), rgba(3, 6, 14, 0)); --text: #F5F7FC; --text-2: #C9D5E3; --line-2: rgba(186, 201, 218, .28); --line-3: rgba(186, 201, 218, .45); }
.site-header.is-stuck { background: none; }
/* Light theme: a white prism with the world's colours on its edge. */
:root[data-theme="light"] .site-header .hdr-inner { --text: #0B1A33; --text-2: #34445C; --line-2: rgba(11, 26, 51, .2); --line-3: rgba(11, 26, 51, .34); }
:root[data-theme="light"] .hdr-inner::after { background:
    radial-gradient(48% 120% at 50% -30%, rgb(var(--acc-rgb) / .22), transparent 72%),
    linear-gradient(90deg, #FFFFFF, #F6F1FF 40%, #EEF4FF 70%, #FFFFFF); }
:root[data-theme="light"] .hdr-inner::before { background: linear-gradient(90deg, #7A6CF0, #B9A8FF 30%, #5FB7E8 62%, #7A6CF0); }
:root[data-theme="light"] .hdr-edge .e-core { stroke: #6A3BD2; }
:root[data-theme="light"] .hdr-sweep::before { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .9) 45%, transparent); }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
.dock-chip .i-on { display: none; }
.dock-chip[data-on] .i-on { display: block; }
.dock-chip[data-on] .i-off { display: none; }
:root[data-contrast="high"] .site-header { background: #000 !important; }
:root[data-contrast="high"] .hdr-inner::after { background: #000; }
:root[data-contrast="high"] .hdr-inner::before { background: #FFFFFF; }
:root[data-contrast="high"] .hdr-fx { display: none; }
:root[data-effects="off"] .hdr-fx, :root[data-motion="reduced"] .hdr-fx { display: none; }
@media (prefers-reduced-motion: reduce) { .hdr-fx { display: none; } .hdr-inner { transition: none; } }
.hdr-inner { width: var(--wide); min-height: var(--hdr-h); margin-inline: auto; display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; row-gap: 6px; padding-block: 4px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; text-decoration: none; color: inherit; flex: none; }
.brand img { width: 44px; height: auto; transition: width 460ms var(--ease), filter 460ms; }
.brand-name { font-family: var(--f-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -.02em; white-space: nowrap; transition: font-size 460ms var(--ease); }
@media (min-width: 1024px) { .brand img { width: 52px; } .brand-name { font-size: 1.625rem; } }
.site-header.is-stuck .brand img, .site-header:not(.is-overlay) .brand img, :root[data-theme="light"] .site-header .brand img { width: 38px; filter: drop-shadow(0 0 10px rgb(var(--acc-rgb) / .55)); }
.site-header.is-stuck .brand-name, .site-header:not(.is-overlay) .brand-name, :root[data-theme="light"] .site-header .brand-name { font-size: 1.3125rem; }
.hdr-nav { position: relative; isolation: isolate; display: none; margin-inline: auto; gap: clamp(2px, 1vw, 14px); }
.hdr-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 1rem; color: var(--text-2); text-decoration: none; white-space: nowrap;
  transition: color var(--t-fast);
}
.hdr-nav a:hover, .hdr-nav a[aria-current] { color: var(--text); }
.hdr-nav a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease);
}
.hdr-nav a[aria-current]::after { transform: scaleX(1); }
.hdr-nav a:hover::after { transform: scaleX(.4); }
.hdr-nav a[aria-current]:hover::after { transform: scaleX(1); }
/* With script: a lit plate slides to the hovered or focused link and settles back on the current one. */
.nav-ind { position: absolute; z-index: -1; left: 0; top: 50%; width: var(--ind-w, 0); height: 40px; translate: var(--ind-x, 0) -50%;
  border-radius: var(--r-pill); pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgb(var(--acc-rgb) / .2), rgb(var(--acc2-rgb) / .22));
  box-shadow: inset 0 0 0 1px rgb(var(--acc-rgb) / .45), inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 22px -6px rgb(var(--acc-rgb) / .9);
  transition: translate 460ms var(--ease), width 460ms var(--ease), opacity 260ms; }
.nav-ind::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 6px; height: 6px; margin-left: -3px; rotate: 45deg;
  background: var(--acc); box-shadow: 0 0 10px 2px rgb(var(--acc-rgb) / .8); }
.hdr-nav.has-ind .nav-ind { opacity: 1; }
.hdr-nav.has-ind a::after { display: none; }
:root[data-theme="light"] .nav-ind { background: linear-gradient(100deg, rgb(var(--acc-rgb) / .3), rgb(var(--acc2-rgb) / .3)); box-shadow: inset 0 0 0 1px rgba(106, 59, 210, .35); }
:root[data-theme="light"] .nav-ind::after { background: #6A3BD2; box-shadow: none; }
:root[data-contrast="high"] .nav-ind { background: none; box-shadow: inset 0 0 0 2px #FFFFFF; }
.hdr-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.site-header.is-stuck .icon-btn, .site-header:not(.is-overlay) .icon-btn { width: 40px; height: 40px; background: rgba(255, 255, 255, .08); border-color: rgba(214, 222, 255, .3); }
.site-header.is-stuck .icon-btn:hover, .site-header:not(.is-overlay) .icon-btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(214, 222, 255, .6); }
.site-header.is-stuck .hdr-community.btn, .site-header:not(.is-overlay) .hdr-community.btn { min-height: 40px; --btn-bg: rgba(255, 255, 255, .08); --btn-bd: rgb(var(--acc-rgb) / .55); }
@media (max-width: 1023.98px) { .hdr-inner { --cut: 14px; } }
.hdr-community { display: none !important; }
@media (min-width: 640px) { .hdr-community { display: inline-flex !important; } }
@media (min-width: 1024px) {
  .hdr-nav { display: flex; }
  .hdr-actions { margin-left: 0; }
  .hdr-menu { display: none; }
}
.hdr-community.btn { min-height: 44px; padding: 0 18px; font-size: .9375rem; --btn-bg: rgba(8, 13, 26, .5); --btn-bd: var(--line-3); }
:root[data-theme="light"] .site-header .hdr-community.btn { --btn-bg: #FFFFFF; --btn-bd: var(--line-3); }
:root[data-theme="light"] .site-header .icon-btn { background: #FFFFFF; border-color: var(--line-2); }

/* ---------- Dialogs (menu + preferences) ---------- */
dialog.sheet {
  padding: 0; border: 0; margin: 0; max-width: none; max-height: none; width: 100%; height: 100%;
  background: transparent; color: var(--text); overflow: hidden;
}
dialog.sheet::backdrop { background: rgba(2, 4, 10, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet-panel {
  position: absolute; inset: 0 0 0 auto; width: min(100%, 440px); height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--panel-2), var(--panel-solid)); border-left: 1px solid var(--line-2);
  padding: calc(10px + env(safe-area-inset-top)) calc(clamp(16px, 5vw, 26px) + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) clamp(16px, 5vw, 26px);
  box-shadow: -30px 0 80px -20px rgba(0, 0, 0, .7);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; margin-bottom: 4px; }
.sheet-head h2 { font-size: 1.375rem; }
dialog.sheet[open] .sheet-panel { animation: sheet-in 380ms var(--ease) both; }
dialog.sheet[open]::backdrop { animation: fade-in 260ms ease both; }
dialog.sheet.is-closing .sheet-panel { animation: sheet-out 200ms ease both; }
dialog.sheet.is-closing::backdrop { animation: fade-out 200ms ease both; }
@keyframes sheet-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-out { to { transform: translateX(24px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.menu-nav { display: grid; gap: 2px; margin: 4px 0 18px; }
.menu-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 0 6px;
  border-bottom: 1px solid var(--line); font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; text-decoration: none;
}
.menu-nav a[aria-current] { color: var(--acc-text); }
.menu-nav a .ic { width: 18px; height: 18px; color: var(--text-3); }
.menu-actions { display: grid; gap: 12px; }

.prefs-section { padding: 18px 0; border-top: 1px solid var(--line); }
.prefs-section:first-of-type { border-top: 0; padding-top: 6px; }
.prefs-section > h3, .prefs-section legend { font-family: var(--f-body); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 650; margin: 0 0 12px; padding: 0; }
.prefs-section fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.prefs-section fieldset + fieldset { margin-top: 16px; }
.pref-hint { color: var(--text-3); font-size: .875rem; line-height: 1.45; margin-top: 10px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .25); border: 1px solid var(--line); width: max-content; max-width: 100%; }
:root[data-theme="light"] .seg { background: var(--panel-2); }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; min-width: 44px; padding: 0 14px; border-radius: var(--r-pill); font-size: .9375rem; font-weight: 600; color: var(--text-2); transition: background-color var(--t-fast), color var(--t-fast); }
.seg span .ic { width: 16px; height: 16px; }
.seg input:checked + span { background: var(--text); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; cursor: pointer; font-weight: 550; }
.switch input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 50px; height: 30px; margin: 0; border-radius: 30px; background: var(--panel-3); border: 1px solid var(--line-3); cursor: pointer; transition: background-color var(--t-fast); }
.switch input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--text-2); transition: transform var(--t-fast) var(--ease), background-color var(--t-fast); }
.switch input:checked { background: rgb(var(--acc-rgb) / .9); border-color: transparent; }
.switch input:checked::before { transform: translateX(20px); background: #061018; }
.switch + .switch { border-top: 1px solid var(--line); }
.lang-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.lang-list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(0, 0, 0, .18); text-decoration: none; font-weight: 550; }
.lang-list a[aria-current] { border-color: rgb(var(--acc-rgb) / .7); background: rgb(var(--acc-rgb) / .1); }
.lang-list a .ic { width: 16px; height: 16px; color: var(--acc-text); }
:root[data-theme="light"] .lang-list a { background: var(--panel); }

/* ---------- Footer ---------- */
.site-footer { position: relative; margin-top: var(--s8); padding: var(--s7) 0 calc(var(--s6) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.site-footer::before { /* a thin prismatic seam */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(var(--acc-rgb) / .55), rgb(var(--acc2-rgb) / .45), transparent);
}
.ft-inner { width: var(--content); margin-inline: auto; }
.ft-top { display: grid; gap: var(--s6); }
.ft-brand .brand { margin-bottom: 14px; }
.ft-tag { font-size: 1.0625rem; line-height: 1.5; max-width: 34ch; }
.ft-note { margin-top: 14px; color: var(--text-3); font-size: .875rem; max-width: 34ch; }
.ft-groups { display: grid; }
.ft-group { border-top: 1px solid var(--line); }
.ft-group:last-child { border-bottom: 1px solid var(--line); }
.ft-group > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer;
  font-family: var(--f-display); font-weight: 650; font-size: 1rem;
}
.ft-group > summary::-webkit-details-marker { display: none; }
.ft-group > summary .ic { width: 18px; height: 18px; color: var(--text-3); transition: transform var(--t-fast) var(--ease); }
.ft-group[open] > summary .ic { transform: rotate(90deg); }
.ft-group ul { list-style: none; display: grid; gap: 2px; padding: 0 0 14px; }
.ft-group a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-2); text-decoration: none; font-size: .9375rem; overflow-wrap: anywhere; }
.ft-group a:hover { color: var(--text); text-decoration: underline; }
@media (min-width: 900px) {
  .ft-top { grid-template-columns: minmax(220px, 1.1fr) 3.6fr; gap: var(--s7); }
  .ft-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
  .ft-group, .ft-group:last-child { border: 0; }
  .ft-group > summary { min-height: 40px; cursor: default; pointer-events: none; }
  .ft-group > summary .ic { display: none; }
  .ft-group ul { padding: 4px 0 0; }
}
.ft-dock { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }
.ft-dock-label { font-weight: 650; font-size: .9375rem; margin-right: 8px; }
.dock-chip, .lang-menu > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); font-size: .875rem; font-weight: 550; text-decoration: none; cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.dock-chip:hover, .lang-menu > summary:hover { border-color: var(--line-3); color: var(--text); }
.dock-chip .ic, .lang-menu > summary .ic { width: 16px; height: 16px; }
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu-list { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 5; min-width: 220px; max-height: min(60vh, 420px); overflow: auto; display: grid; gap: 2px; padding: 8px; border-radius: var(--r-md); background: var(--panel-solid); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); }
.lang-menu-list a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; font-size: .9375rem; }
.lang-menu-list a:hover { background: var(--panel-2); }
.lang-menu-list a[aria-current] { color: var(--acc-text); font-weight: 650; }
.lang-menu-list a .ic { width: 16px; height: 16px; }
.ft-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: var(--s5); color: var(--text-3); font-size: .8125rem; }
html:not(.js) .needs-js { display: none !important; }

/* ---------- Subpage shell ---------- */
.page-hero { position: relative; isolation: isolate; padding: clamp(24px, 4.5vw, 64px) 0 clamp(28px, 4vw, 48px); overflow: hidden; }
.page-hero::before { /* quiet tinted backdrop */
  content: ""; position: absolute; inset: 0 0 -1px; z-index: -2;
  background:
    radial-gradient(60% 90% at 12% 0%, rgb(var(--acc-rgb) / .16), transparent 70%),
    radial-gradient(50% 80% at 88% 10%, rgb(var(--acc2-rgb) / .14), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--w-base) 70%, var(--bg)), var(--bg));
}
:root[data-theme="light"] .page-hero::before {
  background: radial-gradient(60% 90% at 12% 0%, rgb(var(--acc-rgb) / .24), transparent 70%), radial-gradient(50% 80% at 88% 10%, rgb(var(--acc2-rgb) / .22), transparent 70%), linear-gradient(180deg, #EFE9DF, var(--bg));
}
.page-hero .aurora-line { /* one slow veil, very low opacity */
  position: absolute; z-index: -1; left: -20%; right: -20%; top: -40%; height: 120%; pointer-events: none; opacity: .5;
  background: conic-gradient(from 200deg at 50% 60%, transparent 0 20%, rgb(var(--acc-rgb) / .12) 28%, transparent 36% 64%, rgb(var(--acc2-rgb) / .1) 72%, transparent 80%);
  animation: veil 26s ease-in-out infinite alternate;
}
@keyframes veil { from { transform: translate3d(-3%, 0, 0) rotate(-2deg); } to { transform: translate3d(3%, 2%, 0) rotate(2deg); } }
.page-hero-in { display: grid; gap: 0; }
.page-hero h1 { font-size: clamp(2.125rem, 1.5rem + 3vw, 3.5rem); line-height: 1.06; letter-spacing: -.035em; margin: 14px 0 0; max-width: 22ch; }
.page-hero .eyebrow { margin-top: 18px; }
.page-hero .eyebrow + h1 { margin-top: 10px; }
.page-hero .lede { margin-top: 14px; }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; color: var(--text-3); font-size: .875rem; }
.page-meta .ic { width: 16px; height: 16px; }
.page-meta span { display: inline-flex; align-items: center; gap: 6px; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .875rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); }
.crumbs li + li::before { content: "/"; opacity: .55; margin-right: 4px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 36px; color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); font-weight: 600; }
.back-link { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(0, 0, 0, .2); color: var(--text); text-decoration: none; font-weight: 600; }
.back-link .ic { width: 16px; height: 16px; }
:root[data-theme="light"] .back-link { background: var(--panel); }

.page-body { padding-bottom: var(--s6); }
.section { padding: clamp(40px, 6vw, 80px) 0 0; }
.section-head { display: grid; gap: 10px; margin-bottom: clamp(20px, 3vw, 32px); }
.section-head h2 { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); letter-spacing: -.03em; max-width: 26ch; }

.panel {
  position: relative; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--panel);
  box-shadow: var(--shadow-1); padding: clamp(20px, 3vw, 32px);
}
.panel-tight { padding: clamp(16px, 2.4vw, 24px); }
.panel h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); }
.panel h3 { font-size: 1.125rem; }
.panel > * + * { margin-top: 12px; }
.panel p, .panel li { color: var(--text-2); }
.panel ul:not([role]), .panel ol:not([role]) { padding-left: 1.2em; display: grid; gap: 6px; }
.panel a:not(.btn) { color: var(--acc-text); }
.grid-2 { display: grid; gap: var(--s5); }
.grid-3 { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Long-form documents (legal, help, payments). */
.doc { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 1024px) { .doc { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s7); } }
.doc-toc { position: relative; min-width: 0; }
@media (min-width: 1024px) { .doc-toc { position: sticky; top: calc(var(--hdr-h) + 24px); max-height: calc(100vh - var(--hdr-h) - 48px); overflow: auto; } }
.doc-toc details { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.doc-toc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 18px; cursor: pointer; font-weight: 650; }
.doc-toc summary::-webkit-details-marker { display: none; }
.doc-toc summary .ic { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.doc-toc details[open] summary .ic { transform: rotate(90deg); }
.doc-toc ol { list-style: none; counter-reset: toc; padding: 0 10px 12px; display: grid; gap: 2px; }
.doc-toc li { counter-increment: toc; }
.doc-toc a { display: flex; gap: 10px; align-items: baseline; min-height: 40px; padding: 9px 10px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-size: .9375rem; line-height: 1.35; }
.doc-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--f-mono); font-size: .75rem; color: var(--text-3); }
.doc-toc a:hover { background: var(--panel-2); color: var(--text); }
.doc-toc a.is-current { color: var(--text); background: rgb(var(--acc-rgb) / .1); }
@media (min-width: 1024px) { .doc-toc summary { pointer-events: none; } .doc-toc summary .ic { display: none; } }
.doc-main { min-width: 0; display: grid; gap: var(--s5); }
.doc-sec {
  min-width: 0; scroll-margin-top: calc(var(--hdr-h) + 20px);
  border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--panel);
  padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow-1);
}
.doc-sec:target { border-color: rgb(var(--acc-rgb) / .6); box-shadow: 0 0 0 3px rgb(var(--acc-rgb) / .18), var(--shadow-1); }
.doc-sec > h2 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.25rem, 1.1rem + .8vw, 1.75rem); letter-spacing: -.025em; margin-bottom: 14px; }
.doc-sec > h2 .n { font-family: var(--f-mono); font-size: .8125rem; font-weight: 500; color: var(--acc-text); letter-spacing: .04em; flex: none; }
.doc-sec h3 { font-size: 1.125rem; margin: 22px 0 8px; scroll-margin-top: calc(var(--hdr-h) + 20px); }
.doc-sec p, .doc-sec li { color: var(--text-2); }
.doc-sec > * + * { margin-top: 12px; }
.doc-sec > h2 + * { margin-top: 0; }
.doc-sec > h3 { margin-top: 24px; }
.doc-sec > h3 + * { margin-top: 0; }
.doc-sec strong { color: var(--text); font-weight: 650; }
.doc-sec ul:not([role]), .doc-sec ol:not([role]) { padding-left: 1.25em; display: grid; gap: 8px; }
.doc-sec li::marker { color: var(--acc-text); }
.doc-sec a:not(.btn) { color: var(--acc-text); }
.doc-sec a:not(.btn):hover { text-decoration-thickness: 2px; }

.callout { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid rgb(var(--acc-rgb) / .35); background: rgb(var(--acc-rgb) / .07); color: var(--text); }
.callout > .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--acc-text); }
.callout p { color: var(--text-2); }
.callout strong { color: var(--text); }
.callout.is-warn { border-color: rgba(255, 209, 138, .45); background: var(--warn-bg); }
.callout.is-warn > .ic { color: var(--warn); }
:root[data-theme="light"] .callout.is-warn { border-color: #E9C27B; }

.status-msg { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); }
.status-msg > .ic { width: 20px; height: 20px; margin-top: 1px; }
.status-msg.is-ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-bg); }
.status-msg.is-ok > .ic { color: var(--ok); }
.status-msg.is-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-bg); }
.status-msg.is-warn > .ic { color: var(--warn); }
.status-msg.is-bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bad-bg); }
.status-msg.is-bad > .ic { color: var(--bad); }
.status-msg p { color: var(--text-2); }
.status-msg p strong, .status-msg > div > strong { color: var(--text); }

.badge { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 650; line-height: 1; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text-2); white-space: nowrap; width: max-content; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge.is-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-bg); }
.badge.is-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-bg); }
.badge.is-ok .dot { animation: live-dot 2.4s ease-out infinite; }
@keyframes live-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

/* Step list. */
.steps { list-style: none; display: grid; gap: 0; counter-reset: step; }
.steps > li { position: relative; display: grid; grid-template-columns: 46px 1fr; align-content: start; gap: 4px 12px; padding: 22px 0; border-top: 1px solid var(--line); }
.steps > li::before { counter-increment: step; content: counter(step, decimal-leading-zero); grid-row: span 2; font-family: var(--f-mono); font-size: .875rem; color: var(--acc-text); padding-top: 5px; }
.steps h3 { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); letter-spacing: -.02em; }
.steps p { color: var(--text-2); }
@media (min-width: 900px) {
  .steps.is-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
  .steps.is-row > li { border-top: 1px solid var(--line-2); }
  .steps.is-row > li::after { /* connector light that draws in on reveal */
    content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
    background: linear-gradient(90deg, rgb(var(--acc-rgb) / .9), rgb(var(--acc2-rgb) / .5), transparent);
    transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ease);
  }
  .steps.is-row.is-in > li::after, html:not(.js) .steps.is-row > li::after { transform: scaleX(1); }
  .steps.is-row.is-in > li:nth-child(2)::after { transition-delay: 160ms; }
  .steps.is-row.is-in > li:nth-child(3)::after { transition-delay: 320ms; }
}

/* FAQ. */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); transition: border-color var(--t-fast); scroll-margin-top: calc(var(--hdr-h) + 20px); }
.faq details[open] { border-color: rgb(var(--acc-rgb) / .45); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 20px; cursor: pointer; font-weight: 650; font-size: 1.0625rem; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { width: 20px; height: 20px; flex: none; color: var(--text-3); transition: transform var(--t-med) var(--ease); }
.faq details[open] summary .ic { transform: rotate(45deg); color: var(--acc-text); }
.faq .faq-a { padding: 0 20px 18px; color: var(--text-2); }
.faq .faq-a > * + * { margin-top: 10px; }
.faq .faq-a a { color: var(--acc-text); }

/* Data tables: a labelled scroll region on wide screens, readable blocks on phones. */
.table-wrap { position: relative; overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); }
table.data { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.data caption { text-align: left; padding: 14px 16px 0; color: var(--text-3); font-size: .8125rem; caption-side: top; }
table.data th, table.data td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
table.data thead th { font-size: .8125rem; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); font-weight: 650; background: var(--panel-2); }
table.data tbody tr:last-child > * { border-bottom: 0; }
table.data td { color: var(--text-2); }
table.data td strong, table.data th[scope="row"] { color: var(--text); font-weight: 650; }
@media (max-width: 719.98px) {
  table.data.is-stack, table.data.is-stack tbody, table.data.is-stack tr, table.data.is-stack td, table.data.is-stack th[scope="row"] { display: block; width: 100%; }
  /* The caption has to leave table layout with the table. Left as a table-caption
     inside a block table it shrank to one character wide and stacked the words
     "Withdrawals by app…" one letter per line on the payment records page. */
  table.data.is-stack caption { display: block; width: auto; padding: 14px 16px 6px; }
  table.data.is-stack thead { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  table.data.is-stack thead tr, table.data.is-stack thead th { display: block; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; }
  table.data.is-stack tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.data.is-stack tbody tr:last-child { border-bottom: 0; }
  table.data.is-stack th[scope="row"] { border: 0; padding: 8px 16px 4px; font-size: 1rem; }
  table.data.is-stack td { border: 0; padding: 6px 16px; display: grid; grid-template-columns: minmax(104px, 40%) 1fr; gap: 10px; }
  table.data.is-stack td::before { content: attr(data-label); color: var(--text-3); font-size: .8125rem; font-weight: 600; }
  table.data.is-stack td[colspan] { grid-template-columns: 1fr; }
  table.data.is-stack td[colspan]::before { display: none; }
  .table-wrap.has-stack { overflow: visible; }
}

/* Key–value rows (rules at a glance). */
.kv { display: grid; gap: 0; margin: 0; }
.kv > div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.kv > div:first-child { border-top: 0; padding-top: 0; }
.kv dt { font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); font-weight: 650; }
.kv dd { margin: 0; color: var(--text-2); }
.kv dd strong { color: var(--text); }
@media (min-width: 760px) { .kv > div { grid-template-columns: 200px 1fr; gap: 16px; } }

/* Resource row link (homepage + help). */
.res-link { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; text-decoration: none; color: var(--text); border-radius: var(--r-md); transition: background-color var(--t-fast); }
.res-link:hover { background: rgba(255, 255, 255, .045); }
:root[data-theme="light"] main :not(.scope-dark) .res-link:hover { background: var(--panel-2); }
.res-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: var(--acc-text); background: rgb(var(--acc-rgb) / .08); border: 1px solid rgb(var(--acc-rgb) / .22); transition: transform var(--t-med) var(--ease); }
.res-ic .ic { width: 20px; height: 20px; }
.res-link:hover .res-ic { transform: translateY(-2px) rotate(-4deg); }
.res-tx { display: grid; gap: 2px; min-width: 0; flex: 1; }
.res-tx b { font-weight: 650; font-size: 1rem; line-height: 1.3; }
.res-tx small { color: var(--text-2); font-size: .875rem; line-height: 1.35; }
.res-go { width: 18px; height: 18px; color: var(--text-3); transition: transform var(--t-fast) var(--ease), color var(--t-fast); }
.res-link:hover .res-go { transform: translateX(3px); color: var(--text); }
.res-list { display: grid; gap: 6px; }
.res-list.is-boxed { padding: 6px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--panel); }

/* App directory tiles. */
.app-tiles { display: grid; gap: var(--s5); }
@media (min-width: 800px) { .app-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.app-tile { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow-1); transition: transform var(--t-med) var(--ease), border-color var(--t-med); }
@media (hover: hover) { .app-tile:hover { transform: translateY(-4px); border-color: rgb(var(--acc-rgb) / .5); } }
.app-tile-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--w-base); }
.app-tile-art > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.04); transition: transform 900ms var(--ease); }
.app-tile:hover .app-tile-art > img:first-child { transform: scale(1.09); }
.app-tile-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--w-base) 80%, transparent)); }
.app-tile-logo { position: absolute; left: 50%; top: 44%; width: 30%; max-width: 116px; transform: translate(-50%, -50%); z-index: 1; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55)); }
.app-tile-body { display: grid; align-content: start; gap: 10px; padding: 20px; }
.app-tile-body h2 { font-size: 1.5rem; letter-spacing: -.025em; }
.app-tile-body h2 a { text-decoration: none; }
.app-tile-body h2 a:hover { text-decoration: underline; }
.app-tile-body p { color: var(--text-2); }
.app-tile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* Decorative app icon grid (app pages). */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; list-style: none; }
.icon-grid li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); }
.icon-grid img { width: 48px; height: 48px; object-fit: contain; flex: none; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); transition: transform var(--t-med) var(--ease); }
.icon-grid li:hover img { transform: translateY(-3px) rotate(-5deg) scale(1.05); }
.icon-grid b { display: block; font-weight: 650; }
.icon-grid small { display: block; color: var(--text-2); font-size: .875rem; line-height: 1.4; }

/* Forms. */
.field { display: grid; gap: 8px; }
.field > label, .field > .label { font-weight: 650; font-size: .9375rem; }
.field input[type="text"], .field input[type="search"], .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line-3); background: var(--panel-2); color: var(--text); font-size: 1rem;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--focus); }
.field .hint { color: var(--text-3); font-size: .875rem; }
.field .err { color: var(--bad); font-size: .875rem; font-weight: 600; }
.field[data-invalid] input, .field[data-invalid] textarea, .field[data-invalid] select { border-color: var(--bad); }
.input-affix { display: flex; align-items: center; border-radius: var(--r-md); border: 1px solid var(--line-3); background: var(--panel-2); }
.input-affix:focus-within { border-color: var(--focus); }
.input-affix > span { padding-left: 14px; color: var(--text-3); font-weight: 600; }
.input-affix input { border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; }
.search-field { position: relative; }
.search-field .ic { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search-field input { padding-left: 44px !important; }

/* Reviews. */
.rv-summary { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 760px) { .rv-summary { grid-template-columns: auto 1fr; gap: var(--s7); } }
.rv-avg { font-family: var(--f-display); font-size: 3.5rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.rv-avg small { display: block; margin-top: 8px; font-family: var(--f-body); font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.rv-bars { display: grid; gap: 8px; list-style: none; }
.rv-bar { display: grid; grid-template-columns: 40px 1fr 48px; align-items: center; gap: 12px; font-size: .875rem; color: var(--text-2); }
.rv-bar i { height: 8px; border-radius: 8px; background: var(--panel-3); overflow: hidden; }
.rv-bar b { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--acc-2), var(--acc)); }
.stars { letter-spacing: 2px; color: #FFD18A; }
:root[data-theme="light"] .stars { color: #9A5B00; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row a, .chip-row button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text-2); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.chip-row a[aria-current], .chip-row button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.rv-list { list-style: none; display: grid; gap: 12px; }
.rv-item { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); padding: 18px 20px; display: grid; gap: 8px; }
.rv-item h3 { font-size: 1.0625rem; }
.rv-item p { color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; }
.rv-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text-3); font-size: .8125rem; }
.rv-label { padding: 2px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); }
.rv-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-pick button { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); font-size: 1.375rem; color: var(--text-3); transition: transform var(--t-fast) var(--ease), color var(--t-fast); }
.rv-pick button.on { color: #FFD18A; border-color: rgba(255, 209, 138, .5); }
:root[data-theme="light"] .rv-pick button.on { color: #9A5B00; }
.rv-pick button:hover { transform: translateY(-2px); }
.form-grid { display: grid; gap: 16px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.err-summary { border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--bad) 50%, transparent); background: var(--bad-bg); padding: 14px 16px; }
.err-summary h3 { font-size: 1rem; color: var(--bad); }
.err-summary ul { margin-top: 6px; padding-left: 1.2em; }
.err-summary a { color: var(--text); }

/* Pager / the way back at the end of long pages. */
.page-end { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s6); }

/* ---------- Reveal on first view (transform + opacity only) ---------- */
html.js .reveal { opacity: 0; transform: translateY(12px); }
html.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 420ms var(--ease), transform 420ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }

/* ---------- Cross-page transitions (native, the browser decides support) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: ease; }

/* ---------- Motion preferences: the system setting always wins ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html.js .reveal { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
:root[data-motion="reduced"].js .reveal { opacity: 1; transform: none; }
:root[data-effects="off"] .aurora-line, :root[data-contrast="high"] .aurora-line { display: none; }
:root[data-effects="off"] .btn::after { display: none; }

@media print {
  .site-header, .site-footer, .doc-toc, dialog, .aurora-line { display: none !important; }
  body { background: #fff; color: #000; }
  .doc-sec, .panel { border: 1px solid #ccc; box-shadow: none; background: #fff; }
}
.doc-sec .chip-row a { color: var(--text-2); }
.doc-sec .chip-row a[aria-current] { color: var(--bg); }
/* Long unbroken tokens (addresses, storage keys) wrap inside table cells instead of widening the page. */
table.data th, table.data td, .kv dd, .doc-sec code { overflow-wrap: anywhere; }
/* The language list anchors to the dock, so on a narrow screen it opens inside the page instead of past its edge. */
.ft-dock { position: relative; }
.lang-menu { position: static; }
.lang-menu-list { left: 0; max-width: 100%; }

/* Very large text (browser text zoom, the Larger setting): long words break instead of widening the page,
   and the header wraps onto a second line rather than pushing its controls off screen. */
body { overflow-wrap: anywhere; }
.site-header { height: auto; min-height: var(--hdr-h); }
.brand-name { white-space: normal; }
:root[data-textsize="larger"] .hdr-community { display: none !important; }

/* ---------- "Open in Telegram": the one button that leaves for the app ----------
   A flowing gradient, a light circling its edge, a pulse ring, a sweep of light every few
   seconds, a paper plane that takes off on hover and sparks where it is pressed (site.js).
   All of it is decoration over an ordinary link; effects Off or reduced motion leave the plain button. */
@property --tg-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn-tg { overflow: visible;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .4) 50%, transparent 62%) -160% 0 / 55% 100% no-repeat,
    linear-gradient(100deg, var(--cta-a), var(--cta-b) 50%, var(--cta-a)) 0 0 / 200% 100%;
  animation: tg-flow 6s linear infinite; }
@keyframes tg-flow { 0% { background-position: -160% 0, 0% 0; } 30% { background-position: 260% 0, 60% 0; } 100% { background-position: 260% 0, 200% 0; } }
.btn-tg .tg-ring { position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--tg-ang), transparent 0 62%, rgba(255, 255, 255, .95) 76%, #9EE8FF 84%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: tg-spin 3.4s linear infinite; }
@keyframes tg-spin { to { --tg-ang: 360deg; } }
.btn-tg::after, .btn-tg:hover::after, .btn-tg:focus-visible::after { /* the sweep of .btn becomes a pulse ring outside the button */
  inset: 0; border-radius: inherit; background: none; border: 2px solid color-mix(in srgb, var(--cta-b) 55%, #FFFFFF);
  transform: none; transition: none; opacity: 0; animation: tg-pulse 2.8s var(--ease) infinite; }
@keyframes tg-pulse { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.08, 1.55); } }
.btn-tg .ic { transform-origin: 50% 50%; }
@media (hover: hover) { .btn-tg:hover .ic { animation: tg-plane 900ms var(--ease) both; } }
@keyframes tg-plane { 0% { transform: none; opacity: 1; } 40% { transform: translate(22px, -18px) rotate(-14deg) scale(.7); opacity: 0; } 41% { transform: translate(-20px, 16px) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
.tg-burst { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.tg-burst::before { content: ""; position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .6), transparent); animation: tg-flash 600ms ease-out forwards; }
.tg-burst i { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 0 8px 2px rgba(158, 232, 255, .9); animation: tg-spark 760ms var(--ease) forwards; }
@keyframes tg-spark { from { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)) scale(.2); opacity: 0; } }
@keyframes tg-flash { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
:root[data-effects="reduced"] .btn-tg::after { display: none; }
:root[data-effects="off"] .btn-tg, :root[data-contrast="high"] .btn-tg { animation: none; background: linear-gradient(100deg, var(--cta-a), var(--cta-b)); }
:root[data-effects="off"] .btn-tg .tg-ring, :root[data-contrast="high"] .btn-tg .tg-ring, :root[data-contrast="high"] .btn-tg::after { display: none; }
:root[data-contrast="high"] .btn-tg { background: #3B44C9; }
@media (prefers-reduced-motion: reduce) { .btn-tg { animation: none; } .btn-tg .tg-ring, .btn-tg::after, .tg-burst { display: none; } }

/* Which app a review is about (reviews.php and the homepage slideshow, 2026-11-04). */
.rv-app { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: .75rem; font-weight: 700;
  letter-spacing: .02em; color: var(--acc-text); background: rgb(var(--acc-rgb) / .1); border: 1px solid rgb(var(--acc-rgb) / .3); }

/* ---------- Lite: effects off, the default since 2026-11-05 ----------
   Older phones manage about 20 frames a second. With effects off nothing on the page moves by itself, nothing is
   blurred behind, nothing changing size is tweened (the sticky header used to animate its width and font size on
   every scroll), and big glows become plain edges — so every frame stays cheap. Full and Reduced are unchanged. */
:root[data-effects="off"] { view-transition-name: none; }
:root[data-effects="off"] .hdr-inner, :root[data-effects="off"] .site-header .brand img, :root[data-effects="off"] .brand-name { transition: none; }
:root[data-effects="off"] .site-header .brand img, :root[data-effects="off"] .app-tile-logo, :root[data-effects="off"] .icon-grid img { filter: none; }
:root[data-effects="off"] dialog.sheet::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(2, 4, 10, .8); }
:root[data-effects="off"] .btn { transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
:root[data-effects="off"] .btn:hover, :root[data-effects="off"] .btn:active { transform: none; }
:root[data-effects="off"] .btn-cta, :root[data-effects="off"] .btn-cta:hover, :root[data-effects="off"] .btn-tg { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26); }
:root[data-effects="off"] .btn-accent { box-shadow: none; }
:root[data-effects="off"] .lang-menu-list { box-shadow: 0 10px 22px rgba(0, 0, 0, .4); }
:root[data-effects="off"].js .reveal, :root[data-effects="off"].js .reveal.is-in { opacity: 1; transform: none; transition: none; }