@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/fonts/inter-latin.3100e775e8.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/fonts/inter-latin-ext.34b9c504ca.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Plex Arabic"; font-weight: 400; font-display: swap;
src: url(/fonts/plex-arabic-400.6010e7fd0d.woff2) format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-weight: 500; font-display: swap;
src: url(/fonts/plex-arabic-500.90aef64fea.woff2) format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-weight: 600; font-display: swap;
src: url(/fonts/plex-arabic-600.16734a5adb.woff2) format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-weight: 700; font-display: swap;
src: url(/fonts/plex-arabic-700.04c730b429.woff2) format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
:root {
color-scheme: dark;
--bg:            #050b1a;
--bg-raised:     #081226;
--surface:       #0c1830;
--surface-2:     #11203d;
--surface-3:     #172a4d;
--border:        rgb(150 180 230 / 0.13);
--border-strong: rgb(150 180 230 / 0.24);
--overlay:       rgb(3 8 20 / 0.72);
--text:   #eef3fc;
--text-2: #b3c2dc;
--text-3: #8093b3;
--brand:        #3d9dff;
--brand-strong: #6cb4ff;
--brand-soft:   rgb(61 157 255 / 0.14);
--brand-ink:    #03122b;
--copper:       #e0986a;
--copper-soft:  rgb(224 152 106 / 0.14);
--success:      #3ddc97;
--success-soft: rgb(61 220 151 / 0.12);
--warning:      #f5c451;
--warning-soft: rgb(245 196 81 / 0.12);
--danger:       #ff7b7b;
--danger-soft:  rgb(255 123 123 / 0.12);
--glow-1: rgb(61 157 255 / 0.20);
--glow-2: rgb(224 152 106 / 0.10);
--shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
--shadow-2: 0 8px 24px -8px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.25);
--shadow-3: 0 24px 60px -20px rgb(0 0 0 / 0.65), 0 8px 20px -8px rgb(0 0 0 / 0.35);
--font-latin:  "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-arabic: "Plex Arabic", "Inter", "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
--font-mono:   ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
--font: var(--font-latin);
--step--1: 0.875rem;
--step-0:  1rem;
--step-1:  1.125rem;
--step-2:  clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
--step-3:  clamp(1.55rem, 1.25rem + 1.3vw, 2.25rem);
--step-4:  clamp(2rem, 1.35rem + 2.8vw, 3.25rem);
--step-5:  clamp(2.45rem, 1.4rem + 4.4vw, 4.4rem);
--leading:       1.6;
--leading-tight: 1.12;
--tracking-display: -0.028em;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--section: clamp(4.5rem, 3rem + 6vw, 8rem);
--gutter:  clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem);
--max:     72rem;
--max-narrow: 46rem;
--r-1: 6px;
--r-2: 10px;
--r-3: 14px;
--r-4: 20px;
--r-5: 28px;
--r-pill: 999px;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--fast: 140ms;
--base: 220ms;
--slow: 420ms;
--focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--brand);
--header-h: 4rem;
}
:root[data-theme="light"] {
color-scheme: light;
--bg:            #ffffff;
--bg-raised:     #f7f9fd;
--surface:       #ffffff;
--surface-2:     #f2f6fc;
--surface-3:     #e8eef8;
--border:        #e1e8f2;
--border-strong: #c9d5e6;
--overlay:       rgb(10 22 48 / 0.45);
--text:   #0a1630;
--text-2: #44536d;
--text-3: #66758f;
--brand:        #0b6fd9;
--brand-strong: #0858b0;
--brand-soft:   rgb(11 111 217 / 0.09);
--brand-ink:    #ffffff;
--copper:       #a4592a;
--copper-soft:  rgb(164 89 42 / 0.09);
--success:      #0f8a5f;
--success-soft: rgb(15 138 95 / 0.09);
--warning:      #9a6700;
--warning-soft: rgb(154 103 0 / 0.1);
--danger:       #c4302b;
--danger-soft:  rgb(196 48 43 / 0.08);
--glow-1: rgb(11 111 217 / 0.12);
--glow-2: rgb(164 89 42 / 0.07);
--shadow-1: 0 1px 2px rgb(10 22 48 / 0.06);
--shadow-2: 0 8px 24px -10px rgb(10 22 48 / 0.18), 0 2px 6px rgb(10 22 48 / 0.06);
--shadow-3: 0 28px 60px -24px rgb(10 22 48 / 0.28), 0 8px 20px -10px rgb(10 22 48 / 0.1);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
color-scheme: light;
--bg:            #ffffff;
--bg-raised:     #f7f9fd;
--surface:       #ffffff;
--surface-2:     #f2f6fc;
--surface-3:     #e8eef8;
--border:        #e1e8f2;
--border-strong: #c9d5e6;
--overlay:       rgb(10 22 48 / 0.45);
--text:   #0a1630;
--text-2: #44536d;
--text-3: #66758f;
--brand:        #0b6fd9;
--brand-strong: #0858b0;
--brand-soft:   rgb(11 111 217 / 0.09);
--brand-ink:    #ffffff;
--copper:       #a4592a;
--copper-soft:  rgb(164 89 42 / 0.09);
--success:      #0f8a5f;
--success-soft: rgb(15 138 95 / 0.09);
--warning:      #9a6700;
--warning-soft: rgb(154 103 0 / 0.1);
--danger:       #c4302b;
--danger-soft:  rgb(196 48 43 / 0.08);
--glow-1: rgb(11 111 217 / 0.12);
--glow-2: rgb(164 89 42 / 0.07);
--shadow-1: 0 1px 2px rgb(10 22 48 / 0.06);
--shadow-2: 0 8px 24px -10px rgb(10 22 48 / 0.18), 0 2px 6px rgb(10 22 48 / 0.06);
--shadow-3: 0 28px 60px -24px rgb(10 22 48 / 0.28), 0 8px 20px -10px rgb(10 22 48 / 0.1);
}
}
:root:lang(ar) {
--font: var(--font-arabic);
--leading: 1.85;
--leading-tight: 1.35;
--tracking-display: 0;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-block-start: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
min-block-size: 100vh;
display: flex;
flex-direction: column;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: var(--step-0);
line-height: var(--leading);
font-feature-settings: "cv11", "ss01";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
main { flex: 1; }
img, svg, video, picture { display: block; max-inline-size: 100%; block-size: auto; }
svg { flex: none; }
h1, h2, h3, h4 {
margin: 0;
line-height: var(--leading-tight);
font-weight: 700;
letter-spacing: var(--tracking-display);
text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.012em; }
h4 { font-size: var(--step-1); font-weight: 600; letter-spacing: 0; }
:lang(ar) h3 { letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-block-start: var(--space-4); }
a { color: var(--brand-strong); text-decoration: none; text-underline-offset: 0.2em; }
a:hover { text-decoration: underline; }
strong, b { font-weight: 600; }
small { font-size: var(--step--1); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }
ul, ol { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
hr { border: 0; border-block-start: 1px solid var(--border); margin: var(--space-6) 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:disabled { cursor: not-allowed; }
::selection { background: var(--brand); color: var(--brand-ink); }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-1); }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { box-shadow: none; outline: none; }
[hidden] { display: none !important; }
.tabular { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }
bdi { unicode-bidi: isolate; }
.visually-hidden {
position: absolute !important;
inline-size: 1px; block-size: 1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap;
}
.skip-link {
position: absolute;
inset-inline-start: var(--space-4);
inset-block-start: -4rem;
z-index: 100;
padding: var(--space-3) var(--space-4);
background: var(--brand);
color: var(--brand-ink);
border-radius: var(--r-2);
font-weight: 600;
transition: inset-block-start var(--fast) var(--ease);
}
.skip-link:focus { inset-block-start: var(--space-4); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.container { inline-size: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.container--narrow { inline-size: min(100% - 2 * var(--gutter), var(--max-narrow)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section + .section { padding-block-start: 0; }
.stack > * + * { margin-block-start: var(--stack, var(--space-4)); }
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--brand-strong);
font-size: var(--step--1);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
:lang(ar) .eyebrow { letter-spacing: 0; text-transform: none; font-size: var(--step-0); }
.eyebrow svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }
.lede { color: var(--text-2); font-size: var(--step-1); max-inline-size: 40rem; }
.muted { color: var(--text-2); }
.subtle { color: var(--text-3); font-size: var(--step--1); }
.section-head { max-inline-size: 44rem; margin-block-end: var(--space-7); }
.section-head > * + * { margin-block-start: var(--space-4); }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .lede { margin-inline: auto; }
.btn {
--btn-bg: var(--surface-2);
--btn-fg: var(--text);
--btn-border: var(--border-strong);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-block-size: 2.625rem;
padding: 0 1.125rem;
border: 1px solid var(--btn-border);
border-radius: var(--r-pill);
background: var(--btn-bg);
color: var(--btn-fg);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none;
transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn:hover { text-decoration: none; --btn-bg: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus); border-radius: var(--r-pill); }
.btn svg { inline-size: 1.1em; block-size: 1.1em; }
.btn--primary {
--btn-bg: var(--brand);
--btn-fg: var(--brand-ink);
--btn-border: transparent;
box-shadow: 0 6px 20px -8px var(--brand);
}
.btn--primary:hover { --btn-bg: var(--brand-strong); }
.btn--ghost { --btn-bg: transparent; --btn-border: transparent; color: var(--text-2); }
.btn--ghost:hover { --btn-bg: var(--surface-2); color: var(--text); }
.btn--outline { --btn-bg: transparent; }
.btn--lg { min-block-size: 3.125rem; padding: 0 1.5rem; font-size: 1rem; }
.btn--sm { min-block-size: 2.125rem; padding: 0 0.875rem; font-size: 0.875rem; }
.btn--block { inline-size: 100%; }
.btn--icon { padding: 0; inline-size: 2.5rem; min-block-size: 2.5rem; }
.btn[aria-busy="true"] { color: transparent; position: relative; pointer-events: none; }
.btn[aria-busy="true"]::after {
content: "";
position: absolute;
inline-size: 1.1rem; block-size: 1.1rem;
border: 2px solid var(--btn-fg);
border-block-start-color: transparent;
border-radius: 50%;
animation: spin 700ms linear infinite;
}
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; pointer-events: none; }
@keyframes spin { to { transform: rotate(1turn); } }
.badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
border-radius: var(--r-pill);
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text-2);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
}
.badge--brand { background: var(--brand-soft); border-color: transparent; color: var(--brand-strong); }
.badge--copper { background: var(--copper-soft); border-color: transparent; color: var(--copper); }
.badge--success { background: var(--success-soft); border-color: transparent; color: var(--success); }
.badge--warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.badge svg { inline-size: 0.95em; block-size: 0.95em; }
.card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-4);
padding: clamp(1.25rem, 1rem + 1vw, 2rem);
box-shadow: var(--shadow-1);
}
.card--raised { box-shadow: var(--shadow-2); }
.card--flat { background: var(--bg-raised); box-shadow: none; }
.card__title { font-size: var(--step-1); font-weight: 600; letter-spacing: 0; }
.card > * + * { margin-block-start: var(--space-3); }
.icon-tile {
display: inline-grid;
place-items: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: var(--r-3);
background: var(--brand-soft);
color: var(--brand-strong);
}
.icon-tile svg { inline-size: 1.35rem; block-size: 1.35rem; }
.icon-tile--copper { background: var(--copper-soft); color: var(--copper); }
.checks { list-style: none; display: grid; gap: var(--space-3); }
.checks li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--space-3); color: var(--text-2); }
.checks svg { inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: 0.3em; color: var(--success); }
.checks--brand svg { color: var(--brand-strong); }
.field { display: grid; gap: var(--space-2); }
.field + .field { margin-block-start: var(--space-4); }
.field + .btn { margin-block-start: var(--space-5); }
.field__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.label { font-size: 0.9375rem; font-weight: 600; color: var(--text); }
.hint { font-size: var(--step--1); color: var(--text-3); }
.field__error { font-size: var(--step--1); color: var(--danger); }
.input {
inline-size: 100%;
min-block-size: 2.875rem;
padding: 0 0.875rem;
background: var(--bg-raised);
border: 1px solid var(--border-strong);
border-radius: var(--r-2);
color: var(--text);
transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.input::placeholder { color: var(--text-3); }
.input:hover { border-color: var(--text-3); }
.input:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); border-radius: var(--r-2); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input[type="email"], .input--ltr { direction: ltr; text-align: start; }
:lang(ar) .input[type="email"], :lang(ar) .input--ltr { text-align: end; }
.input-group { position: relative; }
.input-group .input { padding-inline-end: 3rem; }
.input-group__action {
position: absolute;
inset-block: 0.3rem;
inset-inline-end: 0.3rem;
display: grid;
place-items: center;
inline-size: 2.4rem;
border: 0;
border-radius: var(--r-1);
background: transparent;
color: var(--text-3);
}
.input-group__action:hover { color: var(--text); background: var(--surface-2); }
.input-group__action svg { inline-size: 1.15rem; block-size: 1.15rem; }
.meter { display: flex; gap: 4px; margin-block-start: var(--space-2); }
.meter span { flex: 1; block-size: 4px; border-radius: 2px; background: var(--surface-3); transition: background var(--base) var(--ease); }
.meter[data-score="1"] span:nth-child(-n+1) { background: var(--danger); }
.meter[data-score="2"] span:nth-child(-n+2) { background: var(--warning); }
.meter[data-score="3"] span:nth-child(-n+3) { background: var(--brand); }
.meter[data-score="4"] span:nth-child(-n+4) { background: var(--success); }
.alert {
display: grid;
grid-template-columns: 1.25rem 1fr;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--r-3);
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text);
font-size: 0.9375rem;
}
.alert svg { inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: 0.25em; }
.alert--info    { background: var(--brand-soft);   border-color: transparent; }
.alert--info svg { color: var(--brand-strong); }
.alert--success { background: var(--success-soft); border-color: transparent; }
.alert--success svg { color: var(--success); }
.alert--warning { background: var(--warning-soft); border-color: transparent; }
.alert--warning svg { color: var(--warning); }
.alert--danger  { background: var(--danger-soft);  border-color: transparent; }
.alert--danger svg { color: var(--danger); }
.segmented {
display: inline-flex;
padding: 4px;
gap: 4px;
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: var(--r-pill);
}
.segmented button {
min-block-size: 2.25rem;
padding: 0 1rem;
border: 0;
border-radius: var(--r-pill);
background: transparent;
color: var(--text-2);
font-weight: 600;
font-size: 0.9375rem;
}
.segmented button[aria-selected="true"] { background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-1); }
.segmented button:focus-visible { box-shadow: var(--focus); border-radius: var(--r-pill); }
.tabs { display: flex; gap: var(--space-1); border-block-end: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
position: relative;
padding: var(--space-3) var(--space-4);
border: 0;
background: transparent;
color: var(--text-2);
font-weight: 600;
white-space: nowrap;
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); }
.tabs button[aria-selected="true"]::after {
content: "";
position: absolute;
inset-inline: var(--space-3);
inset-block-end: -1px;
block-size: 2px;
border-radius: 2px;
background: var(--brand);
}
.accordion { border-block-start: 1px solid var(--border); }
.accordion details { border-block-end: 1px solid var(--border); }
.accordion summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-block: var(--space-5);
font-size: var(--step-1);
font-weight: 600;
cursor: pointer;
list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
content: "";
flex: none;
inline-size: 0.6rem;
block-size: 0.6rem;
border-inline-end: 2px solid var(--text-3);
border-block-end: 2px solid var(--text-3);
transform: rotate(45deg) translateY(-2px);
transition: transform var(--base) var(--ease);
}
.accordion details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.accordion summary:focus-visible { box-shadow: var(--focus); border-radius: var(--r-1); }
.accordion__body { padding-block-end: var(--space-5); color: var(--text-2); max-inline-size: 48rem; }
.rows { display: grid; }
.rows > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
padding-block: var(--space-3);
border-block-end: 1px solid var(--border);
}
.rows > div:last-child { border-block-end: 0; }
.rows dt, .rows .k { color: var(--text-2); }
.rows dd, .rows .v { margin: 0; font-weight: 600; text-align: end; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-3); }
.table { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: start; border-block-end: 1px solid var(--border); white-space: nowrap; }
.table th { color: var(--text-3); font-weight: 600; font-size: var(--step--1); background: var(--bg-raised); }
.table tr:last-child td { border-block-end: 0; }
.table td.num, .table th.num { text-align: end; font-variant-numeric: tabular-nums; }
.pos { color: var(--success); }
.neg { color: var(--text-2); }
.skeleton {
display: inline-block;
min-inline-size: 4ch;
border-radius: var(--r-1);
background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
background-size: 200% 100%;
color: transparent !important;
animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.spinner {
inline-size: 1.25rem;
block-size: 1.25rem;
border: 2px solid var(--border-strong);
border-block-start-color: var(--brand);
border-radius: 50%;
animation: spin 700ms linear infinite;
}
kbd, .kbd {
display: inline-block;
padding: 0.1rem 0.45rem;
border: 1px solid var(--border-strong);
border-block-end-width: 2px;
border-radius: var(--r-1);
background: var(--surface-2);
font-family: var(--font-mono);
font-size: 0.8em;
line-height: 1.5;
direction: ltr;
unicode-bidi: isolate;
}
.toast {
position: fixed;
inset-block-end: var(--space-5);
inset-inline: 0;
margin-inline: auto;
inline-size: max-content;
max-inline-size: calc(100% - 2 * var(--gutter));
z-index: 60;
padding: var(--space-3) var(--space-5);
border-radius: var(--r-pill);
background: var(--text);
color: var(--bg);
font-weight: 600;
box-shadow: var(--shadow-3);
transform: translateY(calc(100% + 3rem));
visibility: hidden;
transition: transform var(--base) var(--ease), visibility 0s linear var(--base);
}
.toast[data-show="true"] { transform: none; visibility: visible; transition: transform var(--base) var(--ease); }
.site-header {
position: sticky;
inset-block-start: 0;
z-index: 50;
block-size: var(--header-h);
background: color-mix(in srgb, var(--bg) 72%, transparent);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-block-end: 1px solid transparent;
transition: border-color var(--base) var(--ease), background var(--base) var(--ease);
}
.site-header[data-scrolled="true"] { border-block-end-color: var(--border); background: color-mix(in srgb, var(--bg) 86%, transparent); }
.site-header--minimal { position: static; background: transparent; backdrop-filter: none; }
.site-header__inner {
display: flex;
align-items: center;
gap: var(--space-5);
block-size: 100%;
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: var(--text);
font-weight: 700;
font-size: 1.0625rem;
letter-spacing: -0.01em;
white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand img { inline-size: 30px; block-size: 30px; border-radius: 8px; }
:lang(ar) .brand { letter-spacing: 0; }
.site-nav { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: var(--space-4); }
.site-nav > a {
padding: 0.5rem 0.75rem;
border-radius: var(--r-pill);
color: var(--text-2);
font-size: 0.9375rem;
font-weight: 500;
transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.site-nav > a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.site-nav > a[aria-current="page"] { color: var(--text); }
.site-nav__extra { display: none; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }
:root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }
}
.nav-toggle { display: none; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (max-width: 880px) {
.nav-toggle { display: inline-flex; }
.hide-narrow { display: none; }
.lang-switch span { display: none; }
.lang-switch { padding: 0; inline-size: 2.5rem; }
.site-nav {
position: fixed;
inset: var(--header-h) 0 auto 0;
margin: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--space-4) var(--gutter) var(--space-6);
background: var(--bg);
border-block-end: 1px solid var(--border);
box-shadow: var(--shadow-3);
transform: translateY(-0.5rem);
opacity: 0;
visibility: hidden;
transition: opacity var(--base) var(--ease), transform var(--base) var(--ease), visibility 0s linear var(--base);
}
.site-nav[data-open="true"] {
transform: none;
opacity: 1;
visibility: visible;
transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
}
.site-nav > a { padding: var(--space-4) var(--space-2); border-radius: 0; border-block-end: 1px solid var(--border); font-size: var(--step-1); }
.site-nav > a:hover { background: transparent; }
.site-nav__extra { display: grid; gap: var(--space-3); margin-block-start: var(--space-5); }
}
.site-footer {
margin-block-start: var(--space-6);
border-block-start: 1px solid var(--border);
background: var(--bg-raised);
font-size: 0.9375rem;
}
.site-footer__grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
gap: var(--space-7) var(--space-6);
padding-block: var(--space-8) var(--space-7);
}
.site-footer__brand > * + * { margin-block-start: var(--space-4); }
.site-footer__brand .muted { max-inline-size: 22rem; }
.site-footer__mail { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); font-weight: 500; }
.site-footer__mail svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--text-3); }
.site-footer__head {
margin-block-end: var(--space-4);
color: var(--text);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
:lang(ar) .site-footer__head { letter-spacing: 0; text-transform: none; font-size: 0.9375rem; }
.site-footer ul { display: grid; gap: var(--space-3); }
.site-footer ul a { color: var(--text-2); }
.site-footer ul a:hover { color: var(--text); }
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-block: var(--space-5);
border-block-start: 1px solid var(--border);
color: var(--text-3);
font-size: var(--step--1);
}
.site-footer__bottom a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-2); }
.site-footer__bottom svg { inline-size: 1rem; block-size: 1rem; }
@media (max-width: 880px) {
.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}
.band {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-7);
align-items: start;
padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
border: 1px solid var(--border);
border-radius: var(--r-5);
background:
radial-gradient(60% 80% at 100% 0%, var(--brand-soft), transparent 70%),
var(--bg-raised);
}
.band > div > * + * { margin-block-start: var(--space-4); }
@media (max-width: 860px) { .band { grid-template-columns: minmax(0, 1fr); } }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); max-inline-size: 56rem; margin-inline: auto; }
.plan { display: flex; flex-direction: column; gap: var(--space-4); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.plan > * + * { margin-block-start: 0; }
.plan--featured {
border-color: color-mix(in srgb, var(--brand) 55%, transparent);
background:
radial-gradient(80% 60% at 100% 0%, var(--brand-soft), transparent 70%),
var(--surface);
box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent);
}
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.plan__name { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.01em; }
:lang(ar) .plan__name { letter-spacing: 0; }
.plan__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.plan__amount { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
:lang(ar) .plan__amount { letter-spacing: 0; }
.plan__per { color: var(--text-2); }
.plan__then { color: var(--text-2); min-block-size: 1.6em; }
.plan .checks { margin-block: var(--space-2); }
.plan__cta { margin-block-start: auto; }
@media (max-width: 760px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.pack { display: flex; flex-direction: column; gap: var(--space-2); }
.pack > * + * { margin-block-start: 0; }
.pack__credits { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; }
:lang(ar) .pack__credits { letter-spacing: 0; }
.pack__price { font-size: var(--step-1); font-weight: 600; }
.pack__rate { color: var(--text-3); font-size: var(--step--1); }
.pack .paypal-slot { margin-block-start: var(--space-4); }
.pack--best { border-color: color-mix(in srgb, var(--copper) 50%, transparent); }
@media (max-width: 760px) { .packs { grid-template-columns: minmax(0, 1fr); } }
.coming { display: flex; gap: var(--space-3); align-items: center; }
.compare th:not(:first-child), .compare td:not(:first-child) { text-align: center; }
.compare td svg { inline-size: 1.1rem; block-size: 1.1rem; margin-inline: auto; color: var(--success); }
.compare .nil { color: var(--text-3); }
.compare td { white-space: normal; }
.dl-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.dl-card > * + * { margin-block-start: var(--space-5); }
.dl-card__version { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dl-sha {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
border: 1px solid var(--border);
border-radius: var(--r-2);
background: var(--bg-raised);
}
.dl-sha code { flex: 1; overflow-wrap: anywhere; font-size: 0.8125rem; color: var(--text-2); direction: ltr; text-align: start; }
.code-block {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
border: 1px solid var(--border);
border-radius: var(--r-3);
background: var(--bg-raised);
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--text-2);
direction: ltr;
text-align: left;
}
.code-block > span { flex: 1; min-inline-size: 0; overflow-x: auto; white-space: pre; padding-block: var(--space-1); }
.code-block .btn { flex: none; }
.numbered { counter-reset: n; display: grid; gap: var(--space-4); list-style: none; }
.numbered li { position: relative; padding-inline-start: 2.75rem; color: var(--text-2); }
.numbered li strong { color: var(--text); }
.numbered li::before {
counter-increment: n;
content: counter(n);
position: absolute;
inset-inline-start: 0;
inset-block-start: -0.1rem;
display: grid;
place-items: center;
inline-size: 1.9rem;
block-size: 1.9rem;
border-radius: 50%;
background: var(--surface-2);
color: var(--text);
font-weight: 700;
font-size: 0.875rem;
}
@media (max-width: 860px) { .dl-hero { grid-template-columns: minmax(0, 1fr); } }
.page-head {
position: relative;
isolation: isolate;
padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
text-align: center;
}
.page-head::before {
content: "";
position: absolute;
z-index: -1;
inset: -40% 0 0;
background: radial-gradient(40% 60% at 50% 30%, var(--glow-1), transparent 70%);
pointer-events: none;
}
.page-head > .container > * + * { margin-block-start: var(--space-4); }
.page-head .lede { margin-inline: auto; }
.page-head h1 { font-size: var(--step-4); }
.cta {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--gutter);
border-radius: var(--r-5);
border: 1px solid var(--border);
text-align: center;
background: var(--bg-raised);
}
.cta::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background:
radial-gradient(50% 90% at 50% 110%, var(--glow-1), transparent 70%),
radial-gradient(30% 50% at 85% 0%, var(--glow-2), transparent 70%);
}
.cta > * + * { margin-block-start: var(--space-4); }
.cta .lede { margin-inline: auto; }
.cta .hero__actions { justify-content: center; margin-block-start: var(--space-6); }
.prose { color: var(--text-2); }
.prose > * + * { margin-block-start: var(--space-4); }
.prose h2 { margin-block-start: var(--space-7); font-size: var(--step-2); color: var(--text); letter-spacing: -0.01em; }
:lang(ar) .prose h2 { letter-spacing: 0; }
.prose h3 { margin-block-start: var(--space-5); font-size: var(--step-1); color: var(--text); }
.prose ul { padding-inline-start: 1.25rem; display: grid; gap: var(--space-2); }
.prose li::marker { color: var(--text-3); }
.prose strong { color: var(--text); }
.prose a { text-decoration: underline; }
.prose .updated { color: var(--text-3); font-size: var(--step--1); }
.prose .summary { padding: var(--space-5); border-radius: var(--r-3); background: var(--brand-soft); color: var(--text); }
.prose .summary ul { margin-block-start: var(--space-3); }
.legal-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.legal-nav { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-5)); display: grid; gap: var(--space-1); }
.legal-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--r-2); color: var(--text-2); font-weight: 500; }
.legal-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.legal-nav a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
@media (max-width: 860px) {
.legal-layout { grid-template-columns: minmax(0, 1fr); }
.legal-nav { position: static; grid-auto-flow: column; overflow-x: auto; }
}
.auth-wrap {
display: grid;
place-items: start center;
padding-block: clamp(2rem, 1rem + 5vw, 5rem);
min-block-size: calc(100vh - var(--header-h) - 12rem);
}
.auth-card { inline-size: min(100%, 27rem); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.auth-card > * + * { margin-block-start: var(--space-5); }
.auth-card__head { text-align: center; }
.auth-card__head > * + * { margin-block-start: var(--space-2); }
.auth-card__head h1 { font-size: var(--step-3); }
.auth-card .segmented { display: flex; }
.auth-card .segmented button { flex: 1; }
.auth-card__foot { text-align: center; color: var(--text-3); font-size: var(--step--1); }
.link-btn { padding: 0; border: 0; background: none; color: var(--brand-strong); font-weight: 500; font-size: inherit; }
.link-btn:hover { text-decoration: underline; }
.mark {
display: grid;
place-items: center;
inline-size: 3.5rem;
block-size: 3.5rem;
margin-inline: auto;
border-radius: 50%;
background: var(--brand-soft);
color: var(--brand-strong);
}
.mark svg { inline-size: 1.75rem; block-size: 1.75rem; }
.mark--ok { background: var(--success-soft); color: var(--success); }
.mark--bad { background: var(--danger-soft); color: var(--danger); }
.dash { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }
.dash__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-block-end: var(--space-6); }
.dash__who { display: flex; align-items: center; gap: var(--space-4); }
.avatar {
display: grid;
place-items: center;
inline-size: 3.25rem;
block-size: 3.25rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--copper));
color: #fff;
font-weight: 700;
font-size: 1.25rem;
}
.dash__who h1 { font-size: var(--step-3); }
.dash__who p { color: var(--text-3); direction: ltr; unicode-bidi: isolate; text-align: start; }
.dash .tabs { margin-block-end: var(--space-6); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.stat { display: flex; flex-direction: column; gap: var(--space-2); }
.stat > * + * { margin-block-start: 0; }
.stat__label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-3); font-size: var(--step--1); font-weight: 500; }
.stat__label svg { inline-size: 1rem; block-size: 1rem; }
.stat__value { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
:lang(ar) .stat__value { letter-spacing: 0; }
.stat__note { color: var(--text-3); font-size: var(--step--1); }
@media (max-width: 960px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stats { grid-template-columns: minmax(0, 1fr); } }
.panel-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-block-start: var(--space-5); }
@media (max-width: 900px) { .panel-grid { grid-template-columns: minmax(0, 1fr); } }
.empty { padding: var(--space-7) var(--space-5); text-align: center; color: var(--text-3); }
.empty svg { inline-size: 2rem; block-size: 2rem; margin: 0 auto var(--space-3); }
.paypal-slot { color-scheme: light; min-block-size: 46px; }
.paypal-slot:empty { display: none; }
.callback { text-align: center; }
.callback .auth-card__head { margin-block-end: var(--space-2); }
.callback .numbered { text-align: start; }
.notfound { text-align: center; padding-block: clamp(4rem, 2rem + 8vw, 9rem); }
.notfound__code {
font-size: clamp(5rem, 3rem + 10vw, 9rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.05em;
}
.notfound > * + * { margin-block-start: var(--space-5); }
.notfound .hero__actions { justify-content: center; }
.notfound__alt { font-family: var(--font-arabic); }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
.input-group__action .icon-hide { display: none; }
.input-group__action[aria-pressed="true"] .icon-show { display: none; }
.input-group__action[aria-pressed="true"] .icon-hide { display: block; }
.center-spinner { display: grid; place-items: center; min-block-size: 50vh; }
.noscript {
margin: var(--space-6) auto;
max-inline-size: 32rem;
}
.inline-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.divider-text {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--text-3);
font-size: var(--step--1);
}
.divider-text::before, .divider-text::after { content: ""; flex: 1; block-size: 1px; background: var(--border); }
.price-line { font-size: var(--step-1); font-weight: 600; color: var(--text); }
.fine { color: var(--text-3); font-size: var(--step--1); }
.fine a { color: var(--text-2); text-decoration: underline; }
.status-dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: currentColor; }
.card--link { display: flex; align-items: center; gap: var(--space-4); color: var(--text); transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.card--link:hover { text-decoration: none; border-color: var(--border-strong); transform: translateY(-1px); }
.card--link > * + * { margin-block-start: 0; }
.card--link .flip-rtl { margin-inline-start: auto; color: var(--text-3); inline-size: 1.1rem; block-size: 1.1rem; }
.section-title { font-size: var(--step-2); margin-block-end: var(--space-4); letter-spacing: -0.01em; }
:lang(ar) .section-title { letter-spacing: 0; }
.panel + .panel, .card + .section-title { margin-block-start: var(--space-7); }
.accent {
background: linear-gradient(100deg, var(--brand-strong) 5%, #9b8cff 55%, var(--copper) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); color: var(--text-3); font-size: var(--step--1); }
.hero__meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__meta svg { inline-size: 1rem; block-size: 1rem; color: var(--success); }
.fine { color: var(--text-3); font-size: var(--step--1); }
.flip { transform: scaleX(-1); }
.btn--glow { box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--brand) 80%, transparent), 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent); }
.btn--glow:hover { box-shadow: 0 14px 40px -10px color-mix(in srgb, var(--brand) 95%, transparent), 0 0 0 1px color-mix(in srgb, var(--brand) 60%, transparent); }
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .rv[data-in] { opacity: 1; transform: none; }
.caps .rv:nth-child(3n+2) { transition-delay: 90ms; }
.caps .rv:nth-child(3n) { transition-delay: 180ms; }
.hx {
position: relative;
isolation: isolate;
overflow: clip;
padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) clamp(3.5rem, 2rem + 5vw, 6rem);
}
.hx__glow {
position: absolute;
z-index: -1;
inset: -40% -20% 0;
background:
radial-gradient(40% 45% at 72% 38%, var(--glow-1), transparent 70%),
radial-gradient(30% 35% at 18% 12%, var(--glow-2), transparent 70%),
radial-gradient(25% 30% at 90% 85%, rgb(155 140 255 / 0.12), transparent 70%);
pointer-events: none;
}
.hx::after {
content: "";
position: absolute;
z-index: -2;
inset: 0;
background-image:
linear-gradient(var(--border) 1px, transparent 1px),
linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(70% 65% at 50% 25%, #000 15%, transparent 75%);
-webkit-mask-image: radial-gradient(70% 65% at 50% 25%, #000 15%, transparent 75%);
opacity: 0.45;
pointer-events: none;
}
.hx__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
align-items: center;
gap: clamp(2.5rem, 1rem + 5vw, 5rem);
}
.hx__copy > * + * { margin-block-start: var(--space-5); }
.hx__copy h1 { font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.1rem); max-inline-size: 15ch; }
:lang(ar) .hx__copy h1 { max-inline-size: 15ch; line-height: 1.3; }
.hx__copy .lede { max-inline-size: 36rem; font-size: var(--step-1); }
@media (prefers-reduced-motion: no-preference) {
.hx__copy > * { animation: rise 0.9s var(--ease) both; }
.hx__copy > :nth-child(2) { animation-delay: 80ms; }
.hx__copy > :nth-child(3) { animation-delay: 160ms; }
.hx__copy > :nth-child(4) { animation-delay: 240ms; }
.hx__copy > :nth-child(5) { animation-delay: 320ms; }
.demo { animation: rise 1.1s 200ms var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 980px) {
.hx__grid { grid-template-columns: minmax(0, 1fr); }
.hx__copy h1 { max-inline-size: 16ch; }
.demo { max-inline-size: 38rem; }
}
.demo { position: relative; --sel: color-mix(in srgb, var(--brand) 34%, transparent); }
.demo__window {
position: relative;
border-radius: var(--r-4);
border: 1px solid var(--border-strong);
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, transparent), var(--surface));
box-shadow: var(--shadow-3), 0 0 0 1px rgb(255 255 255 / 0.02) inset;
}
.demo__bar {
display: flex;
align-items: center;
gap: 6px;
padding: 0.75rem 1rem;
border-block-end: 1px solid var(--border);
color: var(--text-3);
font-size: 0.8125rem;
direction: ltr;
}
.demo__bar i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--surface-3); }
.demo__bar i:first-child { background: #ff6b6b; opacity: 0.8; }
.demo__bar i:nth-child(2) { background: #f5c451; opacity: 0.8; }
.demo__bar i:nth-child(3) { background: #3ddc97; opacity: 0.8; }
.demo__bar span { margin-inline-start: 0.6rem; }
.demo__doc {
padding: clamp(1.25rem, 0.8rem + 2vw, 2rem);
padding-block-end: 2.5rem;
font-family: var(--font-latin);
font-size: clamp(0.9rem, 0.8rem + 0.35vw, 1.05rem);
line-height: 1.9;
text-align: left;
}
.demo__doc > * + * { margin-block-start: 0.35rem; }
.demo__muted { color: var(--text-3); }
.demo__anchor { position: relative; }
.demo__sel {
position: relative;
color: var(--text);
font-weight: 500;
padding: 0.1em 0;
border-radius: 3px;
background: linear-gradient(var(--sel), var(--sel)) no-repeat 0 0 / 100% 100%;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.demo__cursor {
position: absolute;
inset-block-start: 55%;
left: 100%;
inline-size: 1.25rem;
block-size: 1.25rem;
color: var(--text);
filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.5));
}
.demo__cursor svg { inline-size: 100%; block-size: 100%; fill: var(--bg); stroke: var(--text); }
.demo__pop {
position: absolute;
z-index: 2;
inset-block-start: calc(100% + 0.9rem);
left: 12%;
inline-size: min(22rem, 86%);
display: block;
padding: 0.9rem 1rem 0.85rem;
border-radius: var(--r-3);
border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border-strong));
background: color-mix(in srgb, var(--surface) 88%, transparent);
backdrop-filter: blur(14px) saturate(1.3);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
box-shadow: var(--shadow-3), 0 0 50px -12px var(--glow-1);
line-height: 1.5;
text-align: start;
}
.demo__pop:lang(ar) { font-family: var(--font-arabic); }
.demo__pophead { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-3); }
.demo__pophead img { border-radius: 5px; }
.demo__pophead b { color: var(--text-2); font-weight: 600; }
.demo__pophead em { margin-inline-start: auto; font-style: normal; padding: 0.1rem 0.45rem; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-strong); }
.demo__dst { display: block; margin-block: 0.55rem 0.7rem; font-size: 1.12em; font-weight: 600; color: var(--text); }
.demo__tools { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.demo__tools span { font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--text-2); }
.demo__skel { display: grid; gap: 0.6rem; margin-block-start: 1rem !important; }
.demo__skel i { display: block; block-size: 0.55rem; border-radius: 4px; background: var(--surface-3); opacity: 0.6; }
.demo__skel i:nth-child(odd) { inline-size: 94%; }
.demo__skel i:nth-child(4n) { inline-size: 71%; }
.demo__skel i:nth-child(6) { inline-size: 46%; }
@media (prefers-reduced-motion: no-preference) {
.demo__sel { animation: select 8s var(--ease) infinite; }
.demo__cursor { animation: cursor 8s var(--ease) infinite; }
.demo__pop { animation: pop 8s var(--ease) infinite; transform-origin: 20% 0; }
}
@keyframes select {
0%, 8%   { background-size: 0% 100%; background-position: 0 0; }
30%      { background-size: 100% 100%; background-position: 0 0; }
88%      { background-size: 100% 100%; background-position: 100% 0; }
98%, 100% { background-size: 0% 100%; background-position: 100% 0; }
}
@keyframes cursor {
0%       { left: 0; opacity: 0; }
6%       { left: 0; opacity: 1; }
30%, 86% { left: 100%; opacity: 1; }
94%, 100% { left: 100%; opacity: 0; }
}
@keyframes pop {
0%, 33%  { opacity: 0; transform: translateY(8px) scale(0.96); }
38%, 86% { opacity: 1; transform: none; }
93%, 100% { opacity: 0; transform: translateY(4px) scale(0.98); }
}
.float {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.85rem;
border-radius: var(--r-pill);
border: 1px solid var(--border-strong);
background: color-mix(in srgb, var(--surface) 85%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--shadow-2);
font-size: 0.8125rem;
font-weight: 600;
white-space: nowrap;
}
.float svg { inline-size: 1rem; block-size: 1rem; color: var(--success); }
.float--a { inset-block-start: -1.1rem; right: 1.5rem; }
.float--b { inset-block-end: -1.1rem; right: 2.5rem; }
.float--b svg { color: var(--copper); }
@media (prefers-reduced-motion: no-preference) {
.float--a { animation: bob 6s ease-in-out infinite; }
.float--b { animation: bob 7s 1s ease-in-out infinite; }
}
@keyframes bob { 50% { transform: translateY(-8px); } }
@media (max-width: 600px) { .float--a { right: 0.5rem; } .float--b { right: 1rem; } }
.ribbon {
direction: ltr;
overflow: hidden;
padding-block: 1.15rem;
border-block: 1px solid var(--border);
background: var(--bg-raised);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ribbon__track { display: flex; inline-size: max-content; direction: ltr; }
.ribbon ul { display: flex; gap: 3rem; padding: 0 3rem 0 0; margin: 0; list-style: none; }
.ribbon li { font-size: var(--step-2); font-weight: 600; color: var(--text-3); white-space: nowrap; }
.ribbon li:nth-child(5n+1) { color: var(--brand-strong); }
.ribbon li:nth-child(5n+3) { color: var(--copper); }
@media (prefers-reduced-motion: no-preference) {
.ribbon__track { animation: marquee 70s linear infinite; }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-33.3333%); } }
.stats {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
border: 1px solid var(--border);
border-radius: var(--r-4);
background:
radial-gradient(60% 120% at 50% 0%, var(--brand-soft), transparent 70%),
var(--bg-raised);
}
.stats > div { padding: clamp(1.25rem, 0.8rem + 1.5vw, 2rem); }
.stats > div + div { border-inline-start: 1px solid var(--border); }
.stats strong {
display: block;
font-size: var(--step-4);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 55%, var(--brand)));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
:lang(ar) .stats strong { letter-spacing: 0; }
.stats .stats__word { font-size: var(--step-2); line-height: 1.6; padding-block: 0.35em; }
.stats span { display: block; margin-block-start: 0.35rem; color: var(--text-2); font-size: 0.9375rem; }
@media (max-width: 980px) {
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats > div:nth-child(odd) { border-inline-start: 0; }
.stats > div:nth-child(n+3) { border-block-start: 1px solid var(--border); }
.stats > div:last-child { grid-column: 1 / -1; }
}
.show {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(2rem, 1rem + 5vw, 5rem);
align-items: center;
}
.show--flip > :first-child { order: 2; }
.show__copy > * + * { margin-block-start: var(--space-5); }
.show__copy h2 { font-size: var(--step-4); max-inline-size: 16ch; }
.show__copy .eyebrow .badge { margin-inline-start: var(--space-2); }
@media (max-width: 980px) {
.show { grid-template-columns: minmax(0, 1fr); }
.show--flip > :first-child { order: 0; }
}
.ba { margin: 0; }
.ba figcaption { margin-block-start: var(--space-3); color: var(--text-3); font-size: var(--step--1); text-align: center; }
.ba__stage {
--pos: 50%;
position: relative;
aspect-ratio: 16 / 11;
overflow: hidden;
border-radius: var(--r-4);
border: 1px solid var(--border-strong);
box-shadow: var(--shadow-3);
container-type: inline-size;
user-select: none;
-webkit-user-select: none;
touch-action: pan-y;
}
.ba__stage:has(.ba__range:focus-visible) { outline: 2px solid var(--brand); outline-offset: 4px; }
.ba__layer { position: absolute; inset: 0; }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba__handle {
position: absolute;
inset-block: 0;
left: var(--pos);
inline-size: 2px;
translate: -1px 0;
background: #fff;
box-shadow: 0 0 16px rgb(0 0 0 / 0.45);
pointer-events: none;
}
.ba__handle i {
position: absolute;
inset-block-start: 50%;
left: 50%;
translate: -50% -50%;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 50%;
background: #fff;
color: #0a1630;
box-shadow: 0 6px 20px rgb(0 0 0 / 0.35);
}
.ba__handle svg { inline-size: 0.85rem; block-size: 0.85rem; stroke-width: 2.6; }
.ba__range {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
margin: 0;
opacity: 0;
cursor: ew-resize;
}
.ba__tag {
position: absolute;
z-index: 1;
inset-block-start: 0.8rem;
padding: 0.28rem 0.65rem;
border-radius: var(--r-pill);
background: rgb(5 11 26 / 0.62);
color: #fff;
font-size: 0.75rem;
font-weight: 600;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
pointer-events: none;
}
.ba__tag--before { left: 0.8rem; }
.ba__tag--after { right: 0.8rem; }
.panel { position: absolute; inset: 0; background: #1f242c; padding: 3.2cqi 3.4cqi; }
.panel__bezel { display: flex; align-items: center; justify-content: space-between; block-size: 5cqi; color: #9aa6b8; font: 700 2.4cqi/1 var(--font-latin); letter-spacing: 0.3em; }
.panel__led { inline-size: 1.4cqi; block-size: 1.4cqi; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 8px #3ddc97; }
.panel__screen {
position: absolute;
inset: 9.5cqi 3.4cqi 3.4cqi;
border-radius: 1cqi;
overflow: hidden;
background:
radial-gradient(120% 90% at 30% 10%, rgb(255 255 255 / 0.10), transparent 60%),
repeating-linear-gradient(0deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px),
linear-gradient(160deg, #1d5fd0, #0f3f9a 55%, #0b2f78);
box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.35), inset 0 0 40px rgb(0 0 0 / 0.35);
color: #f2f6ff;
font-family: var(--font-latin);
}
.panel [lang="zh"] { font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", sans-serif; }
.panel [lang="ar"] { font-family: var(--font-arabic); }
.panel__title, .panel__zone, .panel__label, .panel__value, .panel__btn, .panel__status { position: absolute; white-space: nowrap; }
.panel__title { left: 4%; inset-block-start: 5%; text-align: left; font-size: 3.4cqi; font-weight: 700; color: #ffe28a; text-shadow: 0 1px 2px rgb(0 0 0 / 0.4); }
.panel__zone { inset-block-start: 19%; inline-size: 40%; text-align: center; font-size: 2.7cqi; font-weight: 700; color: #cfe0ff; }
.panel__zone.z1 { left: 4%; }
.panel__zone.z2 { left: 56%; }
.panel__label { inline-size: 23%; font-size: 2.35cqi; font-weight: 500; text-shadow: 0 1px 1px rgb(0 0 0 / 0.35); overflow: hidden; }
.panel__label.z1 { left: 3%; }
.panel__label.z2 { left: 55%; }
.panel__label[dir="rtl"] { text-align: right; }
.panel__label[dir="ltr"], .panel__label[lang="zh"] { text-align: left; }
.r1 { inset-block-start: 31%; }
.r2 { inset-block-start: 43%; }
.r3 { inset-block-start: 55%; }
.r4 { inset-block-start: 67%; }
.panel__value {
inline-size: 14%;
padding: 0.35cqi 1cqi;
border-radius: 0.6cqi;
background: #f4f6fa;
color: #1a2233;
font-size: 2.3cqi;
font-weight: 600;
text-align: right;
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.25);
translate: 0 -0.3cqi;
}
.panel__value.z1 { left: 28%; }
.panel__value.z2 { left: 80%; }
.panel__btn {
inset-block-start: 84%;
inline-size: 14%;
padding: 0.8cqi 0;
border-radius: 0.8cqi;
background: linear-gradient(#f7f9fc, #d7dde8);
color: #13203a;
font-size: 2.5cqi;
font-weight: 700;
text-align: center;
box-shadow: 0 0.4cqi 0 #8e99ad;
}
.panel__btn.b1 { left: 64%; }
.panel__btn.b2 { left: 81%; }
.panel__status { left: 4%; inset-block-start: 85.5%; display: inline-flex; align-items: center; gap: 1cqi; font-size: 2.5cqi; color: #bfe9d4; }
.panel__status i { inline-size: 1.5cqi; block-size: 1.5cqi; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 6px #3ddc97; }
.panel::after { content: ""; position: absolute; inset: 9.5cqi 3.4cqi 3.4cqi; border-radius: 1cqi; background: linear-gradient(90deg, transparent 49.8%, rgb(255 255 255 / 0.12) 49.9% 50.1%, transparent 50.2%); pointer-events: none; }
.paper-stage { position: relative; padding: 2rem 1rem 4.5rem; }
.paper {
position: relative;
z-index: 1;
max-inline-size: 30rem;
margin-inline: auto;
padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.1rem);
border-radius: var(--r-2);
background: #fdfdfb;
color: #1b2333;
box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(0 0 0 / 0.06);
font-size: 0.9rem;
line-height: 1.65;
}
.paper > * + * { margin-block-start: 0.8rem; }
.paper [lang="zh"] { font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; }
.paper [lang="ar"] { font-family: var(--font-arabic); }
.paper__h { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.paper__h span { color: #8a93a3; font-size: 0.85rem; }
.paper__h b { font-size: 1.15rem; }
.paper__src { color: #8a93a3; font-size: 0.82rem; padding-inline-start: 0.7rem; border-inline-start: 2px solid #e1e5ec; }
.paper__dst { font-weight: 500; }
.paper__eq { text-align: center; font-family: "Cambria Math", "Times New Roman", serif; font-size: 1.15rem; }
.paper__eq var { font-style: italic; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: 0.9em; }
.frac > span:first-child { border-block-end: 1px solid currentColor; padding-inline: 0.2em; }
.paper__fig { padding: 0.8rem; border-radius: var(--r-1); background: #f2f4f8; }
.paper__fig p { margin-block-start: 0.5rem; font-size: 0.78rem; color: #56617a; text-align: center; }
.chart { display: flex; align-items: flex-end; gap: 7%; block-size: 4.5rem; padding-inline: 8%; border-block-end: 1px solid #c9d0dc; }
.chart i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(#5aa7ff, #2f7be6); }
.chart i:nth-child(1) { block-size: 38%; }
.chart i:nth-child(2) { block-size: 62%; }
.chart i:nth-child(3) { block-size: 48%; }
.chart i:nth-child(4) { block-size: 86%; background: linear-gradient(#f0b089, #d9824d); }
.chart i:nth-child(5) { block-size: 72%; }
.formats {
position: absolute;
z-index: 2;
inset-block-end: 0.5rem;
inset-inline: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.45rem;
}
.formats span {
padding: 0.35rem 0.8rem;
border-radius: var(--r-pill);
border: 1px solid var(--border-strong);
background: var(--surface);
box-shadow: var(--shadow-1);
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-2);
}
.progress-chip {
position: absolute;
z-index: 2;
inset-block-start: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.85rem;
border-radius: var(--r-3);
border: 1px solid var(--border-strong);
background: color-mix(in srgb, var(--surface) 90%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--shadow-2);
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
.progress-chip b { color: var(--brand-strong); font-weight: 600; }
.progress-chip__dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.progress-chip__bar { inline-size: 4.5rem; block-size: 0.35rem; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.progress-chip__bar i { display: block; block-size: 100%; inline-size: 37%; background: var(--brand); border-radius: inherit; }
@media (prefers-reduced-motion: no-preference) {
.paper-stage[data-in] .progress-chip__bar i { animation: fill 6s var(--ease) infinite alternate; }
}
@keyframes fill { from { inline-size: 18%; } to { inline-size: 72%; } }
@media (max-width: 560px) { .progress-chip { inset-inline-end: 0.25rem; } .progress-chip__bar { display: none; } }
.vault {
position: relative;
padding: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
border-radius: var(--r-5);
border: 1px solid var(--border-strong);
background:
radial-gradient(70% 60% at 100% 0%, var(--success-soft), transparent 70%),
var(--surface);
box-shadow: var(--shadow-3);
}
.vault__head { display: flex; align-items: center; gap: 0.9rem; }
.vault__head > span:nth-child(2) { display: grid; }
.vault__head b { font-size: var(--step-1); }
.vault__head small { color: var(--text-3); font-size: 0.85rem; }
.vault__icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: var(--r-3); background: var(--success-soft); color: var(--success); }
.vault__icon svg { inline-size: 1.4rem; block-size: 1.4rem; }
.switch { margin-inline-start: auto; position: relative; flex: none; inline-size: 3.3rem; block-size: 1.9rem; border-radius: var(--r-pill); background: var(--success); transition: background 0.5s 0.4s var(--ease); }
.switch i { position: absolute; inset-block-start: 0.2rem; inset-inline-start: 1.6rem; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: inset-inline-start 0.5s 0.4s var(--ease); }
.js .vault:not([data-in]) .switch { background: var(--surface-3); }
.js .vault:not([data-in]) .switch i { inset-inline-start: 0.2rem; }
.vault__rows { margin: 1.4rem 0 0; padding: 0; list-style: none; border-block-start: 1px solid var(--border); }
.vault__rows li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.8rem; border-block-end: 1px solid var(--border); }
.vault__rows span { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--text-2); }
.vault__rows svg { inline-size: 1.1rem; block-size: 1.1rem; color: var(--text-3); }
.vault__rows em { font-style: normal; font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: var(--r-pill); transition: background 0.4s var(--ease), color 0.4s var(--ease); }
.vault__rows em.on { background: var(--success-soft); color: var(--success); }
.vault__rows em.off { background: var(--surface-3); color: var(--text-3); }
.js .vault:not([data-in]) .vault__rows em { opacity: 0; }
.vault__rows em { transition: opacity 0.4s var(--ease); }
.vault__rows li:nth-child(1) em { transition-delay: 0.7s; }
.vault__rows li:nth-child(2) em { transition-delay: 0.85s; }
.vault__rows li:nth-child(3) em { transition-delay: 1s; }
.vault__rows li:nth-child(4) em { transition-delay: 1.15s; }
.vault__rows li:nth-child(5) em { transition-delay: 1.3s; }
.vault__meter { display: flex; align-items: baseline; justify-content: space-between; margin-block-start: 1.2rem; color: var(--text-3); font-size: 0.9rem; }
.vault__meter b { font-size: var(--step-3); color: var(--success); font-weight: 800; font-variant-numeric: tabular-nums; }
.caps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.cap {
grid-column: span 4;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
border-radius: var(--r-4);
border: 1px solid var(--border);
background: linear-gradient(180deg, var(--surface), var(--bg-raised));
transition: border-color var(--base) var(--ease), transform var(--base) var(--ease), box-shadow var(--base) var(--ease), opacity 0.8s var(--ease);
}
.cap:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); box-shadow: var(--shadow-2); }
.cap:nth-child(-n+2) { grid-column: span 6; }
.cap__head { display: flex; align-items: center; justify-content: space-between; }
.cap h3 { font-size: var(--step-1); letter-spacing: 0; }
.cap p { color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: auto; padding-block-start: var(--space-2); }
.chips span { padding: 0.3rem 0.65rem; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--bg-raised); font-size: 0.8125rem; color: var(--text-2); }
.chips .chips__own { border-color: color-mix(in srgb, var(--brand) 50%, transparent); color: var(--brand-strong); background: var(--brand-soft); }
.chips--soft span { background: var(--copper-soft); border-color: transparent; color: var(--copper); font-weight: 600; }
.video {
position: relative;
margin-block-start: auto;
aspect-ratio: 16 / 7;
border-radius: var(--r-3);
overflow: hidden;
background:
radial-gradient(40% 70% at 75% 30%, rgb(255 190 120 / 0.35), transparent 70%),
radial-gradient(50% 80% at 20% 80%, rgb(80 140 255 / 0.35), transparent 70%),
linear-gradient(135deg, #1b2240, #0a0f1f);
}
.video__play { position: absolute; inset-block-start: 38%; left: 50%; translate: -50% -50%; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; background: rgb(255 255 255 / 0.18); backdrop-filter: blur(4px); }
.video__play::after { content: ""; position: absolute; inset-block-start: 50%; left: 55%; translate: -50% -50%; border-block: 0.5rem solid transparent; border-inline-start: 0.8rem solid #fff; }
:root[dir="rtl"] .video__play::after { border-inline-start: 0; border-inline-end: 0.8rem solid #fff; }
.video__sub { position: absolute; inset-inline: 0; inset-block-end: 0.6rem; display: grid; justify-items: center; gap: 0.1rem; padding-inline: 0.8rem; text-align: center; }
.video__sub small { color: rgb(255 255 255 / 0.7); font-size: 0.72rem; }
.video__sub b { color: #fff; font-size: 0.95rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 4px; background: rgb(0 0 0 / 0.55); }
.video__sub [lang="ar"] { font-family: var(--font-arabic); }
@media (max-width: 960px) {
.cap, .cap:nth-child(-n+2) { grid-column: span 6; }
}
@media (max-width: 640px) {
.caps { grid-template-columns: minmax(0, 1fr); }
.cap, .cap:nth-child(-n+2) { grid-column: auto; }
}
.cta--grand { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.cta--grand::before {
background:
radial-gradient(55% 90% at 50% 115%, var(--glow-1), transparent 70%),
radial-gradient(30% 50% at 85% 0%, var(--glow-2), transparent 70%),
radial-gradient(25% 45% at 10% 10%, rgb(155 140 255 / 0.12), transparent 70%);
}
.cta--grand h2 { font-size: var(--step-4); max-inline-size: 20ch; margin-inline: auto; }
.cta__icon { margin-inline: auto; border-radius: 18px; box-shadow: 0 20px 50px -15px var(--glow-1); }
@media (prefers-reduced-motion: no-preference) {
.cta__icon { animation: bob 6s ease-in-out infinite; }
}
.snipshow { margin-block-start: var(--space-7); }
.snipshow__stage {
--sx: 20%; --sy: 30%; --sw: 60%; --sh: 30%;
position: relative;
aspect-ratio: 16 / 8;
overflow: hidden;
border-radius: var(--r-4);
border: 1px solid var(--border-strong);
box-shadow: var(--shadow-3), 0 0 80px -30px var(--glow-1);
background: #0b1020;
container-type: inline-size;
isolation: isolate;
}
@media (max-width: 760px) { .snipshow__stage { aspect-ratio: 4 / 5; } }
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s; }
.scene[data-active] { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease), visibility 0s; }
.swap { display: grid; }
.swap > span { grid-area: 1 / 1; transition: opacity 0.55s var(--ease), filter 0.55s var(--ease), transform 0.55s var(--ease); }
.swap__src { opacity: 1; }
.swap__dst { opacity: 0; filter: blur(6px); transform: translateY(3px); }
.swap__dst[dir="rtl"] { text-align: right; }
.swap__dst:lang(ar) { font-family: var(--font-arabic); }
.scene[data-swapped] .swap__src { opacity: 0; filter: blur(6px); transform: translateY(-3px); }
.scene[data-swapped] .swap__dst { opacity: 1; filter: none; transform: none; }
.scene[data-swapped] .swap[data-i="1"] > span { transition-delay: 0.22s; }
.scene[data-swapped] .swap[data-i="2"] > span { transition-delay: 0.44s; }
.swap [lang="zh"] { font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; }
.scene--article {
padding: clamp(1.2rem, 4cqi, 3rem) clamp(1.2rem, 7cqi, 5rem);
background: linear-gradient(180deg, #f7f2e8, #efe7d8);
color: #5d5244;
font-family: Georgia, "Times New Roman", serif;
}
.art__top { display: flex; align-items: center; gap: 1rem; padding-block-end: 0.8rem; border-block-end: 1px solid #d9cdb8; direction: ltr; }
.art__mast { font: 700 clamp(0.9rem, 2.2cqi, 1.35rem) Georgia, serif; color: #2e261c; letter-spacing: 0.02em; margin-inline-end: auto; }
.art__top i { inline-size: 3.5rem; block-size: 0.45rem; border-radius: 3px; background: #d9cdb8; }
.art__kicker { display: grid; gap: 0.5rem; margin-block: clamp(0.8rem, 3cqi, 2rem) 1rem; }
.art__kicker i { display: block; block-size: clamp(0.7rem, 1.8cqi, 1.1rem); inline-size: 70%; border-radius: 4px; background: #d3c5ad; }
.art__kicker i + i { inline-size: 45%; }
.art__body { direction: ltr; }
.art__para { font-size: clamp(0.95rem, 2.35cqi, 1.45rem); line-height: 1.6; font-style: italic; }
.art__skel { display: grid; gap: 0.55rem; margin-block-start: 1.4rem; }
.art__skel i { display: block; block-size: 0.5rem; border-radius: 3px; background: #ddd2bf; }
.art__skel i:nth-child(2n) { inline-size: 84%; }
.art__skel i:nth-child(4) { inline-size: 52%; }
.scene--game { background: linear-gradient(180deg, #2b3a6b 0%, #6c5b8f 45%, #e79a6d 78%, #f4c38d 100%); }
.game__sky { position: absolute; inset: 0; overflow: hidden; }
.game__sun { position: absolute; top: 22%; left: 64%; inline-size: 14cqi; block-size: 14cqi; border-radius: 50%; background: radial-gradient(circle, #ffe7b0 30%, rgb(255 210 140 / 0) 70%); }
.game__hill { position: absolute; border-radius: 50% 50% 0 0; }
.game__hill--a { bottom: 0; left: -10%; inline-size: 75%; block-size: 48%; background: #243052; }
.game__hill--b { bottom: 0; left: 45%; inline-size: 70%; block-size: 38%; background: #1a2340; }
.game__bridge { position: absolute; bottom: 44%; left: 40%; inline-size: 18%; block-size: 1.2cqi; background: repeating-linear-gradient(90deg, #8a6444 0 1.6cqi, transparent 1.6cqi 2.2cqi); transform: rotate(-4deg); }
.game__box {
position: absolute;
left: 6%;
right: 6%;
bottom: 8%;
padding: clamp(1rem, 3cqi, 1.9rem) clamp(1rem, 3cqi, 2rem) clamp(0.8rem, 2.4cqi, 1.6rem);
border-radius: 1.2cqi;
border: 3px solid #f0d58c;
background: rgb(12 14 30 / 0.88);
box-shadow: 0 0 0 3px rgb(12 14 30 / 0.88), 0 20px 40px rgb(0 0 0 / 0.4);
color: #fff;
direction: ltr;
}
.game__name { position: absolute; top: 0; left: 4%; translate: 0 -60%; padding: 0.2rem 0.9rem; border-radius: 0.6rem; background: #f0d58c; color: #2a1d08; font-weight: 800; font-size: clamp(0.75rem, 1.8cqi, 1.05rem); }
.game__line { font-size: clamp(0.95rem, 2.5cqi, 1.5rem); font-weight: 600; line-height: 1.55; text-shadow: 0 2px 0 rgb(0 0 0 / 0.5); }
.scene--web { background: #eef2f7; color: #14213d; font-family: var(--font-latin); }
.web__bar { display: flex; align-items: center; gap: 6px; padding: 0.6rem 1rem; background: #dfe5ee; border-block-end: 1px solid #cfd7e3; font-size: 0.75rem; color: #56637a; direction: ltr; }
.web__bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: #b9c3d3; }
.web__bar span { margin-inline-start: 0.8rem; padding: 0.15rem 0.8rem; border-radius: 99px; background: #fff; }
.web__card {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(1rem, 3cqi, 2.2rem);
align-items: center;
margin: clamp(1rem, 4cqi, 2.6rem) clamp(1rem, 6cqi, 4rem);
padding: clamp(1rem, 3cqi, 2rem);
border-radius: 1.4cqi;
background: #fff;
box-shadow: 0 20px 50px -25px rgb(20 33 61 / 0.35);
direction: ltr;
}
.web__img { aspect-ratio: 4 / 3; border-radius: 1cqi; background: radial-gradient(60% 50% at 70% 30%, #ffd9a0, transparent 70%), linear-gradient(160deg, #3f6fd8, #1f3a8a 60%, #0f1f4d); }
.web__text { display: grid; gap: clamp(0.4rem, 1.2cqi, 0.9rem); justify-items: start; }
.web__text .swap__dst[dir="rtl"] { justify-self: stretch; }
.web__head { font-size: clamp(1.05rem, 3cqi, 1.9rem); font-weight: 800; line-height: 1.2; color: #0f2a6b; letter-spacing: -0.01em; }
.web__body { font-size: clamp(0.85rem, 1.9cqi, 1.1rem); line-height: 1.55; color: #3d4a63; }
.web__btn { padding: 0.45rem 1rem; border-radius: 99px; background: #e2462f; color: #fff; font-weight: 700; font-size: clamp(0.75rem, 1.6cqi, 0.95rem); }
.web__btn > span { justify-self: center; text-align: center; }
@media (max-width: 760px) { .web__card { grid-template-columns: 1fr; } .web__img { aspect-ratio: 16 / 7; } }
.snip {
position: absolute;
z-index: 5;
left: var(--sx);
top: var(--sy);
inline-size: 0;
block-size: 0;
border: 2px solid #4da3ff;
border-radius: 4px;
box-shadow: 0 0 0 200vmax rgb(4 8 20 / 0.5);
opacity: 0;
pointer-events: none;
transition: inline-size 0.9s var(--ease), block-size 0.9s var(--ease), opacity 0.45s var(--ease);
}
.snip i { position: absolute; inline-size: 9px; block-size: 9px; background: #fff; border: 2px solid #4da3ff; border-radius: 2px; }
.snip i:nth-child(1) { top: -5px; left: -5px; }
.snip i:nth-child(2) { top: -5px; right: -5px; }
.snip i:nth-child(3) { bottom: -5px; left: -5px; }
.snip i:nth-child(4) { bottom: -5px; right: -5px; }
.snip b { position: absolute; right: -14px; bottom: -14px; inline-size: 22px; block-size: 22px; color: #fff; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.6)); }
.snip b svg { inline-size: 100%; block-size: 100%; }
.snip::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
block-size: 30%;
background: linear-gradient(180deg, transparent, rgb(77 163 255 / 0.35) 85%, rgb(170 210 255 / 0.9));
opacity: 0;
pointer-events: none;
}
.snipshow__stage[data-phase="snip"] .snip,
.snipshow__stage[data-phase="read"] .snip,
.snipshow__stage[data-phase="swap"] .snip { inline-size: var(--sw); block-size: var(--sh); opacity: 1; }
.snipshow__stage[data-phase="done"] .snip { inline-size: var(--sw); block-size: var(--sh); opacity: 0; }
.snipshow__stage[data-phase="read"] .snip::after { animation: scan 1.1s var(--ease) forwards; }
@keyframes scan {
0%   { top: 0; opacity: 0; }
15%  { opacity: 1; }
85%  { opacity: 1; }
100% { top: 70%; opacity: 0; }
}
.snip-banner {
position: absolute;
z-index: 6;
top: 1rem;
left: 50%;
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.55rem 1rem;
border-radius: 99px;
background: rgb(20 24 40 / 0.94);
color: #e8eeff;
font-size: clamp(0.72rem, 1.5cqi, 0.9rem);
font-weight: 600;
white-space: nowrap;
box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
opacity: 0;
translate: -50% -140%;
transition: translate 0.5s var(--ease), opacity 0.5s var(--ease);
}
.snip-banner svg { inline-size: 1rem; block-size: 1rem; color: #7fb8ff; }
.snipshow__stage[data-phase="read"] .snip-banner,
.snipshow__stage[data-phase="swap"] .snip-banner { opacity: 1; translate: -50% 0; }
.snipshow__tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
.snipshow__tab {
position: relative;
overflow: hidden;
padding: 0.5rem 1rem;
border-radius: var(--r-pill);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-2);
font: inherit;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
}
.snipshow__tab:hover { color: var(--text); border-color: var(--border-strong); }
.snipshow__tab[aria-pressed="true"] { color: var(--brand-strong); border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: var(--brand-soft); }
.snipshow__tab:focus-visible { outline: none; box-shadow: var(--focus); }
.snipshow__tab::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; block-size: 2px; inline-size: 0; background: var(--brand); }
.snipshow[data-playing] .snipshow__tab[aria-pressed="true"]::after { animation: countdown 9s linear forwards; }
@keyframes countdown { to { inline-size: 100%; } }
.show--below { margin-block-start: clamp(3rem, 2rem + 4vw, 5rem); }
.show__sub { font-size: var(--step-2); }
:root:not(.js) .scene[data-scene="0"] { opacity: 1; visibility: visible; }