/* DigitMeld — a small, precise visual system. All assets are local. */
@font-face { font-family: "Digit Sans"; src: url("/assets/fonts/latin-regular.woff") format("woff"); font-style: normal; font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Digit Sans"; src: url("/assets/fonts/latin-bold.woff") format("woff"); font-style: normal; font-weight: 650 900; font-display: swap; }
@font-face { font-family: "Digit Arabic"; src: url("/assets/fonts/arabic-regular.woff") format("woff"); font-style: normal; font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Digit Arabic"; src: url("/assets/fonts/arabic-bold.woff") format("woff"); font-style: normal; font-weight: 650 900; font-display: swap; }
:root {
  color-scheme: light;
  --paper: #f9f7f2;
  --surface: #fffefa;
  --ink: #2c203b;
  --muted: #6d6575;
  --plum: #32223f;
  --plum-deep: #271b33;
  --lavender: #bfa7ff;
  --lavender-light: #e7defb;
  --lavender-ink: #67438d;
  --accent: #dceab6;
  --accent-ink: #4b5c31;
  --line: #ded9e3;
  --radius: 1.65rem;
  --max: 80rem;
  --font: "Digit Sans", "Aptos", "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1rem/1.65 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { color: var(--plum-deep); background: var(--lavender); }
button, input, select, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
a { color: inherit; text-underline-offset: .22em; }
button:disabled { cursor: default; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure { margin-block-start: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
h2 { margin-block-end: 1.15rem; font-size: clamp(2.2rem, 4.15vw, 3.9rem); line-height: 1.07; letter-spacing: -.055em; font-weight: 650; }
h3 { margin-block-end: .7rem; font-size: 1.4rem; line-height: 1.22; letter-spacing: -.035em; font-weight: 650; }
h2 .accent { display: block; color: var(--lavender-ink); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #9b6434; outline-offset: 5px; border-radius: .25rem; }
.hero :focus-visible, .closing-band :focus-visible { outline-color: var(--accent); }
.container, .section, .site-header, .site-footer { width: min(var(--max), calc(100% - 4rem)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; inset-block-start: .75rem; inset-inline-start: .75rem; padding: .7rem 1.2rem; transform: translateY(-160%); color: #fff; background: var(--plum); border-radius: .6rem; }
.skip-link:focus { transform: translateY(0); }
.arrow-icon { width: 1rem; height: 1rem; flex: 0 0 auto; }

/* A quiet masthead; the geometry and color belong to the product story. */
.site-header { min-height: 6.2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-size: 1.45rem; font-weight: 750; letter-spacing: -.05em; line-height: 1; text-decoration: none; flex: 0 0 auto; }
.brand img { width: 2.65rem; height: 2.65rem; object-fit: contain; }
.brand-dot { color: var(--lavender-ink); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 2rem; margin-inline-start: auto; }
.site-nav > a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .82rem; font-weight: 600; text-decoration: none; }
.site-nav > a:hover, .site-nav > a[aria-current="page"] { color: var(--lavender-ink); text-decoration: underline; }
.language-menu { position: relative; z-index: 20; flex: 0 0 auto; }
.language-menu summary { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .5rem .95rem; border: 1px solid #cfc8d5; border-radius: 2rem; cursor: pointer; font-size: .78rem; font-weight: 600; list-style: none; }
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu summary::after { content: "⌄"; font-size: .9rem; line-height: 1; }
.language-options, .language-menu ul { position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-end: 0; width: max-content; min-width: 10rem; padding: .45rem; margin: 0; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); box-shadow: 0 12px 40px #2c203b18; list-style: none; }
.language-options a, .language-menu li a { display: block; min-height: 2.75rem; padding: .55rem .8rem; border-radius: .5rem; text-decoration: none; font-size: .87rem; }
.language-options a:hover, .language-options a[aria-current="true"] { background: var(--lavender-light); }
.language-menu select { min-height: 2.75rem; max-width: 9rem; padding: .5rem .85rem; border: 1px solid #cfc8d5; border-radius: 2rem; color: var(--ink); background: var(--surface); }

/* Hero: a single confident plum stage, cut by a luminous geometric scene. */
.hero { position: relative; width: min(var(--max), calc(100% - 2.5rem)); display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; gap: 0; min-height: 38rem; margin: .15rem auto 0; isolation: isolate; color: var(--paper); background: var(--plum); border-radius: 2rem; overflow: clip; }
.hero-copy { z-index: 2; min-width: 0; align-self: center; padding: clamp(2rem, 4.4vw, 4.4rem); padding-inline-end: 1rem; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: .6rem; margin-block-end: 1.5rem; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; }
.hero .eyebrow { color: #d7c9e9; }
.eyebrow::before, .section-kicker::before { content: ""; flex: 0 0 auto; width: .35rem; height: .35rem; background: currentColor; border-radius: 50%; }
.tiny-star { display: none; }
.hero-title { max-width: 11ch; margin-block-end: 1.45rem; font-size: clamp(3.5rem, 6.35vw, 6rem); font-weight: 620; letter-spacing: -.065em; line-height: .99; }
.hero-title .accent, .hero-title em { display: block; color: var(--lavender); font-style: normal; }
.hero-title .title-line { display: block; }
.hero-lead { max-width: 32rem; color: var(--muted); font-size: 1.03rem; line-height: 1.7; }
.hero .hero-lead { max-width: 29rem; margin-block-end: 1.8rem; color: #ddd3e5; font-size: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 3.15rem; padding: .8rem 1.35rem; border: 1px solid transparent; border-radius: 3rem; font-size: .83rem; font-weight: 700; line-height: 1.4; text-decoration: none; cursor: pointer; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.button-primary { color: var(--plum-deep); background: var(--lavender); }
.button-primary:hover { background: #d0beff; box-shadow: 0 6px 20px #bfa7ff26; transform: translateY(-2px); }
.button-secondary { color: var(--ink); background: transparent; border-color: #c6bdcf; }
.button-secondary:hover { background: #eae5ef; transform: translateY(-2px); }
.hero .button-secondary, .closing-band .button-secondary { border-color: #8d7d9a; color: #f4eefb; }
.hero .button-secondary:hover, .closing-band .button-secondary:hover { background: #ffffff0c; }
.button:active { transform: translateY(1px); }
.button[disabled], .button[aria-disabled="true"] { opacity: .65; cursor: default; box-shadow: none; transform: none; }
.launch-note { max-width: 30rem; margin-block: 1rem 0; color: #c7bace; font-size: .69rem; line-height: 1.6; }
.launch-note > span[aria-hidden] { color: var(--accent); }
.platform-status { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-block: 1.2rem 0; color: #d7cbe1; font-size: .68rem; line-height: 1.6; }
.platform-status > span { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; color: #d7cbe1; }
.platform-status .status-dot { width: .35rem; height: .35rem; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.hero-scroll { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin-block-start: 1.5rem; color: #cfc0dd; font-size: .7rem; text-decoration: none; }
.hero-stage { position: relative; min-width: 0; min-height: 35rem; display: grid; place-items: center; padding: 3.2rem 1.6rem 3.8rem; isolation: isolate; }
.hero-stage::before { content: ""; position: absolute; z-index: -2; width: 31rem; height: 31rem; max-width: 112%; border-radius: 50%; background: radial-gradient(circle at 33% 27%, #eee7fb 0, #d2c0ee 38%, #ac91d5 76%, #9272bc 100%); box-shadow: inset 0 1px 1px #fff9, inset -22px -25px 70px #62438735; }
.hero-stage::after { content: ""; position: absolute; z-index: -1; inset: 1.3rem; border: 1px solid #d0bde91e; border-radius: 50%; transform: rotate(-22deg) scale(1.05,.7); }
.stage-grid { position: absolute; z-index: -3; inset: 0; opacity: .13; background-image: linear-gradient(#c9b8dd 1px, transparent 1px), linear-gradient(90deg,#c9b8dd 1px,transparent 1px); background-size: 3.8rem 3.8rem; mask-image: radial-gradient(ellipse,#000,transparent 72%); }
.stage-ring { position: absolute; z-index: -1; inset: 16% 4%; border: 1px solid #f4ecff8a; border-radius: 50%; transform: rotate(25deg) scale(1.2,.63); pointer-events: none; }
.hero-phone { position: relative; margin: 0; }
.phone-frame { position: relative; width: clamp(12rem, 18.5vw, 16rem); aspect-ratio: 480 / 854; padding: .4rem; border: 1px solid #83738f; border-radius: 2.3rem; background: linear-gradient(140deg,#5a4966,#1e1926 35%,#4a3d56 70%,#85738d); box-shadow: -17px 22px 40px #271b3340, 1px 1px 0 #e4d2f9aa inset, 0 0 0 1px #1c142b; transform: rotate(-7deg); }
.phone-frame::before { content: ""; position: absolute; inset-block-start: 20%; inset-inline-start: -.22rem; height: 12%; width: .15rem; border-radius: 2px; background: #8c7a99; box-shadow: 0 -1.8rem 0 #8c7a99; }
.phone-frame::after { content: ""; position: absolute; inset: .35rem; pointer-events: none; border: 1px solid #ffffff35; border-radius: 1.95rem; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 1.9rem; background: #faf8fc; overflow: hidden; }
.phone-screen img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.phone-speaker { position: absolute; z-index: 2; width: 30%; height: .8rem; inset-block-start: .5rem; inset-inline-start: 35%; background: #201a29; border-radius: 0 0 .6rem .6rem; }
.screenshot-caption { margin: 1rem 0 0; color: var(--muted); font-size: .65rem; line-height: 1.5; text-align: center; }
.hero-stage > .screenshot-caption { position: absolute; inset-block-end: 1.5rem; inset-inline: 1rem; color: #d8cbe4; }
.hero-phone .screenshot-caption { margin-block-start: 1.4rem; color: #d8cbe4; font-size: .6rem; }
.stage-formula { position: absolute; z-index: 3; inset-inline-start: 6%; inset-block-end: 13%; display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border: 1px solid #ffffffa3; border-radius: .9rem; color: #563c6f; background: #fffaf1d9; backdrop-filter: blur(8px); box-shadow: 0 12px 30px #1e152f22; transform: rotate(-5deg); font-size: 1.1rem; font-weight: 600; }
.stage-formula i { color: #826993; font-style: normal; font-size: .9rem; }
.stage-formula strong { color: #654488; font-size: 1.65rem; line-height: 1; }
.floating-token { position: absolute; z-index: 2; display: grid; place-items: center; width: 5.4rem; height: 5.4rem; border: 1px solid #ffffffa1; border-radius: 1.2rem; font-size: 4rem; font-weight: 500; line-height: 1; color: #674a8b; background: linear-gradient(145deg,#ffffffc2,#d8c5f570 55%,#b7a0dd80); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #9875b8b0, 0 9px 0 #9477b73b, 0 20px 30px #20162f20; text-shadow: 0 2px 1px #fff8; backdrop-filter: blur(8px); pointer-events: none; animation: drift 7s ease-in-out infinite; }
.token-plus { inset-inline-start: 4%; inset-block-start: 22%; transform: rotate(-15deg); }
.token-times { inset-inline-end: 4%; inset-block-end: 22%; width: 4.4rem; height: 4.4rem; font-size: 3.3rem; transform: rotate(15deg); animation-delay: -3s; }
.token-number { inset-inline-end: 11%; inset-block-start: 10%; width: 3.6rem; height: 3.6rem; border-radius: .9rem; font-size: 2.5rem; transform: rotate(12deg); animation-delay: -5s; }
.glass-note { position: absolute; z-index: 3; inset-inline-start: 1.5rem; inset-block-end: 13%; max-width: 11rem; padding: .75rem 1rem; border: 1px solid #ffffff8c; border-radius: .9rem; color: var(--plum); background: #faf7ffcf; box-shadow: 0 12px 30px #271b3326; backdrop-filter: blur(10px); font-size: .7rem; line-height: 1.45; }
.glass-note strong { display: block; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.03em; }
@keyframes drift { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* Thin factual ribbon rather than another row of feature cards. */
.stats-strip { width: min(calc(var(--max) - 4rem), calc(100% - 5rem)); margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); padding-block: 2.2rem; border-bottom: 1px solid var(--line); }
.stats-strip > div { display: flex; align-items: baseline; justify-content: center; gap: .75rem; padding-inline: 1.5rem; border-inline-start: 1px solid var(--line); }
.stats-strip > div:first-child { border-inline-start: 0; }
.stats-strip strong { color: var(--plum); font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -.04em; }
.stats-strip span { max-width: 15ch; color: var(--muted); font-size: .73rem; line-height: 1.4; }
.section { padding-block: 6rem; }
.section-heading { max-width: 38rem; margin-block-end: 2.5rem; }
.section-heading .eyebrow, .section-kicker { color: var(--lavender-ink); }
.section-heading > p:not(.eyebrow):not(.section-kicker) { max-width: 34rem; margin-block-end: 0; color: var(--muted); font-size: .96rem; }
.section-lead { max-width: 34rem; margin-block-end: 1.8rem; color: var(--muted); font-size: .95rem; line-height: 1.75; }
.section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,7vw,7rem); align-items: center; }
.section-grid > * { min-width: 0; }
.text-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-size: .85rem; font-weight: 700; text-decoration-thickness: 1px; }
.text-link:hover { color: var(--lavender-ink); }

/* Visitor's playable example: a laboratory inset, deliberately not an app screen. */
.play-section { display: grid; grid-template-columns: .9fr 1fr; gap: clamp(2rem,7vw,7rem); align-items: center; }
.play-intro { min-width: 0; }
.play-intro .section-heading { margin-block-end: 2rem; }
.game-lab { position: relative; min-width: 0; padding: 2rem; border: 1px solid #d7cce6; border-radius: var(--radius); background: #eeE8f6; box-shadow: 0 1px 0 #fff inset; }
.game-lab::before { content: ""; position: absolute; width: 4rem; height: 4rem; inset-inline-end: -1rem; inset-block-start: -1rem; border-top: 1px solid #a891bd; border-inline-end: 1px solid #a891bd; border-start-end-radius: 1rem; pointer-events: none; }
.game-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-block-end: 1.5rem; padding-block-end: 1.15rem; border-bottom: 1px solid #d5c8e3; }
.game-top > span { color: #6c567c; font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.game-top .eyebrow { margin: 0; letter-spacing: .07em; }
.game-top .eyebrow::before { display: none; }
.game-top .game-orbit { color: #9275ac; font-size: 1.3rem; line-height: 1; }
.game-target { display: flex; align-items: baseline; justify-content: center; gap: .55rem; margin-block-end: .5rem; color: #66516f; font-size: .75rem; }
.game-target strong { color: var(--plum); font-size: 2.3rem; font-weight: 650; line-height: 1; letter-spacing: -.06em; }
.game-expression { min-height: 4.7rem; display: grid; place-items: center; padding: .5rem; margin-block: 0 .4rem; border-bottom: 1px dashed #c6b6d6; color: var(--plum); font-size: clamp(1.65rem,3.3vw,2.5rem); line-height: 1.25; letter-spacing: -.04em; font-variant-numeric: tabular-nums; direction: ltr; text-align: center; overflow-wrap: anywhere; }
.game-status { min-height: 3.6rem; margin: .75rem 0 1rem; color: #695775; text-align: center; font-size: .78rem; line-height: 1.6; }
.game-status[data-tone="success"], .game-status.is-success { color: #3d632e; }
.game-status[data-tone="error"], .game-status.is-error { color: #9a3e39; }
.game-numbers { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .65rem; margin-block: 1rem; direction: ltr; }
.number-button { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: clamp(3.5rem,6vw,4.6rem); aspect-ratio: 1; min-height: 3.5rem; padding: .3rem; border: 1px solid #fff; border-radius: 1rem; color: #4a3262; background: linear-gradient(155deg,#fff,#f7f2ff 60%,#ded0f0); box-shadow: inset 0 -3px 4px #a089bd16, 0 5px 0 #d3c4e2, 0 7px 12px #4d34631a; font-size: 1.7rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; transition: transform .15s, background-color .15s, border-color .15s, box-shadow .15s; }
.number-button:hover:not(:disabled) { transform: translateY(-3px); }
.number-button[aria-pressed="true"], .number-button.is-selected { color: #fff; background: #765494; border-color: #765494; box-shadow: inset 0 1px 0 #c8acdd,0 4px 0 #50366a,0 5px 10px #4d346325; transform: translateY(1px); }
.number-button:disabled { opacity: .45; box-shadow: 0 2px 0 #d3c4e2; }
.number-button.is-result { color: #354c2d; background: var(--accent); border-color: #c0d19f; box-shadow: 0 5px 0 #acbf8c; }
.game-operators { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-block: 1.1rem 1.5rem; direction: ltr; }
.operator-button { display: inline-grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 1px solid #c4b2d4; border-radius: 50%; background: #e7ddf0; color: #644979; font-size: 1.45rem; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s, transform .15s; }
.operator-button:hover { background: #d8c8e6; transform: translateY(-2px); }
.operator-button[aria-pressed="true"], .operator-button.is-selected { color: #fff; background: #674b80; border-color: #674b80; }
.operator-button:disabled { opacity: .45; cursor: default; }
.game-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .75rem; }
.game-actions .button { min-height: 2.8rem; font-size: .75rem; }
.game-actions .button-primary { background: var(--plum); color: #fff; }
.game-actions .button-primary:hover { background: #493254; }
.game-reset, .demo-reset { min-height: 2.8rem; padding: .4rem .7rem; border: 0; color: #655273; background: transparent; font-size: .78rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.game-tool { min-height: 2.8rem; padding: .45rem .6rem; border: 0; color: #655273; background: transparent; font-size: .74rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.game-tool:hover { color: var(--plum); }
.game-tool:disabled { opacity: .45; cursor: default; }
.game-hint { margin: 1.2rem 0 0; padding: .8rem 1rem; color: #61457b; background: #ffffff70; border: 1px solid #d6c8e5; border-radius: .7rem; font-size: .8rem; text-align: center; }
.game-note { max-width: 35rem; margin: 1.2rem auto 0; color: #75657d; font-size: .67rem; line-height: 1.6; text-align: center; }
.game-lab.is-complete { border-color: #9cab81; background: #eef0e5; }
.game-lab.is-error { border-color: #bf8c83; }
.steps { margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: 2.2rem 1fr; gap: 1rem; padding-block: 1.25rem; border-top: 1px solid var(--line); }
.step-number { color: var(--lavender-ink); font-size: .67rem; font-weight: 700; font-variant-numeric: tabular-nums; padding-block-start: .15rem; }
.step h3 { margin-block-end: .4rem; font-size: 1rem; }
.step p { margin-block-end: 0; color: var(--muted); font-size: .83rem; line-height: 1.6; }

/* Modes are editorial rows; their difference is readable before any decoration. */
.modes-section { display: grid; grid-template-columns: .8fr 1fr; gap: clamp(2rem,8vw,8rem); border-top: 1px solid var(--line); }
.mode-list { min-width: 0; }
.journey-caption { grid-column: 2; margin: -1.5rem 0 0; padding-block-start: 1.3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; line-height: 1.7; }
.mode-row { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 1.25rem; align-items: start; padding-block: 1.75rem; border-top: 1px solid var(--line); }
.mode-row:first-child { padding-block-start: 0; border-top: 0; }
.mode-index { padding-block-start: .35rem; color: #816399; font-size: .67rem; font-weight: 700; }
.mode-copy h3 { margin-block-end: .75rem; font-size: 1.7rem; }
.mode-copy .eyebrow { margin-block-end: .6rem; color: var(--lavender-ink); font-size: .6rem; }
.mode-copy p { max-width: 33rem; margin: 0; color: var(--muted); font-size: .87rem; }
.mode-meta, .mode-duration { color: var(--lavender-ink); font-size: .68rem; font-weight: 650; }
.mode-meta { min-width: 3rem; text-align: end; padding-block-start: .4rem; }
.mode-meta strong { display: block; margin-block-end: .5rem; color: #84649b; font-size: 2.25rem; line-height: 1; font-weight: 500; letter-spacing: -.06em; }
.mode-meta > span { display: block; max-width: 9rem; font-size: .61rem; line-height: 1.5; }
.mode-symbol { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; color: #70508c; background: #e7ddf1; border: 1px solid #d8c7e6; border-radius: 1rem; font-size: 2rem; }
.mode-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; }
.mode-card { min-width: 0; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.mode-card h3 { margin-block-start: 1.2rem; }
.mode-card p { color: var(--muted); font-size: .9rem; }

/* An asymmetrical gallery gives the real application room to be the evidence. */
.showcase-section { width: min(var(--max), calc(100% - 2.5rem)); margin-inline: auto; padding: 4.5rem clamp(1.5rem,4vw,4rem); display: grid; grid-template-columns: .75fr 1.25fr; gap: 3rem; align-items: center; border-radius: 2rem; background: #e9e2f1; overflow: clip; }
.showcase-section .section-heading { margin-block-end: 3rem; }
.showcase-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(1.2rem,2.5vw,2.5rem); align-items: start; }
.showcase-item { min-width: 0; margin: 0; }
.showcase-item:nth-child(2) { padding-block-start: 3rem; }
.screenshot-shell { width: 100%; aspect-ratio: 480 / 854; padding: .35rem; border: 1px solid #b9abc8; border-radius: 1.6rem; background: #fffefa; box-shadow: 0 18px 32px #44255512; overflow: hidden; }
.screenshot-shell > img { width: 100%; height: 100%; border-radius: 1.25rem; object-fit: contain; object-position: center top; }
.screenshot-night { background: #251d32; border-color: #91829e; }
.showcase-item figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .65rem; margin-block-start: 1.15rem; color: #51405f; font-size: .8rem; line-height: 1.4; }
.showcase-item figcaption > span { color: #806b91; font-size: .62rem; font-weight: 650; }
.showcase-item figcaption strong { font-size: .82rem; font-weight: 650; }
.showcase-item figcaption p { flex-basis: 100%; margin: .1rem 0 0; color: #796984; font-size: .7rem; line-height: 1.65; }
.showcase-note { margin: 2rem 0 0; color: #74647e; font-size: .68rem; line-height: 1.6; }
.showcase-item a { display: block; text-decoration: none; }
.showcase-item a:hover .screenshot-shell { box-shadow: 0 22px 40px #44255520; }
.features-section .section-heading { max-width: 46rem; }
.features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem; }
.features-grid article { padding-block: 1.5rem; border-top: 1px solid var(--line); }
.feature-index { display: block; margin-block-end: 1.25rem; color: #84659e; font-size: .67rem; font-weight: 700; }
.features-grid h3 { font-size: 1.2rem; }
.features-grid p { margin: 0; color: var(--muted); font-size: .87rem; }

/* Answers and closing invitation stay short and useful. */
.faq-section { display: grid; grid-template-columns: .7fr 1fr; gap: clamp(2rem,8vw,8rem); }
.faq-section .section-heading { max-width: 23rem; }
.faq-list { min-width: 0; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; display: block; min-height: 4rem; padding: 1.3rem 0; padding-inline-end: 2rem; list-style: none; cursor: pointer; font-size: .96rem; font-weight: 600; line-height: 1.5; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; inset-inline-end: .2rem; inset-block-start: 1.3rem; color: var(--lavender-ink); font-size: 1.3rem; line-height: 1; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details > p, .faq-list details > div { max-width: 39rem; margin-block-end: 1.5rem; padding-inline-end: 1rem; color: var(--muted); font-size: .86rem; line-height: 1.75; }
.closing-band { position: relative; width: min(var(--max),calc(100% - 2.5rem)); margin: 0 auto 4rem; padding: 4.3rem 2rem; isolation: isolate; color: var(--paper); background: var(--plum); border-radius: 2rem; overflow: clip; text-align: center; }
.closing-band::before, .closing-band::after { content: "+"; position: absolute; z-index: -1; color: #ffffff06; font-size: 22rem; line-height: .8; font-weight: 400; pointer-events: none; }
.closing-band::before { inset-inline-start: -1rem; inset-block-start: -3rem; transform: rotate(-20deg); }
.closing-band::after { content: "×"; inset-inline-end: -3rem; inset-block-end: -4rem; transform: rotate(-12deg); }
.closing-band > img { width: 4rem; height: 3.3rem; margin: 0 auto 1.5rem; }
.closing-band h2 { max-width: 18ch; margin-inline: auto; color: #f6f0ff; }
.closing-band h2 .accent { color: var(--lavender); }
.closing-band p { max-width: 31rem; margin: 0 auto 1.5rem; color: #cdbed9; font-size: .92rem; }
.closing-band .hero-actions { justify-content: center; }
.closing-band .platform-status { justify-content: center; margin-block: 1rem 0; font-size: .65rem; }
.closing-orbit { display: none; }
.availability-pill { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid #877198; border-radius: 2rem; color: #dccde9; font-size: .72rem; }
.availability-pill::before { content: ""; width: .35rem; height: .35rem; border-radius: 50%; background: var(--accent); }

/* Help and privacy retain the same navigation and a generous reading measure. */
.legal-content { width: min(49rem,calc(100% - 4rem)); margin-inline: auto; padding-block: 3rem 6rem; }
.article-intro { padding-block: 1rem 2rem; margin-block-end: 2rem; border-bottom: 1px solid var(--line); }
.article-intro .eyebrow { color: var(--lavender-ink); }
.article-intro h1 { max-width: 18ch; margin-block-end: 1.5rem; font-size: clamp(2.8rem,5vw,4.6rem); font-weight: 620; line-height: 1.08; letter-spacing: -.055em; }
.article-intro .hero-lead { max-width: 45rem; margin-block-end: 0; }
.legal-section { padding-block: 1.6rem; border-bottom: 1px solid var(--line); }
.legal-section h2 { font-size: 1.5rem; line-height: 1.35; letter-spacing: -.03em; }
.legal-section p, .legal-section li { color: var(--muted); font-size: .94rem; line-height: 1.8; }
.legal-section p:last-child { margin-block-end: 0; }
.legal-section a { color: var(--lavender-ink); overflow-wrap: anywhere; }
.updated-date { color: var(--muted); font-size: .78rem; }
.legal-content > h2 { margin-block-start: 3rem; font-size: 2rem; }
.article-demo { max-width: 30rem; margin: 3rem auto; }
.support-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 2.5rem; }
.site-footer { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 2rem; padding-block: 1.5rem 2rem; font-size: .75rem; }
.site-footer .brand { font-size: 1.3rem; }
.site-footer > div:first-child { max-width: 25rem; }
.site-footer > div:first-child p { margin-block: .9rem 0; color: var(--muted); font-size: .75rem; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .25rem 1.5rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); font-size: .75rem; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; width: 100%; padding-block-start: 1.3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .65rem; }

/* Arabic prose follows RTL; equations and arithmetic controls remain explicitly LTR. */
[dir="rtl"] { font-family: "Digit Arabic", Tahoma, Arial, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .brand { letter-spacing: 0; }
[dir="rtl"] .brand, [dir="rtl"] .game-expression, [dir="rtl"] .game-numbers, [dir="rtl"] .game-operators { font-family: "Digit Sans", "Digit Arabic", Tahoma, sans-serif; }
[dir="rtl"] .hero-title { max-width: 12ch; font-size: clamp(3.1rem,5.4vw,5.2rem); line-height: 1.2; }
[dir="rtl"] h2 { line-height: 1.3; }
[dir="rtl"] .eyebrow, [dir="rtl"] .section-kicker, [dir="rtl"] .game-top > span { letter-spacing: 0; }
[dir="rtl"] .hero-stage { direction: ltr; }
[dir="rtl"] .hero-stage .screenshot-caption, [dir="rtl"] .glass-note { direction: rtl; }
[dir="rtl"] .hero-stage .phone-frame { transform: rotate(7deg); }
[dir="rtl"] .article-intro h1 { line-height: 1.3; }

@media (min-width: 96rem) {
  .hero { min-height: 41rem; }
  .hero-stage { padding-block: 4rem; }
}
@media (max-width: 68rem) {
  .site-header { gap: 1.25rem; }
  .site-nav { gap: .25rem 1.3rem; }
  .hero { min-height: 34rem; }
  .hero-copy { padding: 2.6rem; padding-inline-end: .5rem; }
  .hero-title { font-size: clamp(3.4rem,6.4vw,5rem); }
  .hero-stage { min-height: 32rem; padding-inline: 1rem; }
  .hero-stage::before { width: 25rem; height: 25rem; }
  .phone-frame { width: 12.8rem; }
  .floating-token { width: 4.3rem; height: 4.3rem; font-size: 3rem; }
  .token-plus { inset-inline-start: 1%; }
  .token-times { inset-inline-end: 0; }
  .token-number { width: 3rem; height: 3rem; font-size: 2.2rem; }
  .glass-note { inset-inline-start: .2rem; padding: .65rem .8rem; }
  .section { padding-block: 4.7rem; }
  .modes-section, .faq-section, .play-section { gap: 3rem; }
  .stats-strip > div { padding-inline: 1rem; }
}
@media (max-width: 51rem) {
  .container, .section, .site-header, .site-footer { width: calc(100% - 3rem); }
  .site-header { min-height: 5.5rem; gap: 1rem; }
  .site-nav { gap: .25rem 1rem; }
  .site-nav > a { font-size: .72rem; }
  .brand { font-size: 1.25rem; }
  .brand img { width: 2.3rem; height: 2.3rem; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 2.6rem 2.6rem 1rem; }
  .hero-title { max-width: 14ch; font-size: clamp(3.3rem,8vw,4.7rem); }
  .hero .hero-lead { max-width: 32rem; font-size: .94rem; }
  .hero-stage { min-height: 28rem; padding: 1.5rem 2rem 3rem; }
  .hero-stage::before { width: 26rem; height: 26rem; max-width: 90%; }
  .hero-stage::after { inset: 1.3rem 12%; }
  .stage-grid { inset: -4rem 0 0; }
  .phone-frame { width: 11.8rem; }
  .token-plus { inset-inline-start: 19%; inset-block-start: 27%; }
  .token-times { inset-inline-end: 18%; inset-block-end: 21%; }
  .token-number { inset-inline-end: 23%; inset-block-start: 5%; }
  .glass-note { inset-inline-start: 18%; inset-block-end: 16%; }
  .hero-stage > .screenshot-caption { inset-block-end: 1.2rem; }
  .stage-formula { inset-inline-start: 20%; inset-block-end: 15%; }
  .play-section, .modes-section, .faq-section, .section-grid { grid-template-columns: 1fr; gap: 2rem; }
  .section-heading { max-width: 36rem; margin-block-end: 1.5rem; }
  .play-intro .section-heading { margin-block-end: 1.5rem; }
  .steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; }
  .step { display: block; padding-block: 1rem .5rem; }
  .step-number { display: block; margin-block-end: .8rem; }
  .game-lab { width: min(100%,34rem); margin-inline: auto; padding: 2rem; }
  .mode-row:first-child { padding-block-start: 1.5rem; border-top: 1px solid var(--line); }
  .mode-list { max-width: 42rem; }
  .showcase-section { grid-template-columns: 1fr; gap: 1.5rem; padding: 3rem 2rem; }
  .showcase-section .section-heading { max-width: 35rem; margin-block-end: .5rem; }
  .showcase-grid { width: min(100%,33rem); margin-inline: auto; }
  .journey-caption { grid-column: 1; margin-block-start: -.5rem; }
  .showcase-grid { gap: 1.5rem; }
  .showcase-item:nth-child(2) { padding-block-start: 1.8rem; }
  .screenshot-shell { border-radius: 1.1rem; padding: .2rem; }
  .screenshot-shell > img { border-radius: .9rem; }
  .features-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .features-grid article:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .faq-section .section-heading { max-width: 36rem; }
  .closing-band { padding-block: 3.3rem; }
  .stats-strip { width: calc(100% - 4rem); }
  .stats-strip > div { flex-direction: column; justify-content: start; align-items: start; gap: .4rem; }
  .stats-strip span { max-width: none; }
  .legal-content .steps { grid-template-columns: 1fr; gap: 0; }
  .legal-content .step { display: grid; }
}
@media (max-width: 35rem) {
  .container, .section, .site-header, .site-footer { width: calc(100% - 2.5rem); }
  .site-header { min-height: 5.2rem; flex-wrap: wrap; gap: .25rem 1rem; padding-block: 1rem .8rem; }
  .site-header .brand { margin-inline-end: auto; }
  .site-nav { order: 3; width: 100%; justify-content: flex-start; margin: .4rem 0 0; gap: .25rem 1.4rem; }
  .site-nav > a { min-height: 2rem; font-size: .72rem; }
  .language-menu summary { min-height: 2.5rem; padding: .45rem .7rem; font-size: .7rem; }
  .hero { width: calc(100% - 1.25rem); border-radius: 1.4rem; }
  .hero-copy { padding: 2rem 1.4rem .75rem; }
  .hero .eyebrow { margin-block-end: 1.2rem; font-size: .6rem; }
  .hero-title { max-width: 12ch; margin-block-end: 1.2rem; font-size: clamp(2.75rem,11.5vw,3.9rem); line-height: 1.02; }
  .hero .hero-lead { margin-block-end: 1.3rem; font-size: .85rem; line-height: 1.65; }
  .hero-actions { gap: .6rem; }
  .button { gap: .5rem; min-height: 2.9rem; padding: .75rem 1rem; font-size: .75rem; }
  .launch-note { margin-block-start: .85rem; font-size: .63rem; }
  .hero-stage { min-height: 20.5rem; padding-block: .75rem 2.3rem; }
  .hero-stage::before { width: 20rem; height: 20rem; max-width: 96%; }
  .hero-stage::after { inset: 1rem 4%; }
  .phone-frame { width: 9.5rem; padding: .3rem; border-radius: 1.7rem; }
  .phone-screen, .phone-frame::after { border-radius: 1.35rem; }
  .phone-frame::after { inset: .3rem; }
  .phone-speaker { height: .65rem; inset-block-start: .35rem; }
  .token-plus { inset-inline-start: 6%; inset-block-start: 25%; width: 3.6rem; height: 3.6rem; font-size: 2.6rem; border-radius: .8rem; }
  .token-times { inset-inline-end: 5%; inset-block-end: 21%; width: 3.3rem; height: 3.3rem; font-size: 2.4rem; border-radius: .8rem; }
  .token-number { inset-inline-end: 16%; inset-block-start: 7%; width: 2.5rem; height: 2.5rem; font-size: 1.8rem; border-radius: .65rem; }
  .glass-note { inset-inline-start: 3%; inset-block-end: 14%; max-width: 8.6rem; padding: .6rem .75rem; font-size: .61rem; border-radius: .7rem; }
  .glass-note strong { font-size: 1rem; }
  .hero-stage > .screenshot-caption { inset-block-end: .8rem; font-size: .58rem; }
  .hero-phone .screenshot-caption { margin-block-start: 1rem; font-size: .55rem; }
  .stage-formula { inset-inline-start: 4%; inset-block-end: 16%; padding: .6rem .75rem; gap: .35rem; font-size: .85rem; border-radius: .7rem; }
  .stage-formula strong { font-size: 1.3rem; }
  .stats-strip { width: calc(100% - 2.5rem); padding-block: 1.6rem; }
  .stats-strip > div { padding-inline: .75rem; }
  .stats-strip > div:first-child { padding-inline-start: 0; }
  .stats-strip > div:last-child { padding-inline-end: 0; }
  .stats-strip strong { font-size: 1.3rem; }
  .stats-strip span { font-size: .64rem; }
  .section { padding-block: 3.7rem; }
  h2 { font-size: clamp(2.1rem,8.2vw,2.8rem); }
  .section-heading > p:not(.eyebrow):not(.section-kicker) { font-size: .87rem; }
  .section-lead { font-size: .85rem; }
  .eyebrow, .section-kicker { margin-block-end: 1.2rem; font-size: .6rem; }
  .play-section { gap: 1.8rem; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { display: grid; grid-template-columns: 1.7rem 1fr; gap: .7rem; padding-block: 1rem; }
  .step-number { margin: 0; }
  .step h3 { font-size: .94rem; }
  .step p { font-size: .78rem; }
  .game-lab { padding: 1.4rem 1.1rem; border-radius: 1.2rem; }
  .game-lab::before { inset-inline-end: -.5rem; inset-block-start: -.5rem; width: 2rem; height: 2rem; }
  .game-top { margin-block-end: 1rem; padding-block-end: 1rem; }
  .game-top > span { font-size: .58rem; }
  .game-target { font-size: .65rem; gap: .4rem; }
  .game-target strong { font-size: 1.8rem; }
  .game-expression { min-height: 3.8rem; font-size: 1.7rem; }
  .game-status { min-height: 3.5rem; font-size: .72rem; }
  .number-button { width: 3.4rem; min-height: 3.4rem; border-radius: .8rem; font-size: 1.5rem; }
  .game-numbers { gap: .55rem; }
  .operator-button { width: 2.75rem; height: 2.75rem; font-size: 1.3rem; }
  .game-note { font-size: .6rem; }
  .mode-row { grid-template-columns: 1.5rem 1fr; gap: .8rem; padding-block: 1.6rem; }
  .mode-meta { grid-column: 2; padding: 0; text-align: start; }
  .mode-meta strong { display: inline-block; margin: 0; margin-inline-end: .6rem; font-size: 1.3rem; }
  .mode-meta > span { display: inline; font-size: .65rem; }
  .mode-copy h3 { font-size: 1.5rem; margin-block-end: .5rem; }
  .mode-copy p { font-size: .82rem; }
  .mode-grid { grid-template-columns: 1fr; gap: .5rem; }
  .showcase-section { width: calc(100% - 1.25rem); padding: 2.5rem 1.25rem; border-radius: 1.4rem; }
  .showcase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.2rem; }
  .showcase-item:nth-child(2) { padding-block-start: 1.5rem; }
  .showcase-item:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - .6rem); justify-self: center; }
  .showcase-item figcaption { margin-block-start: .75rem; font-size: .69rem; }
  .showcase-item figcaption > span { font-size: .55rem; }
  .showcase-note { margin-block-start: 1.5rem; font-size: .61rem; }
  .features-grid { grid-template-columns: 1fr; gap: 0; }
  .features-grid article { padding-block: 1.5rem; }
  .features-grid h3 { font-size: 1.1rem; }
  .features-grid p { font-size: .82rem; }
  .faq-list summary { font-size: .87rem; padding-block: 1.15rem; }
  .faq-list summary::after { inset-block-start: 1.2rem; }
  .faq-list details > p { font-size: .8rem; }
  .closing-band { width: calc(100% - 1.25rem); padding: 2.8rem 1.4rem; margin-block-end: 2.3rem; border-radius: 1.4rem; }
  .closing-band p { font-size: .83rem; }
  .closing-band::before, .closing-band::after { font-size: 14rem; }
  .site-footer { gap: 1.2rem; }
  .footer-links { justify-content: flex-start; gap: .1rem 1.2rem; }
  .footer-bottom { gap: .5rem; font-size: .6rem; }
  .legal-content { width: calc(100% - 2.5rem); padding-block: 2rem 4rem; }
  .article-intro h1 { font-size: 2.6rem; }
  .article-intro .hero-lead { font-size: .93rem; }
  .support-grid { grid-template-columns: 1fr; }
  .legal-section h2 { font-size: 1.3rem; }
  .legal-section p, .legal-section li { font-size: .87rem; }
  [dir="rtl"] .hero-title { font-size: clamp(2.5rem,9.8vw,3.3rem); line-height: 1.23; }
  [dir="rtl"] h2 { font-size: clamp(1.9rem,7.2vw,2.5rem); }
}
@media (hover: none) {
  .button:hover, .number-button:hover:not(:disabled), .operator-button:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .hero, .closing-band, .game-lab, .number-button, .operator-button, .button, .phone-frame { border: 1px solid CanvasText; }
  .hero-stage::before, .hero-stage::after, .stage-grid, .stage-ring, .floating-token { display: none; }
}
@media print {
  body { color: #000; background: #fff; font-size: 11pt; }
  .site-nav, .language-menu, .hero-stage, .game-lab, .hero-actions, .skip-link { display: none; }
  .hero, .section, .site-header, .site-footer, .legal-content, .closing-band { width: 100%; padding: 1rem 0; color: #000; background: #fff; border-radius: 0; }
  .hero, .section-grid, .play-section, .modes-section, .faq-section { display: block; }
  .hero .hero-lead, .closing-band p { color: #333; }
  details > * { display: block !important; }
}
/* Final layout tuning from measured desktop and small-screen previews. */
.hero-title { max-width: none; font-size: clamp(3.5rem, 5.4vw, 5rem); }
.showcase-item figcaption p { color: #675672; }
.showcase-item figcaption > span { color: #675672; }
.game-note { color: #695970; }
.screenshot-caption { color: #ddd0ed; }
@media (max-width: 600px) {
  .hero-title { max-width: none; font-size: clamp(2rem, 9.8vw, 2.7rem); }
}

.modes-section { row-gap: 2rem; }
.hero-stage::before { animation: liquid-tide 12s ease-in-out infinite; }
@keyframes liquid-tide { 0%,100% { border-radius: 46% 54% 51% 49% / 52% 46% 54% 48%; } 50% { border-radius: 54% 46% 45% 55% / 47% 55% 45% 53%; } }
@media (prefers-reduced-motion: reduce) { .hero-stage::before { animation: none; } }

/* MIDNIGHT MATHEMATICS — requested studio palette */
/* Midnight mathematics — append after the shared layout, without altering routes. */
:root {
  color-scheme: dark;
  --paper: #191323;
  --surface: #281d37;
  --ink: #f3eefa;
  --muted: #c4b8d0;
  --plum: #302040;
  --plum-deep: #21162f;
  --lavender: #bfa7ff;
  --lavender-light: #49345f;
  --lavender-ink: #d3bafa;
  --accent: #cfe6c3;
  --accent-ink: #d7ebce;
  --line: #51405f;
}

/* Ambient color and a restrained coordinate grid replace the paper canvas. */
body {
  isolation: isolate;
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 85% 10%, #51305e3d, transparent 40%), radial-gradient(ellipse at 2% 55%, #3e2c6040, transparent 35%);
  color: var(--ink);
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image: linear-gradient(#c4a3eb0d 1px, transparent 1px), linear-gradient(90deg, #c4a3eb0d 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: linear-gradient(#000, #0009 75%, transparent);
}
::selection { color: #21162f; background: #d4c0ff; }
:focus-visible { outline-color: var(--accent); }
.site-header { border-bottom: 1px solid #a488bf24; }
.brand { color: var(--ink); }
.site-nav > a:hover, .site-nav > a[aria-current="page"] { color: #d3bafa; }
.language-menu summary, .language-menu select { border-color: #79638d; background: #ffffff04; color: #f0e7f8; }
.language-menu summary:hover { background: #c7a3ee13; }
.language-options, .language-menu ul { background: #2b1f3a; border-color: #6b527e; box-shadow: 0 15px 35px #0e091b66; }
.language-options a:hover, .language-options a[aria-current="true"] { color: #f9f2ff; background: #4b355e; }
.skip-link { background: #d0b8f3; color: #21162f; }
.button-primary { color: #261a34; background: #c2abf5; }
.button-primary:hover { background: #d0bdfb; box-shadow: 0 7px 25px #bfa7ff25; }
.button-secondary { color: #f1e7fa; border-color: #9378a7; background: #ffffff03; }
.button-secondary:hover { background: #4a355c; }
.hero .button-secondary, .closing-band .button-secondary { color: #f1e7fa; border-color: #a88abc; }
.hero .button-secondary:hover, .closing-band .button-secondary:hover { background: #bfa7ff12; }

/* The hero stays integrated with the page, while the lens is luminous violet. */
.hero {
  color: var(--ink);
  background: radial-gradient(ellipse at 88% 58%, #5938792e, transparent 62%), #2a1d3a;
  border: 1px solid #80609655;
  box-shadow: 0 22px 60px #0b071a24, inset 0 1px 0 #cbaee512;
}
.hero .eyebrow { color: #d3bce8; }
.hero .hero-lead { color: #ded0eb; }
.hero-title .accent { color: #c7adfb; }
.hero .platform-status, .platform-status > span { color: #c9b7d9; }
.hero-stage::before {
  background: radial-gradient(circle at 32% 26%, #e4d5f8 0, #c4ace8 34%, #9978c6 70%, #76569c 100%);
  box-shadow: inset 0 1px 2px #ffffff85, inset -20px -24px 55px #42225245, 0 0 70px #bc8df716;
}
.hero-stage::after { border-color: #c8a4e233; }
.stage-grid { opacity: .17; }
.stage-ring { border-color: #ebd8fc88; }
.hero-phone .screenshot-caption, .screenshot-caption { color: #e0cfee; }
.phone-frame { box-shadow: -18px 24px 38px #10081d63, 1px 1px 0 #e4d2f9aa inset, 0 0 0 1px #17101f; }
.floating-token {
  color: #ead9ff;
  border-color: #e7d0ff91;
  background: linear-gradient(145deg, #d8bdfc6b, #9a75ca59 52%, #6145828c);
  box-shadow: inset 1px 1px 0 #f8e8ffb0, inset -1px -1px 0 #ae8bce, 0 7px 0 #65458255, 0 19px 30px #12091f30;
  text-shadow: 0 2px 1px #6e4a8c;
}
.stage-formula, .glass-note {
  color: #f0e2fc;
  border-color: #c8a8e38a;
  background: #3b284edb;
  box-shadow: inset 0 1px 0 #e4c5ff35, 0 12px 25px #0e081d40;
}
.stage-formula i { color: #c6afd9; }
.stage-formula strong { color: #d2eac6; }
.hero-scroll { color: #d9c7e7; }
.stats-strip strong { color: #eee0fc; }
.stats-strip span { color: var(--muted); }

/* Original symbols are decorative landmarks, not claims or interface controls. */
.math-landmarks { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; user-select: none; }
.math-symbol { position: absolute; color: #d3b6fa; font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif; font-weight: 400; line-height: 1; opacity: .14; }
.symbol-pi { inset-inline-start: 8%; inset-block-start: 7%; font-size: 5rem; transform: rotate(-13deg); }
.symbol-sigma { inset-inline-end: 3%; inset-block-end: 8%; font-size: 6.2rem; transform: rotate(12deg); }
.symbol-root { inset-inline-start: 2%; inset-block-start: 57%; font-size: 4.3rem; transform: rotate(-10deg); }
.symbol-algebra { inset-inline-start: 42%; inset-block-end: 8%; font-size: 2.6rem; white-space: nowrap; letter-spacing: -.055em; transform: rotate(-7deg); }
.math-constellation { position: absolute; z-index: 0; inset: 0; color: #c9a5ec; opacity: .5; pointer-events: none; background: url("/assets/math-field.svg") center / cover no-repeat; }

/* The visitor puzzle uses a dark glass work surface and tactile lavender pieces. */
.game-lab { background: linear-gradient(135deg, #c49de30d, transparent 60%), #2b2039; border-color: #7e6091; box-shadow: inset 0 1px 0 #ecd5ff24, 0 16px 35px #0c071c22; }
.game-lab::before { border-color: #a984c1; }
.game-top { border-color: #665073; }
.game-top > span, .game-top .eyebrow { color: #cebadc; }
.game-top .game-orbit { color: #d3b6ee; }
.game-target { color: #d0bddf; }
.game-target strong { color: #f5eaff; }
.game-expression { color: #f4e9ff; border-color: #71517f; }
.game-status { color: #d2bfdf; }
.game-status[data-tone="success"], .game-status.is-success { color: #d5edc8; }
.game-status[data-tone="error"], .game-status.is-error { color: #ffbfc8; }
.number-button { color: #39254e; border-color: #d5c1ef; background: linear-gradient(145deg, #d8c6f4, #b69ad9); box-shadow: inset 0 1px 0 #f4e9ff, inset 0 -3px 4px #76598e20, 0 5px 0 #74578d, 0 9px 15px #12092142; }
.number-button[aria-pressed="true"], .number-button.is-selected { color: #2b3f24; background: #cfe6c3; border-color: #e2f4d7; box-shadow: inset 0 1px 0 #f5ffed, 0 4px 0 #788e68, 0 7px 12px #0c061f35; }
.number-button:disabled { opacity: .48; box-shadow: 0 2px 0 #705585; }
.number-button.is-result { color: #2b3f24; background: #cfe6c3; border-color: #dbefce; box-shadow: 0 5px 0 #7d926f; }
.operator-button { color: #e5d4f3; border-color: #8a6b9e; background: #483156; }
.operator-button:hover { background: #614272; }
.operator-button[aria-pressed="true"], .operator-button.is-selected { color: #2a1c38; border-color: #e1cdfa; background: #cbb2ed; }
.game-actions .button-primary { background: #c2abf5; color: #261a34; }
.game-actions .button-primary:hover { background: #d1c0fb; }
.game-tool, .game-reset, .demo-reset { color: #d6c1e5; }
.game-tool:hover { color: #f5eaff; }
.game-note { color: #c2afcf; }
.game-hint { color: #efddfc; background: #493153; border-color: #86639b; }
.game-lab.is-complete { background: #29382f; border-color: #96b488; }
.game-lab.is-error { border-color: #d8a0ac; }
.step-number { color: #c7a5e5; }
.step p { color: var(--muted); }

/* Editorial rows and the gallery remain distinct from the glass puzzle. */
.mode-index, .mode-copy .eyebrow { color: #c5a6df; }
.mode-copy p, .mode-card p { color: var(--muted); }
.mode-meta, .mode-duration { color: #c6b4d5; }
.mode-meta strong { color: #d7bdf4; }
.mode-symbol { color: #e2cdf7; background: #483055; border-color: #87659c; }
.journey-caption { color: #c1b0ce; }
.showcase-section { background: linear-gradient(120deg, #c19de80a, transparent 55%), #30213e; border: 1px solid #74518270; box-shadow: inset 0 1px 0 #e1bffd16; }
.showcase-item figcaption { color: #efe3f8; }
.showcase-item figcaption strong { color: #f2e8fa; }
.showcase-item figcaption > span, .showcase-number { color: #d0b4e5; }
.showcase-item figcaption p { color: #cbb9d7; }
.showcase-note { color: #c4b1d1; }
.screenshot-shell { border-color: #ac8fc2; background: #50395f; box-shadow: 0 20px 35px #0c061b33; }
.screenshot-night { border-color: #8e719f; background: #1d1529; }
.feature-index { color: #cba6e8; }
.features-grid p { color: var(--muted); }
.faq-list details > p, .faq-list details > div { color: #c8b7d5; }
.faq-list summary::after { color: #c8a9ed; }
.text-link:hover { color: #dfc7fa; }

/* Future online play is explicitly a roadmap, with rows rather than fake live features. */
.roadmap-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); border-top: 1px solid #684975; }
.roadmap-section .section-heading { max-width: 29rem; }
.roadmap-list { min-width: 0; }
.roadmap-item { position: relative; display: grid; grid-template-columns: 2rem 1fr; column-gap: 1rem; padding-block: 1.8rem; border-top: 1px solid #5b4268; }
.roadmap-item:first-child { border-top-color: #9372a4; }
.roadmap-number { grid-row: 1 / span 3; padding-block-start: .25rem; color: #c8e1bc; font-size: .72rem; line-height: 1.4; font-weight: 650; font-family: "Digit Sans", "Digit Arabic", sans-serif; }
.roadmap-item h3 { margin-block: .5rem .7rem; font-size: 1.5rem; color: #f0e6f8; }
.roadmap-item p { max-width: 38rem; margin-block-end: 0; color: #c6b5d3; font-size: .86rem; line-height: 1.75; }
.roadmap-status { display: inline-flex; align-items: center; gap: .4rem; justify-self: start; width: fit-content; min-height: 1.6rem; padding: .2rem .6rem; border: 1px solid #91ad7a80; border-radius: 2rem; background: #cfe6c30c; color: #cfe6c3; font-size: .59rem; font-weight: 600; letter-spacing: .07em; line-height: 1.4; text-transform: uppercase; }
.roadmap-status::before { content: ""; width: .25rem; height: .25rem; border: 1px solid currentColor; border-radius: 50%; }
.roadmap-note { grid-column: 2; margin: -1rem 0 0; padding-block-start: 1.1rem; border-top: 1px solid var(--line); color: #c5b1d2; font-size: .72rem; line-height: 1.7; }

.closing-band { color: var(--ink); background: radial-gradient(ellipse at 50% -40%, #71509155, transparent 70%), #302040; border: 1px solid #8c64a254; box-shadow: inset 0 1px 0 #caa3e91f; }
.closing-band p { color: #d1bddf; }
.closing-band::before, .closing-band::after { color: #c49ae811; }
.availability-pill { color: #e0cceb; border-color: #9f7fb2; }
.site-footer > div:first-child p, .footer-bottom { color: #bfaccb; }
.footer-links a { color: #e2d2ee; }
.legal-content { color: #f0e6f7; }
.legal-section p, .legal-section li, .updated-date { color: #cbbbD7; }
.legal-section a { color: #d8bffa; }
.legal-section a:hover { color: #ead6ff; }
.legal-content code { color: #e2caf6; }
[dir="rtl"] .roadmap-status { letter-spacing: 0; }

@media (max-width: 68rem) {
  .symbol-pi { inset-inline-start: 6%; font-size: 4rem; }
  .symbol-sigma { font-size: 5rem; }
  .symbol-root { font-size: 3.6rem; }
  .symbol-algebra { inset-inline-start: 37%; font-size: 2rem; }
  .math-constellation { background-position: 58% center; }
}
@media (max-width: 51rem) {
  .symbol-pi { inset-inline-start: auto; inset-inline-end: 7%; inset-block-start: 5%; font-size: 4rem; opacity: .11; }
  .symbol-sigma { inset-block-end: 4%; inset-inline-end: 7%; font-size: 4.5rem; }
  .symbol-root { inset-block-start: 43%; inset-inline-start: 3%; opacity: .09; }
  .symbol-algebra { inset-block-end: 5%; inset-inline-start: 6%; font-size: 1.9rem; }
  .math-constellation { background-position: center; opacity: .4; }
  .roadmap-section { grid-template-columns: 1fr; gap: 1rem; }
  .roadmap-section .section-heading { max-width: 36rem; }
  .roadmap-note { grid-column: 1; margin-block-start: 0; }
}
@media (max-width: 35rem) {
  body::before { background-size: 3.5rem 3.5rem; opacity: .22; }
  .symbol-pi { inset-inline-end: 6%; inset-block-start: 3%; font-size: 3rem; }
  .symbol-sigma { inset-inline-end: 3%; inset-block-end: 5%; font-size: 3.5rem; opacity: .12; }
  .symbol-root { display: none; }
  .symbol-algebra { inset-inline-start: 5%; inset-block-end: 4%; font-size: 1.5rem; opacity: .12; }
  .math-constellation { opacity: .35; }
  .roadmap-item { grid-template-columns: 1.4rem 1fr; column-gap: .75rem; padding-block: 1.5rem; }
  .roadmap-item h3 { font-size: 1.3rem; }
  .roadmap-item p { font-size: .8rem; }
  .roadmap-number { font-size: .65rem; }
  .roadmap-status { font-size: .55rem; }
  .roadmap-note { font-size: .66rem; }
}
@media (forced-colors: active) {
  body, .hero, .game-lab, .showcase-section, .closing-band, .language-options { color: CanvasText; background: Canvas; }
  body::before, .math-landmarks, .math-constellation { display: none; }
  .button, .number-button, .operator-button, .roadmap-status { border: 1px solid ButtonText; color: ButtonText; background: ButtonFace; }
}
@media print {
  body { background: #fff; color: #000; }
  body::before, .math-landmarks, .math-constellation { display: none; }
  .hero, .section, .showcase-section, .closing-band, .legal-content { background: #fff; color: #000; border-color: #aaa; box-shadow: none; }
  .hero .hero-lead, .section-lead, .mode-copy p, .journey-caption, .roadmap-item p, .faq-list details > p, .closing-band p, .legal-section p, .legal-section li { color: #333; }
}