/* Moon Platform — the whole site's look. Tokens and rules: DESIGN.md. */


:root {
  color-scheme: dark;

  --ink-950: #03040a;
  --ink-900: #070915;
  --ink-800: #0e1230;
  --lunar-700: #2a3566;
  --lunar-500: #5d73c4;
  --lunar-300: #a9b8ea;
  --lunar-100: #dfe5fa;
  --moonlight: #f4f6ff;
  --accent: #9fb6ff;
  --accent-hover: #c8d5ff;
  --eclipse: #ffbf73;

  --exon-violet: #8b7cf8;
  --exon-blue: #4f7cff;
  --neon-pink: #ff3fa4;
  --neon-green: #39ff9a;
  --cyber: #3fd0ff;
  --cyber-deep: #2a6bff;

  --text-primary: var(--moonlight);
  --text-body: var(--lunar-100);
  --text-muted: var(--lunar-300);
  --line: rgba(169, 184, 234, .14);
  --line-strong: rgba(169, 184, 234, .3);

  --sans: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Display", Roboto, "Noto Sans", Tahoma, sans-serif;
  /* Persian: Calibri, as the owner asked (7 Oct 2026). It is Windows' own and carries Persian; it may
     not be served from a website (Microsoft's licence), so a phone without it uses its own Persian face. */
  --fa: Calibri, "Segoe UI", Tahoma, "Noto Sans Arabic UI", "Noto Sans Arabic", "Noto Naskh Arabic", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px; --s32: 128px; --s40: 160px;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius-card: 28px;

  --ease-std: cubic-bezier(.2, .7, .2, 1);
  --ease-emph: cubic-bezier(.16, 1, .3, 1);

  --bg: var(--ink-950);
  --glass-tint: linear-gradient(160deg, rgba(36, 44, 92, .42), rgba(8, 10, 24, .62));
  --glass-blur: blur(20px) saturate(150%);
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, .09);
  --glass-glow: 0 30px 80px -30px rgba(93, 115, 196, .45);
  --glass-edge: rgba(223, 229, 250, .45), rgba(169, 184, 234, .08) 38%, transparent 62%;
  --capsule-bg: rgba(14, 18, 40, .38);
  --capsule-bg-floating: rgba(10, 13, 30, .62);
  --capsule-blur: blur(22px) saturate(160%);
  --soft-blur: blur(12px);
  --game-bg: linear-gradient(160deg, rgba(40, 8, 40, .55), rgba(4, 6, 14, .7));
  --tile-bg: linear-gradient(160deg, rgba(10, 40, 70, .45), rgba(4, 8, 20, .66));
  /* the moon in the mark: lit from the top left */
  --mark-a: #ffffff; --mark-b: #dfe5fa; --mark-c: #7d92d9;
}

*, *::before, *::after { box-sizing: border-box; }
/* clip, not hidden: nothing that slides in from the side (a card, a turned device) may widen the page
   a phone lays out — and clip makes no scroll container, so pinning still works */
html { background: var(--bg); -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  /* no background of its own: the sky and the scene sit under it (negative z-index), and a body
     background would paint over them */
  margin: 0; min-height: 100dvh; background: transparent; color: var(--text-body);
  font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body[data-lang="fa"] { direction: rtl; font-family: var(--fa); line-height: 1.9; }

body:not([data-lang="en"]) [data-l="en"],
body:not([data-lang="fa"]) [data-l="fa"] { display: none !important; }

a { color: var(--accent); text-decoration: none; transition: color 140ms ease-out; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
img, svg, canvas { display: block; }
/* a picture keeps its shape: the height written on the tag never wins over the width it is given */
img { height: auto; }
button { font: inherit; color: inherit; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body[data-lang="fa"] .icon--dir { transform: scaleX(-1); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: fixed; inset-inline-start: var(--s4); top: -64px; z-index: 80; background: var(--moonlight); color: var(--ink-950); padding: var(--s2) var(--s4); border-radius: 999px; }
.skip:focus { top: var(--s4); }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ------------------------------------------------------------------ the sky: one layer per part of the page */

.sky { position: fixed; inset: 0; z-index: -3; pointer-events: none; background: var(--bg); }
.sky > div { position: absolute; inset: 0; opacity: 0; transition: opacity 300ms linear; will-change: opacity; }
.sky__hero { opacity: 1; background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(93, 115, 196, .26), transparent 70%),
  radial-gradient(ellipse 90% 60% at 50% 120%, rgba(14, 18, 48, .9), transparent 70%); }
.sky__apps { background: radial-gradient(ellipse 70% 60% at 25% 30%, rgba(124, 92, 246, .32), transparent 70%),
  radial-gradient(ellipse 60% 55% at 85% 75%, rgba(52, 102, 255, .28), transparent 70%); }
.sky__games { background: radial-gradient(ellipse 55% 50% at 80% 25%, rgba(255, 46, 160, .22), transparent 70%),
  radial-gradient(ellipse 55% 50% at 15% 80%, rgba(40, 255, 150, .14), transparent 70%), rgba(2, 2, 6, .6); }
.sky__tools { background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(40, 170, 255, .22), transparent 70%),
  linear-gradient(rgba(63, 208, 255, .05) 1px, transparent 1px) 0 0 / 56px 56px,
  linear-gradient(90deg, rgba(63, 208, 255, .05) 1px, transparent 1px) 0 0 / 56px 56px; }
canvas.scene { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; }
.no-webgl canvas.scene { display: none; }
.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------ glass */

.glass {
  position: relative;
  background: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--glass-sheen), var(--glass-glow);
}
.glass::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(215deg, var(--glass-edge));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
body[data-lang="fa"] .glass::before { background: linear-gradient(145deg, var(--glass-edge)); }

/* ------------------------------------------------------------------ the capsule */

.top { position: fixed; top: var(--s4); inset-inline: 0; z-index: 50; display: flex; justify-content: center; padding: 0 var(--gutter); pointer-events: none; }
.capsule {
  pointer-events: auto; display: flex; align-items: center; gap: var(--s1); padding: 6px; border-radius: 999px;
  background: var(--capsule-bg); -webkit-backdrop-filter: var(--capsule-blur); backdrop-filter: var(--capsule-blur);
  border: 1px solid rgba(223, 229, 250, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 20px 50px -20px rgba(0, 0, 0, .7);
  transition: background 300ms var(--ease-std), box-shadow 300ms var(--ease-std);
}
.capsule.is-floating { background: var(--capsule-bg-floating); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 60px -18px rgba(0, 0, 0, .85); }
.capsule__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.capsule__mark svg { width: 26px; height: 26px; filter: drop-shadow(0 0 10px rgba(159, 182, 255, .6)); }
.capsule__tabs { display: flex; gap: var(--s1); }
.tab {
  display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s4); border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(223, 229, 250, .06); color: var(--lunar-100); font-size: 14px; font-weight: 500; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(223, 229, 250, .07); transition: background 160ms ease-out, color 160ms ease-out;
}
.tab:hover { background: rgba(223, 229, 250, .14); color: var(--moonlight); }
.tab[aria-current="true"] { background: rgba(223, 229, 250, .18); color: #fff; }
.tab kbd { font: 500 11px/1 var(--mono); padding: 3px 6px; border-radius: 6px; background: rgba(223, 229, 250, .1); color: var(--lunar-300); }
.tab--lang { font-family: var(--fa); min-width: 46px; justify-content: center; padding: 0 var(--s3); }
.tab--theme { width: 40px; padding: 0; justify-content: center; }
/* the sun shows on the dark page (it brings the light one), the moon on the light page */
[data-theme="light"] .when-dark, :root:not([data-theme="light"]) .when-light { display: none !important; }
.capsule__cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 var(--s5); border-radius: 999px; margin-inline-start: var(--s1);
  background: #0b0d18; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(223, 229, 250, .22), 0 0 24px -6px rgba(159, 182, 255, .55);
}
.capsule__cta:hover { color: #fff; background: #12162a; }
.capsule__menu { display: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(223, 229, 250, .08); cursor: pointer; place-items: center; }
.menu[hidden] { display: none; }
.menu { position: fixed; top: 76px; inset-inline: var(--gutter); z-index: 49; border-radius: 26px; padding: var(--s4); display: grid; gap: var(--s2); }
.menu a, .menu button { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 var(--s4); border-radius: 14px;
  background: rgba(223, 229, 250, .05); color: var(--moonlight); border: 0; font-size: 16px; cursor: pointer; text-align: start; }
@media (max-width: 860px) {
  .capsule__tabs, .capsule .tab--lang, .capsule .tab--theme { display: none; }
  .capsule__menu { display: grid; }
  .capsule { width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------------ type */

.hud { font: 500 12px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
body[data-lang="fa"] .hud { font-family: var(--fa); letter-spacing: 0; font-size: 14px; text-transform: none; }
.display {
  font-size: clamp(44px, 8.4vw, 132px); line-height: .98; letter-spacing: -.045em; font-weight: 800; color: var(--text-primary); margin: 0;
  background: linear-gradient(180deg, #fff 0%, var(--moonlight) 50%, var(--lunar-300) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.h1 { font-size: clamp(34px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; color: var(--text-primary); margin: 0; }
.h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; color: var(--text-primary); margin: 0; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: var(--text-body); margin: 0; max-width: 62ch; }
.muted { color: var(--text-muted); }
body[data-lang="fa"] :is(.display, .h1, .h2) { letter-spacing: 0; line-height: 1.3; }
body[data-lang="fa"] .display { line-height: 1.35; }

/* ------------------------------------------------------------------ buttons */

.btns { display: flex; flex-wrap: wrap; gap: var(--s3); }
.btn {
  display: inline-flex; align-items: center; gap: var(--s2); height: 52px; padding: 0 var(--s6); border-radius: 999px; border: 0; cursor: pointer;
  font: 600 15px/1 var(--sans); white-space: nowrap; position: relative; overflow: hidden;
  transition: transform 140ms ease-out, box-shadow 260ms var(--ease-std), background 260ms var(--ease-std);
}
body[data-lang="fa"] .btn { font-family: var(--fa); font-weight: 700; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: linear-gradient(180deg, #fff, var(--lunar-100)); color: var(--ink-950); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset, 0 12px 36px -10px rgba(159, 182, 255, .8); }
.btn--primary:hover { color: var(--ink-950); }
.btn--glass { color: var(--text-primary); background: rgba(15, 20, 48, .5); -webkit-backdrop-filter: var(--soft-blur); backdrop-filter: var(--soft-blur); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--glass:hover { color: var(--text-primary); background: rgba(42, 53, 102, .55); }
/* the glossy one: a sheen that crosses it on hover */
.btn--gloss { color: #fff; background: linear-gradient(135deg, #6d5cf6, #4f7cff 60%, #3fd0ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -10px 20px rgba(20, 10, 80, .35), 0 16px 40px -12px rgba(109, 92, 246, .9); }
.btn--gloss::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform 700ms var(--ease-emph); }
.btn--gloss:hover { color: #fff; }
.btn--gloss:hover::after { transform: translateX(120%); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; }
.link-arrow .icon { transition: transform 260ms var(--ease-std); }
.link-arrow:hover .icon { transform: translateX(3px); }
body[data-lang="fa"] .link-arrow:hover .icon { transform: scaleX(-1) translateX(3px); }

.chip { display: inline-flex; align-items: center; gap: var(--s2); height: 30px; padding: 0 var(--s3); border-radius: 999px; width: max-content;
  border: 1px solid var(--line-strong); background: rgba(8, 11, 24, .45); font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-body); }
body[data-lang="fa"] .chip { font: 700 13px/1 var(--fa); letter-spacing: 0; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--moonlight); box-shadow: 0 0 10px var(--accent); }
.chip--soon i { background: var(--eclipse); box-shadow: 0 0 12px var(--eclipse); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }

/* ------------------------------------------------------------------ sections */

.section { position: relative; padding: var(--s40) 0 0; scroll-margin-top: 90px; }
.section__head { display: grid; gap: var(--s4); margin-bottom: var(--s12); max-width: 820px; }
@media (max-width: 640px) { .section { padding-top: var(--s24); } .section__head { margin-bottom: var(--s8); } }

/* --- hero */

.hero { position: relative; height: 100vh; height: 100dvh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.hero__words { display: grid; gap: var(--s6); justify-items: center; padding: 0 var(--gutter); max-width: 1100px; will-change: transform, opacity, filter; }
.hero__words .display { text-shadow: 0 0 60px rgba(3, 4, 10, .55); }
.hero__words .lead { margin: 0 auto; color: var(--lunar-100); text-shadow: 0 1px 20px rgba(3, 4, 10, .9); }
.hero__hud { position: absolute; bottom: var(--s8); inset-inline: var(--gutter); display: flex; justify-content: space-between; align-items: end; pointer-events: none; }
.scrollcue { display: flex; align-items: center; gap: var(--s3); }
.scrollcue i { display: block; width: 1px; height: 44px; background: linear-gradient(var(--lunar-300), transparent); animation: cue 2.2s var(--ease-emph) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.hero__flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(244, 246, 255, .9), rgba(139, 124, 248, .4) 30%, transparent 70%); mix-blend-mode: screen; }
.no-webgl .hero { background: radial-gradient(circle at 50% 45%, rgba(169, 184, 234, .25), transparent 40%); }

/* --- apps: the devices on the stage */

.apps-show { position: relative; min-height: 100vh; display: grid; align-items: center; }
.stage3d { position: relative; height: min(64vw, 620px); perspective: 1600px; perspective-origin: 50% 40%; }
.monitor3d, .phone3d { position: absolute; transform-style: preserve-3d; will-change: transform; }
.monitor3d { width: min(72%, 820px); inset-inline-start: 2%; top: 4%; }
.monitor3d__frame { border-radius: 20px; padding: 14px 14px 20px; background: linear-gradient(160deg, #1b1f30, #07080f); box-shadow: 0 0 0 1px rgba(223, 229, 250, .14), 0 60px 120px -40px rgba(80, 60, 220, .7), inset 0 1px 0 rgba(255, 255, 255, .1); }
/* height:auto — the height written on the <img> would otherwise win over the aspect ratio and crop the screen */
.monitor3d__frame img { width: 100%; height: auto; border-radius: 8px; aspect-ratio: 1024 / 640; object-fit: cover; }
.monitor3d__neck { width: 16%; height: 46px; margin: 0 auto; background: linear-gradient(#22263a, #0c0e18); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.monitor3d__foot { width: 34%; height: 12px; margin: 0 auto; border-radius: 0 0 14px 14px; background: linear-gradient(#2a2f45, #0f111c); }
.phone3d { width: min(24%, 250px); inset-inline-end: 4%; top: 12%; }
.phone3d__frame { border-radius: 38px; padding: 9px; background: #07080f; box-shadow: 0 0 0 1px rgba(223, 229, 250, .2), 0 50px 100px -30px rgba(40, 90, 255, .8), inset 0 0 0 2px #23263a; }
.phone3d__frame img { width: 100%; height: auto; border-radius: 30px; aspect-ratio: 412 / 915; object-fit: cover; }
.holo {
  position: absolute; display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: 16px; white-space: nowrap;
  color: #e9f7ff; font-weight: 600; font-size: 14px; background: linear-gradient(135deg, rgba(63, 208, 255, .16), rgba(139, 124, 248, .16));
  border: 1px solid rgba(120, 220, 255, .45); box-shadow: 0 0 30px -6px rgba(63, 208, 255, .65), inset 0 0 18px rgba(63, 208, 255, .15);
  -webkit-backdrop-filter: var(--soft-blur); backdrop-filter: var(--soft-blur); text-shadow: 0 0 12px rgba(120, 220, 255, .8); overflow: hidden;
}
.holo::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 4px); pointer-events: none; }
.holo .icon { color: var(--cyber); }
.holo--1 { top: 2%; inset-inline-start: 46%; }
.holo--2 { top: 42%; inset-inline-start: -1%; }
.holo--3 { bottom: 12%; inset-inline-start: 38%; }
.holo--4 { top: 64%; inset-inline-end: 0; }
@media (max-width: 760px) {
  .stage3d { height: 118vw; }
  .monitor3d { width: 92%; inset-inline-start: 4%; top: 0; }
  .phone3d { width: 40%; inset-inline-end: 6%; top: 34%; }
  .holo { font-size: 12px; padding: var(--s2) var(--s3); }
  .holo--1 { top: auto; bottom: 18%; inset-inline-start: 2%; }
  .holo--2 { top: 58%; inset-inline-start: 2%; }
  .holo--3 { bottom: 4%; inset-inline-start: 8%; }
  .holo--4 { top: auto; bottom: 0; inset-inline-end: 4%; }
}

.app { display: grid; grid-template-columns: auto 1fr; gap: var(--s8); align-items: center; padding: var(--s10); border-radius: 32px; margin-top: var(--s16); }
.app__icon { width: 120px; height: 120px; border-radius: 28px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 70px -18px rgba(124, 108, 246, 1); }
.app__copy { display: grid; gap: var(--s4); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.facts span { display: inline-flex; align-items: center; gap: var(--s2); }
.facts span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--lunar-500); }
@media (max-width: 760px) { .app { grid-template-columns: 1fr; padding: var(--s6); } .app__icon { width: 84px; height: 84px; border-radius: 20px; } }

/* the store pictures: a strip that scrolls sideways */
.gallery { margin-top: var(--s16); }
.gallery__head { display: flex; justify-content: space-between; align-items: end; gap: var(--s4); margin-bottom: var(--s5); }
.gallery__nav { display: flex; gap: var(--s2); }
.gallery__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(15, 20, 48, .5); cursor: pointer; display: grid; place-items: center; color: var(--moonlight); }
.gallery__nav button:hover { background: rgba(42, 53, 102, .6); }
body[data-lang="fa"] .gallery__nav .icon { transform: scaleX(-1); }
.strip { display: flex; gap: var(--s5); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s2) var(--gutter) var(--s6); margin: 0 calc(-1 * var(--gutter));
  scrollbar-width: thin; scrollbar-color: var(--lunar-700) transparent; overscroll-behavior-x: contain; }
.strip img { flex: none; width: auto; scroll-snap-align: center; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); background: #f5f4fc; }
.strip .shot-phone { height: min(70vh, 640px); aspect-ratio: 9 / 16; }
@media (max-width: 600px) { .strip .shot-phone { height: min(62vh, 520px); } .strip .shot-desk { height: auto; width: 86vw; } }
.strip .shot-desk { height: min(40vh, 360px); aspect-ratio: 16 / 9; align-self: center; }

/* --- games */

.games-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6); }
@media (max-width: 760px) { .games-grid { grid-template-columns: 1fr; } }
.game-card { border-radius: 26px; padding: var(--s8); min-height: 300px; display: grid; align-content: space-between; gap: var(--s6); overflow: hidden;
  background: var(--game-bg); border-color: rgba(255, 63, 164, .3); }
.game-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 85% 0%, rgba(255, 63, 164, .25), transparent 50%), radial-gradient(circle at 0% 100%, rgba(57, 255, 154, .14), transparent 50%); }
.game-card:nth-child(2) { border-color: rgba(57, 255, 154, .28); }
.glitch { position: relative; font: 800 clamp(30px, 4vw, 52px)/1 var(--mono); letter-spacing: .02em; color: #fff; margin: 0; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.glitch::before { color: var(--neon-pink); transform: translate(2px, 0); mix-blend-mode: screen; opacity: .8; }
.glitch::after { color: var(--neon-green); transform: translate(-2px, 0); mix-blend-mode: screen; opacity: .8; }
.is-glitching .glitch::before { animation: glitch-a 2.6s steps(2, end) infinite; }
.is-glitching .glitch::after { animation: glitch-b 2.1s steps(2, end) infinite; }
@keyframes glitch-a { 0%, 86%, 100% { clip-path: inset(0 0 0 0); transform: translate(2px, 0); }
  88% { clip-path: inset(10% 0 55% 0); transform: translate(-6px, -2px); } 92% { clip-path: inset(60% 0 8% 0); transform: translate(5px, 1px); } }
@keyframes glitch-b { 0%, 80%, 100% { clip-path: inset(0 0 0 0); transform: translate(-2px, 0); }
  83% { clip-path: inset(40% 0 30% 0); transform: translate(6px, 2px); } 88% { clip-path: inset(5% 0 75% 0); transform: translate(-4px, -1px); } }

/* --- tools: the bento */

.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, auto); gap: var(--s4); perspective: 1200px; }
.tile { border-radius: 24px; padding: var(--s6); display: grid; align-content: space-between; gap: var(--s4); overflow: hidden;
  background: var(--tile-bg); border-color: rgba(63, 208, 255, .22);
  transition: border-color 260ms var(--ease-std), box-shadow 260ms var(--ease-std); }
.tile:hover { border-color: rgba(63, 208, 255, .6); box-shadow: var(--glass-sheen), 0 0 40px -10px rgba(63, 208, 255, .55); }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile h3 { margin: 0; color: #fff; font-size: 18px; font-weight: 700; }
.tile p { margin: 0; color: var(--text-muted); font-size: 14.5px; }
.tile .redacted { font: 700 15px/1.2 var(--mono); color: var(--cyber); letter-spacing: .05em; }
.tile svg.gear { width: 64px; height: 64px; color: var(--cyber); filter: drop-shadow(0 0 12px rgba(63, 208, 255, .6)); transition: transform 1.6s var(--ease-emph); }
.tile:hover svg.gear { transform: rotate(180deg); }
.tile:hover svg.gear.gear--rev { transform: rotate(-180deg); }
.term { border-radius: 14px; background: rgba(2, 6, 14, .8); border: 1px solid rgba(63, 208, 255, .25); overflow: hidden; direction: ltr; text-align: left; }
.term__bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid rgba(63, 208, 255, .15); }
.term__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .term__bar i:nth-child(2) { background: #febc2e; } .term__bar i:nth-child(3) { background: #28c840; }
.term pre { margin: 0; padding: 14px 16px; min-height: 150px; font: 13.5px/1.7 var(--mono); color: #9fe8ff; white-space: pre-wrap; }
.term pre::after { content: "▍"; color: var(--cyber); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .tile--wide { grid-column: auto; } .tile--tall { grid-row: auto; } }

/* --- updates */

.updates { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.update { display: grid; gap: var(--s3); padding: var(--s6); border-radius: 22px; color: var(--text-body); }
.update:hover { color: var(--text-body); border-color: var(--line-strong); }
.update__head { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; }
.update__version { font-weight: 700; color: #fff; }
.update time { font-size: 13px; color: var(--text-muted); }
.update p { margin: 0; font-size: 15px; }

/* --- contact */

.contact { min-height: 100vh; display: grid; align-content: center; justify-items: center; text-align: center; gap: var(--s8); padding: var(--s32) 0 var(--s16); }
.mail-glow { font: 700 clamp(22px, 3.6vw, 44px)/1.1 var(--sans); color: #fff; text-shadow: 0 0 18px rgba(159, 182, 255, .9), 0 0 60px rgba(124, 108, 246, .7); direction: ltr; }
.mail-glow:hover { color: #fff; text-shadow: 0 0 22px #fff, 0 0 80px rgba(124, 108, 246, .9); }
.form { width: min(640px, 100%); border-radius: 28px; padding: var(--s8); display: grid; gap: var(--s4); text-align: start; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } .form { padding: var(--s6); } }
.field { display: grid; gap: var(--s2); }
.field span { font-size: 13px; color: var(--text-muted); }
.field input, .field textarea { width: 100%; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(3, 4, 10, .55); color: #fff; font: inherit; padding: 13px 15px; resize: vertical; }
.field [aria-invalid="true"] { border-color: #ff7a9e; box-shadow: 0 0 0 4px rgba(255, 122, 158, .15); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(159, 182, 255, .15); }
.field textarea { min-height: 140px; }
.honey { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.form__status { font-size: 14px; color: var(--text-muted); margin: 0; }
.form__status[data-state="sent"] { color: var(--neon-green); }
.form__status:is([data-state="failed"], [data-state="invalid"], [data-state="busy"], [data-state="name"], [data-state="email"], [data-state="message"]) { color: #ff9db8; }
.form .note { font-size: 13px; color: var(--text-muted); margin: 0; }

.foot { border-top: 1px solid var(--line); background: rgba(3, 4, 10, .7); }
.foot__in { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8); align-items: center; padding-block: var(--s8); font-size: 14px; }
.foot__brand { display: flex; align-items: center; gap: var(--s3); color: #fff; font-weight: 700; }
.foot__brand svg { width: 26px; height: 26px; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin-inline-start: auto; }
.foot__links a { color: var(--text-muted); }
.foot__links a:hover { color: var(--text-primary); }

/* ------------------------------------------------------------------ search */

.search { position: fixed; inset: 0; z-index: 70; display: grid; place-items: start center; padding: 12vh var(--gutter) 0; background: rgba(3, 4, 10, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.search[hidden] { display: none; }
.search__box { width: min(620px, 100%); border-radius: 24px; padding: var(--s3); }
.search__box input { width: 100%; height: 56px; border: 0; background: transparent; color: #fff; font: 500 18px var(--sans); padding: 0 var(--s4); outline: none; }
body[data-lang="fa"] .search__box input { font-family: var(--fa); }
.search ul { list-style: none; margin: 0; padding: var(--s2) 0 0; border-top: 1px solid var(--line); display: grid; gap: 2px; max-height: 50vh; overflow: auto; overscroll-behavior: contain; }
.search__item { display: grid; gap: 2px; padding: var(--s3) var(--s4); border-radius: 14px; color: var(--text-body); }
.search__item b { color: #fff; font-weight: 600; }
.search__item span { font-size: 13px; color: var(--text-muted); }
.search__item.is-active, .search__item:hover { background: rgba(223, 229, 250, .08); color: var(--text-body); }
.search__empty { padding: var(--s4); color: var(--text-muted); }

/* ------------------------------------------------------------------ inner pages */

.page-hero { padding: 150px 0 var(--s16); position: relative; }
.page-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 600px; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 60% 70% at 75% 0%, rgba(124, 108, 246, .3), transparent 70%); }
.crumb { display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s8); }
.crumb .icon { width: 15px; height: 15px; transform: scaleX(-1); }
body[data-lang="fa"] .crumb .icon { transform: none; }
.exon-head { display: grid; grid-template-columns: auto 1fr; gap: var(--s8); align-items: center; }
.exon-head img { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 70px -18px rgba(124, 108, 246, .95); }
@media (max-width: 640px) { .exon-head { grid-template-columns: 1fr; gap: var(--s5); } .exon-head img { width: 80px; height: 80px; border-radius: 20px; } }
.grid3 { display: grid; gap: var(--s4); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid3 { grid-template-columns: 1fr; } }
.feature { border-radius: 22px; padding: var(--s6); display: grid; gap: var(--s3); align-content: start; }
.feature .icon { width: 22px; height: 22px; color: var(--accent); }
.feature h3 { margin: 0; color: var(--text-primary); font-size: 17px; font-weight: 700; }
.feature p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.7; }
.note { border-radius: 22px; padding: var(--s6) var(--s8); color: var(--text-body); }
.prose { max-width: 780px; }
.prose h2 { color: var(--text-primary); font-size: 22px; letter-spacing: -.01em; margin: var(--s12) 0 var(--s3); }
.prose h3 { color: var(--text-primary); font-size: 16px; margin: var(--s6) 0 var(--s2); }
.prose p, .prose li { color: var(--text-muted); font-size: 15.5px; }
.prose p { margin: 0 0 var(--s4); }
.prose ul { margin: 0 0 var(--s4); padding-inline-start: 22px; }
.prose li { margin-bottom: var(--s2); }
.prose strong { color: var(--text-primary); }
.prose code { font-family: var(--mono); font-size: .9em; color: var(--lunar-100); }
.prose .note { margin: var(--s5) 0; }
.prose .note p { color: var(--text-body); margin: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--s4) 0; font-size: 14.5px; }
.prose th, .prose td { text-align: start; padding: var(--s3); border: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--text-primary); background: rgba(15, 20, 48, .6); font-weight: 600; }
.prose td { color: var(--text-muted); }
.table-scroll { overflow-x: auto; }
.newmoon { width: 150px; height: 150px; border-radius: 50%; position: relative; background: radial-gradient(circle at 62% 38%, #0b0f22, #04050b 70%);
  box-shadow: inset -6px 4px 14px -6px rgba(244, 246, 255, .9), inset -2px 1px 2px rgba(244, 246, 255, .9), 0 0 50px 4px rgba(255, 191, 115, .16), 0 0 120px 20px rgba(93, 115, 196, .22); }


/* Exon's page: the app's icon on a lit stage, beside the title */
.page-hero__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s10); align-items: center; }
.stage { position: relative; aspect-ratio: 1; max-width: 380px; width: 100%; justify-self: center; display: grid; place-items: center; }
.stage::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; filter: blur(6px);
  background: radial-gradient(circle at 50% 45%, rgba(124, 108, 246, .55), rgba(93, 115, 196, .18) 42%, transparent 68%); }
.stage__ring { position: absolute; border-radius: 50%; border: 1px solid var(--line-strong); }
.stage__ring--1 { inset: 12%; }
.stage__ring--2 { inset: 0; border-style: dashed; border-color: var(--line); animation: orbit 60s linear infinite; }
.stage__ring--2::after { content: ""; position: absolute; top: 14%; inset-inline-end: 12%; width: 8px; height: 8px; border-radius: 50%; background: var(--moonlight); box-shadow: 0 0 16px var(--accent); }
@keyframes orbit { to { transform: rotate(360deg); } }
.stage__icon { position: relative; width: 44%; height: auto; aspect-ratio: 1; border-radius: 24%;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 80px -10px rgba(124, 108, 246, .9); }
.stage__tag { position: absolute; display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: 999px; font-size: 13px; color: var(--text-primary); white-space: nowrap; }
.stage__tag .icon { width: 15px; height: 15px; color: var(--accent); }
.stage__tag--a { top: 8%; inset-inline-start: -2%; }
.stage__tag--b { bottom: 16%; inset-inline-end: -4%; }
.stage__tag--c { bottom: 2%; inset-inline-start: 8%; }
@media (max-width: 900px) { .page-hero__grid { grid-template-columns: 1fr; } .page-hero__grid .stage { display: none; } }
@media (prefers-reduced-motion: reduce) { .stage__ring--2 { animation: none; } }

/* ------------------------------------------------------------------ the light theme
   The sun/moon button in the capsule (the menu, on a phone); the choice is remembered in this
   browser, and dark stays the default. Tokens first, then what was drawn in the dark's own colours.
   The devices and the terminal stay dark, as real ones are. */

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1fa;
  --text-primary: #0c1233;
  --text-body: #2a3157;
  --text-muted: #59628a;
  --line: rgba(36, 48, 110, .12);
  --line-strong: rgba(36, 48, 110, .24);
  --accent: #4257d6;
  --accent-hover: #2c3fb5;
  --glass-tint: linear-gradient(160deg, rgba(255, 255, 255, .66), rgba(232, 236, 252, .5));
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, .95);
  --glass-glow: 0 30px 80px -34px rgba(60, 80, 170, .35);
  --glass-edge: rgba(255, 255, 255, .95), rgba(120, 140, 210, .2) 38%, transparent 62%;
  --capsule-bg: rgba(255, 255, 255, .55);
  --capsule-bg-floating: rgba(255, 255, 255, .8);
  --game-bg: linear-gradient(160deg, rgba(255, 238, 249, .74), rgba(236, 255, 246, .62));
  --tile-bg: linear-gradient(160deg, rgba(230, 247, 255, .76), rgba(244, 247, 255, .62));
  --mark-a: #7d92d9; --mark-b: #2f3d86; --mark-c: #0c1233;
}

/* the sky, by day */
[data-theme="light"] .sky__hero { background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(110, 130, 220, .2), transparent 70%),
  radial-gradient(ellipse 90% 60% at 50% 120%, rgba(196, 206, 244, .9), transparent 70%); }
[data-theme="light"] .sky__apps { background: radial-gradient(ellipse 70% 60% at 25% 30%, rgba(124, 92, 246, .2), transparent 70%),
  radial-gradient(ellipse 60% 55% at 85% 75%, rgba(52, 102, 255, .16), transparent 70%); }
[data-theme="light"] .sky__games { background: radial-gradient(ellipse 55% 50% at 80% 25%, rgba(255, 46, 160, .14), transparent 70%),
  radial-gradient(ellipse 55% 50% at 15% 80%, rgba(20, 210, 130, .12), transparent 70%), rgba(255, 255, 255, .35); }
[data-theme="light"] .sky__tools { background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(40, 170, 255, .14), transparent 70%),
  linear-gradient(rgba(8, 134, 200, .07) 1px, transparent 1px) 0 0 / 56px 56px,
  linear-gradient(90deg, rgba(8, 134, 200, .07) 1px, transparent 1px) 0 0 / 56px 56px; }
[data-theme="light"] .grain { filter: invert(1); opacity: .035; }
[data-theme="light"] .skip { background: var(--text-primary); color: #fff; }

/* the capsule and the menu */
[data-theme="light"] .capsule { border-color: rgba(36, 48, 110, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 44px -22px rgba(30, 40, 90, .35); }
[data-theme="light"] .capsule.is-floating { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 22px 54px -20px rgba(30, 40, 90, .45); }
[data-theme="light"] .capsule__mark svg { filter: drop-shadow(0 0 8px rgba(66, 87, 214, .3)); }
[data-theme="light"] .tab { background: rgba(36, 48, 110, .05); color: var(--text-body); box-shadow: inset 0 0 0 1px rgba(36, 48, 110, .07); }
[data-theme="light"] .tab:hover { background: rgba(36, 48, 110, .1); color: var(--text-primary); }
[data-theme="light"] .tab[aria-current="true"] { background: rgba(36, 48, 110, .14); color: var(--text-primary); }
[data-theme="light"] .tab kbd { background: rgba(36, 48, 110, .08); color: var(--text-muted); }
[data-theme="light"] .capsule__menu { background: rgba(36, 48, 110, .07); color: var(--text-primary); }
[data-theme="light"] :is(.menu a, .menu button) { background: rgba(36, 48, 110, .05); color: var(--text-primary); }

/* type and buttons */
[data-theme="light"] .display { background-image: linear-gradient(180deg, #0c1233 0%, #1f2a66 55%, #4a5db8 100%); }
/* no glow behind it: a text-shadow paints over a gradient clipped to the text, and white would wash it out */
[data-theme="light"] .hero__words .display { text-shadow: none; }
[data-theme="light"] .hero__words .lead { color: var(--text-body); text-shadow: 0 1px 18px rgba(238, 241, 250, .95); }
[data-theme="light"] .hero__flash { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .95), rgba(139, 124, 248, .22) 30%, transparent 70%); mix-blend-mode: normal; }
[data-theme="light"] .scrollcue i { background: linear-gradient(var(--lunar-500), transparent); }
[data-theme="light"] .btn--primary { background: linear-gradient(180deg, #222b62, #0c1233); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 30px -12px rgba(30, 40, 110, .6); }
[data-theme="light"] .btn--primary:hover { color: #fff; }
[data-theme="light"] .btn--glass { background: rgba(255, 255, 255, .62); }
[data-theme="light"] .btn--glass:hover { background: rgba(255, 255, 255, .92); }
[data-theme="light"] .chip { background: rgba(255, 255, 255, .62); }
[data-theme="light"] .chip i { background: var(--lunar-700); box-shadow: 0 0 8px rgba(66, 87, 214, .45); }
[data-theme="light"] .chip--soon i { background: #f08c1a; box-shadow: 0 0 10px rgba(240, 140, 26, .6); }

/* apps */
[data-theme="light"] .holo { color: #073a56; background: linear-gradient(135deg, rgba(220, 246, 255, .74), rgba(234, 230, 255, .74));
  border-color: rgba(8, 134, 200, .4); box-shadow: 0 0 26px -8px rgba(8, 134, 200, .45), inset 0 0 14px rgba(63, 208, 255, .12); text-shadow: none; }
[data-theme="light"] .holo::after { background: repeating-linear-gradient(0deg, rgba(8, 60, 100, .04) 0 1px, transparent 1px 4px); }
[data-theme="light"] .holo .icon { color: #0886c8; }
[data-theme="light"] .monitor3d__frame { box-shadow: 0 0 0 1px rgba(20, 30, 80, .12), 0 60px 110px -40px rgba(80, 60, 220, .45), inset 0 1px 0 rgba(255, 255, 255, .1); }
[data-theme="light"] .phone3d__frame { box-shadow: 0 0 0 1px rgba(20, 30, 80, .14), 0 50px 90px -30px rgba(40, 90, 255, .45), inset 0 0 0 2px #23263a; }
[data-theme="light"] :is(.app__icon, .exon-head img, .stage__icon) { box-shadow: 0 0 0 1px rgba(20, 30, 80, .08), 0 24px 60px -20px rgba(124, 108, 246, .6); }
[data-theme="light"] .gallery__nav button { background: rgba(255, 255, 255, .7); color: var(--text-primary); }
[data-theme="light"] .gallery__nav button:hover { background: #fff; }
[data-theme="light"] .strip { scrollbar-color: var(--lunar-300) transparent; }
[data-theme="light"] .strip img { box-shadow: 0 30px 60px -32px rgba(20, 30, 80, .4), 0 0 0 1px rgba(20, 30, 80, .08); }

/* games and tools */
[data-theme="light"] .game-card { border-color: rgba(224, 18, 131, .26); }
[data-theme="light"] .game-card:nth-child(2) { border-color: rgba(10, 163, 90, .3); }
[data-theme="light"] .game-card::after { background: radial-gradient(circle at 85% 0%, rgba(255, 63, 164, .16), transparent 50%), radial-gradient(circle at 0% 100%, rgba(57, 255, 154, .16), transparent 50%); }
[data-theme="light"] .glitch { color: var(--text-primary); }
/* screen would add pink and green to white and leave white; multiply leaves the colour */
[data-theme="light"] .glitch::before, [data-theme="light"] .glitch::after { mix-blend-mode: multiply; opacity: .7; }
[data-theme="light"] .tile { border-color: rgba(8, 134, 200, .22); }
[data-theme="light"] .tile:hover { border-color: rgba(8, 134, 200, .5); box-shadow: var(--glass-sheen), 0 0 40px -12px rgba(8, 134, 200, .4); }
[data-theme="light"] :is(.tile h3, .update__version, .search__item b, .foot__brand) { color: var(--text-primary); }
[data-theme="light"] .tile .redacted { color: #0878b0; }
[data-theme="light"] .tile svg.gear { color: #0886c8; filter: drop-shadow(0 0 10px rgba(8, 134, 200, .3)); }

/* contact, the footer, search, the inner pages */
[data-theme="light"] .mail-glow { color: #3a2fc4; text-shadow: 0 0 22px rgba(124, 108, 246, .35); }
[data-theme="light"] .mail-glow:hover { color: #2a20a8; text-shadow: 0 0 28px rgba(124, 108, 246, .55); }
[data-theme="light"] :is(.field input, .field textarea) { background: rgba(255, 255, 255, .8); color: var(--text-primary); }
[data-theme="light"] .form__status[data-state="sent"] { color: #0a8a4e; }
[data-theme="light"] .form__status:is([data-state="failed"], [data-state="invalid"], [data-state="busy"], [data-state="name"], [data-state="email"], [data-state="message"]) { color: #c4265a; }
[data-theme="light"] .foot { background: rgba(255, 255, 255, .66); }
[data-theme="light"] .search { background: rgba(222, 228, 246, .6); }
[data-theme="light"] .search__box input { color: var(--text-primary); }
[data-theme="light"] :is(.search__item.is-active, .search__item:hover) { background: rgba(36, 48, 110, .07); }
[data-theme="light"] .page-hero::before { background: radial-gradient(ellipse 60% 70% at 75% 0%, rgba(124, 108, 246, .18), transparent 70%); }
[data-theme="light"] .stage__ring--2::after { background: var(--lunar-700); box-shadow: 0 0 12px rgba(66, 87, 214, .5); }
[data-theme="light"] .prose th { background: rgba(36, 48, 110, .06); }
[data-theme="light"] .prose code { color: var(--text-primary); }
[data-theme="light"] .no-webgl .hero { background: radial-gradient(circle at 50% 45%, rgba(93, 115, 196, .2), transparent 40%); }

/* ------------------------------------------------------------------ a phone or a tablet: glass without the blur
   backdrop-filter blurs again, on every frame, whatever is behind it — and behind it the scene moves on
   every frame. On a phone's graphics chip that doubled the frame time in Games and Tools, where the
   cards and tiles fill the screen, and a finger made it worse (measured 7 Oct 2026). A denser tint
   reads the same over the sky. A mouse means a computer, and a computer keeps the real glass and the grain. */

@media (hover: none) {
  :root {
    --glass-blur: none; --capsule-blur: none; --soft-blur: none;
    --glass-tint: linear-gradient(160deg, rgba(30, 36, 78, .8), rgba(8, 10, 24, .88));
    --capsule-bg: rgba(14, 18, 40, .8); --capsule-bg-floating: rgba(10, 13, 30, .9);
    --game-bg: linear-gradient(160deg, rgba(44, 10, 44, .8), rgba(4, 6, 14, .88));
    --tile-bg: linear-gradient(160deg, rgba(12, 44, 76, .76), rgba(4, 8, 20, .86));
  }
  :root[data-theme="light"] {
    --glass-tint: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(236, 240, 253, .84));
    --capsule-bg: rgba(255, 255, 255, .86); --capsule-bg-floating: rgba(255, 255, 255, .94);
    --game-bg: linear-gradient(160deg, rgba(255, 240, 250, .9), rgba(238, 255, 247, .84));
    --tile-bg: linear-gradient(160deg, rgba(232, 248, 255, .92), rgba(245, 248, 255, .86));
  }
  .search { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(3, 4, 10, .78); }
  [data-theme="light"] .search { background: rgba(222, 228, 246, .86); }
  /* the film grain over the whole page: a full-screen layer above everything, and while a finger
     scrolls the page it cost a frame in three (measured: without it, a steady 60 a second). On a
     phone's screen it was not to be seen anyway. */
  .grain { display: none; }
  /* the menu covers the hero's big words: with no blur it has to be all but solid */
  .menu.glass { background: rgba(12, 15, 34, .97); }
  [data-theme="light"] .menu.glass { background: rgba(250, 251, 255, .97); }
}

/* ------------------------------------------------------------------ motion off */

@media (prefers-reduced-motion: reduce) {
  .chip--soon i, .scrollcue i, .term pre::after, .is-glitching .glitch::before, .is-glitching .glitch::after { animation: none; }
  .btn, .tile, .tile svg.gear, .link-arrow .icon, .btn--gloss::after { transition: none; }
}