@font-face {
font-family: 'Geologica';
font-style: normal;
font-weight: 500 800;
font-display: swap;
src: url('/assets/fonts/geologica-latin.501101b3f5.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0100-017F, U+018F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+2000-206F, U+20AC, U+20BC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geologica';
font-style: normal;
font-weight: 500 800;
font-display: swap;
src: url('/assets/fonts/geologica-cyrillic.109dc58289.woff2') format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/fonts/geist-latin.c9cc39d2c8.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0100-017F, U+018F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+2000-206F, U+20AC, U+20BC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/fonts/geist-cyrillic.3e99947b93.woff2') format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('/assets/fonts/geist-mono-latin.130c696c88.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0100-017F, U+018F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+2000-206F, U+20AC, U+20BC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('/assets/fonts/geist-mono-cyrillic.af2d108d34.woff2') format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
:root {
color-scheme: light dark;
--ink-950: #070A1F;
--ink-900: #0B1030;
--ink-800: #141B47;
--ink-700: #1F2862;
--blue: #2E4BFF;
--blue-600: #2440F0;
--blue-500: #5B6CFF;
--blue-300: #8C9BFF;
--blue-100: #E8EBFF;
--yellow: #FFD84D;
--paper: #F6F7FB;
--bg: light-dark(var(--paper), var(--ink-950));
--bg-alt: light-dark(#EDEFF8, #0A0E27);
--surface: light-dark(#FFFFFF, #0E1435);
--surface-2: light-dark(#F3F4FB, #131A42);
--text: light-dark(var(--ink-900), #EEF0FD);
--muted: light-dark(#4A5075, #A6ADD3);
--faint: light-dark(#646A8F, #7D85B3);
--border: light-dark(#E3E6F3, #20285A);
--border-strong: light-dark(#CBD0E8, #343E80);
--primary: light-dark(var(--blue), var(--blue-300));
--primary-soft: light-dark(var(--blue-100), #18205A);
--pass: light-dark(#0B8457, #2BD99F);
--pass-soft: light-dark(#DDF6EB, #0C3A30);
--fail: light-dark(#D92D43, #FF5C6C);
--fail-soft: light-dark(#FDE4E8, #3C1420);
--wait: light-dark(#A15C00, #FFB547);
--wait-soft: light-dark(#FFF1DC, #392A0F);
--shadow-sm: 0 1px 2px light-dark(rgb(11 16 48 / .08), rgb(0 0 0 / .4));
--shadow-md: 0 12px 28px -12px light-dark(rgb(11 16 48 / .18), rgb(0 0 0 / .6)), 0 2px 6px -2px light-dark(rgb(11 16 48 / .08), rgb(0 0 0 / .4));
--shadow-lg: 0 40px 80px -32px light-dark(rgb(11 16 48 / .28), rgb(0 0 0 / .75)), 0 12px 24px -12px light-dark(rgb(11 16 48 / .12), rgb(0 0 0 / .5));
--font-display: 'Geologica', ui-sans-serif, system-ui, sans-serif;
--font-body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--max: 1200px;
--gutter: clamp(16px, 4vw, 40px);
--header-h: 64px;
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 22px;
--radius-xl: 28px;
--ease-out: cubic-bezier(.22, 1, .36, 1);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.dark-zone { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
min-height: 100svh;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.6;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.03em;
text-wrap: balance;
color: var(--text);
}
h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.35rem); line-height: 1.06; }
h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
h4 { font-size: 1.0625rem; letter-spacing: -0.01em; }
p, li, dd, figcaption { text-wrap: pretty; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
code, pre, kbd { font-family: var(--font-mono); font-size: .9em; }
mark {
color: light-dark(var(--text), var(--yellow));
background: linear-gradient(transparent 56%, light-dark(var(--yellow), transparent) 56% 90%, transparent 90%) no-repeat;
padding-inline: .06em;
margin-inline: -.06em;
}
.dark-zone mark, .hero mark { background: none; color: var(--yellow); padding: 0; margin: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--yellow); color: var(--ink-900); }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
width: 1.25em;
height: 1.25em;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.skip-link {
position: absolute;
left: 12px;
top: -100px;
z-index: 100;
padding: 10px 16px;
border-radius: 10px;
background: var(--yellow);
color: var(--ink-900);
font-weight: 600;
text-decoration: none;
}
.skip-link:focus { top: 12px; }
.container {
width: min(100% - 2 * var(--gutter), var(--max));
margin-inline: auto;
}
.section {
position: relative;
padding-block: clamp(80px, 11vw, 144px);
}
.section[id] { scroll-margin-top: var(--header-h); }
.section-head { max-width: 46rem; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head .lead { max-width: 40rem; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: .65em;
margin-bottom: 1.1rem;
font-family: var(--font-mono);
font-size: .8125rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--primary);
}
.eyebrow::before {
content: '';
width: 1.4em;
height: 2px;
border-radius: 2px;
background: currentColor;
}
.lead {
margin-top: 1.25rem;
font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
line-height: 1.55;
color: var(--muted);
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.dark-zone {
background: var(--ink-950);
color: var(--text);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55em;
min-height: 44px;
padding: .6em 1.15em;
border: 1px solid transparent;
border-radius: 999px;
font-size: .9375rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.005em;
text-decoration: none;
white-space: nowrap;
transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn-primary {
background: var(--blue);
color: #fff;
box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 10px 24px -10px rgb(46 75 255 / .8);
}
.btn-primary:hover { background: var(--blue-600); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 14px 30px -10px rgb(46 75 255 / .9); }
.btn-ghost { border-color: var(--border-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--text); }
.btn-ghost .icon { transition: translate .25s var(--ease-out); }
.btn-ghost:hover .icon { translate: 3px 0; }
.btn-lg { min-height: 52px; padding: .8em 1.45em; font-size: 1rem; }
.btn-sm { min-height: 38px; padding: .45em .95em; font-size: .875rem; }
.icon-btn {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--border-strong);
border-radius: 12px;
background: transparent;
color: var(--text);
transition: background-color .2s, border-color .2s;
}
.icon-btn:hover { background: rgb(255 255 255 / .06); border-color: var(--text); }
.pill {
display: inline-flex;
align-items: center;
padding: 2px 9px;
border-radius: 999px;
background: var(--primary-soft);
color: var(--primary);
font-family: var(--font-mono);
font-size: .75rem;
font-weight: 500;
letter-spacing: .02em;
}
.checks { display: grid; gap: 10px; margin-top: 1.25rem; }
.checks li { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.checks .icon {
width: 20px;
height: 20px;
padding: 3px;
margin-top: 1px;
border-radius: 50%;
background: var(--pass-soft);
color: var(--pass);
stroke-width: 2.5;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
color-scheme: dark;
color: var(--text);
background: rgb(7 10 31 / .9);
border-bottom: 1px solid rgb(140 155 255 / .12);
-webkit-backdrop-filter: blur(16px) saturate(150%);
backdrop-filter: blur(16px) saturate(150%);
}
.header-inner { display: flex; align-items: center; gap: 10px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; margin-right: auto; color: inherit; border-radius: 8px; }
.logo { height: 28px; width: auto; }
.logo-mark { color: var(--primary); }
.logo-word { color: var(--text); }
.site-header .logo-mark { color: var(--blue-300); }
.site-nav ul { display: flex; gap: 2px; padding: 0; list-style: none; }
.site-nav a:not(.btn) {
display: block;
padding: 8px 12px;
border-radius: 10px;
color: rgb(238 240 253 / .76);
font-size: .9375rem;
font-weight: 500;
text-decoration: none;
transition: color .2s, background-color .2s;
}
.site-nav a:not(.btn):hover, .site-nav a[aria-current] { color: #fff; background: rgb(255 255 255 / .07); }
.nav-cta { display: none; }
cs-theme-toggle { display: contents; }
cs-theme-toggle:not(:defined) .icon-btn { display: none; }
cs-theme-toggle .icon { display: none; }
cs-theme-toggle[data-mode="system"] .theme-system,
cs-theme-toggle[data-mode="light"] .theme-light,
cs-theme-toggle[data-mode="dark"] .theme-dark { display: block; }
@media (min-width: 1000px) {
.site-nav[popover] {
display: flex;
position: static;
inset: auto;
width: auto;
height: auto;
margin: 0 8px 0 0;
padding: 0;
border: 0;
background: none;
color: inherit;
overflow: visible;
}
.menu-btn { display: none; }
}
@media (max-width: 999.98px) {
.site-nav:popover-open {
position: fixed;
inset: calc(var(--header-h) + 8px) 12px auto 12px;
width: auto;
margin: 0;
padding: 10px;
border: 1px solid rgb(140 155 255 / .16);
border-radius: 18px;
background: rgb(11 16 48 / .97);
color: var(--text);
box-shadow: var(--shadow-lg);
}
.site-nav::backdrop { background: rgb(7 10 31 / .45); }
.site-nav ul { flex-direction: column; }
.site-nav a:not(.btn) { padding: 13px 14px; font-size: 1.0625rem; }
.nav-cta { display: flex; margin-top: 8px; }
}
@media (max-width: 420px) {
.header-cta { display: none; }
}
.site-footer {
border-top: 1px solid var(--border);
background: var(--bg-alt);
padding-block: 56px 28px;
font-size: .9375rem;
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.footer-brand p { margin-top: 14px; max-width: 22rem; color: var(--muted); }
.footer-h {
margin-bottom: 14px;
font-family: var(--font-mono);
font-size: .75rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--faint);
}
.footer-nav ul { display: grid; gap: 8px; padding: 0; list-style: none; }
.site-footer a:not(.btn) { color: var(--muted); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--text); text-decoration: underline; }
.footer-contact p + p { margin-top: 14px; }
.footer-base { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--faint); font-size: .8125rem; }
@media (max-width: 720px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 22px 0;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon {
width: 32px;
height: 32px;
padding: 6px;
border: 1px solid var(--border-strong);
border-radius: 50%;
color: var(--primary);
transition: rotate .3s var(--ease-out), background-color .2s;
}
.faq-item[open] summary .icon { rotate: 45deg; background: var(--primary-soft); }
.faq-item summary:hover .icon { border-color: var(--primary); }
.faq-a { padding: 0 48px 24px 0; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
@supports (interpolate-size: allow-keywords) {
.faq-item { interpolate-size: allow-keywords; }
.faq-item::details-content {
height: 0;
overflow: clip;
transition: height .35s var(--ease-out), content-visibility .35s allow-discrete;
}
.faq-item[open]::details-content { height: auto; }
}
}
.hero {
color-scheme: dark;
position: relative;
isolation: isolate;
overflow: clip;
margin-top: calc(-1 * var(--header-h));
background: var(--ink-950);
color: var(--text);
}
.hero-stage {
position: relative;
display: flex;
flex-direction: column;
min-height: min(100svh, 1040px);
padding-top: calc(var(--header-h) + clamp(28px, 5vw, 72px));
padding-bottom: clamp(24px, 3vw, 40px);
}
.hero-bg { position: absolute; inset: -40px; z-index: -2; }
.hero-bg picture, .hero-bg img { width: 100%; height: 100%; }
.hero-bg img { object-fit: cover; object-position: 62% 100%; }
.hero-bg::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgb(7 10 31 / .94) 0%, rgb(7 10 31 / .72) 36%, rgb(7 10 31 / .12) 72%, rgb(7 10 31 / .3) 100%),
linear-gradient(180deg, rgb(7 10 31 / .7) 0%, transparent 28%, transparent 62%, rgb(7 10 31 / .92) 100%);
}
.hero-glow {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(38% 46% at 74% 36%, rgb(46 75 255 / .34), transparent 70%),
radial-gradient(26% 32% at 12% 86%, rgb(91 108 255 / .16), transparent 70%);
}
.hero-grid {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: center;
gap: clamp(32px, 4vw, 64px);
}
.hero-copy { max-width: 40rem; }
.hero .eyebrow { color: var(--blue-300); }
.hero h1 {
font-size: clamp(2.6rem, 1.55rem + 4.3vw, 5rem);
line-height: 1;
letter-spacing: -0.045em;
color: #fff;
}
.hero .lead { max-width: 35rem; color: rgb(238 240 253 / .78); }
.hero .btn-ghost { border-color: rgb(238 240 253 / .28); color: #fff; }
.hero .btn-ghost:hover { border-color: #fff; background: rgb(255 255 255 / .06); }
.hero-note { display: flex; align-items: center; gap: .55em; margin-top: 1.5rem; color: var(--muted); font-size: .875rem; }
.hero-note .icon { color: var(--pass); }
.hero-visual { position: relative; perspective: 1800px; }
.hv-tilt {
display: grid;
grid-template-columns: minmax(0, 36fr) minmax(0, 44fr) minmax(0, 20fr);
grid-template-rows: auto 56px auto;
}
.hv-editor { grid-area: 1 / 1 / 3 / 3; }
.hv-rubric { grid-area: 2 / 2 / 4 / 4; }
.hv-badges {
grid-area: 1 / 1 / 4 / 4;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
pointer-events: none;
}
.fb-cases { grid-area: 1 / 1 / 2 / 3; justify-self: end; align-self: start; margin: -30px -24px 0 0; }
.fb-evidence { grid-area: 3 / 1 / 4 / 2; justify-self: end; align-self: center; margin-right: -12px; }
.card {
border: 1px solid rgb(140 155 255 / .2);
border-radius: 18px;
background: linear-gradient(180deg, rgb(21 28 74 / .97), rgb(12 17 48 / .97));
box-shadow: 0 50px 100px -40px rgb(0 0 0 / .9), 0 0 0 1px rgb(0 0 0 / .2), inset 0 1px 0 rgb(255 255 255 / .07);
color: var(--text);
}
.card-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border-bottom: 1px solid rgb(140 155 255 / .12);
font-family: var(--font-mono);
font-size: .75rem;
color: var(--muted);
}
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / .14); }
.card-bar .file { margin-right: auto; }
.code {
padding: 12px 0;
font-family: var(--font-mono);
font-size: clamp(11px, .95vw, 13px);
line-height: 1.6;
color: #DCE0FA;
counter-reset: ln;
overflow: hidden;
}
.code .line { display: block; white-space: pre; }
.code .line::before {
counter-increment: ln;
content: counter(ln);
display: inline-block;
width: 2.2em;
margin-right: 1.1em;
text-align: right;
color: rgb(166 173 211 / .38);
}
.code .k { color: var(--blue-300); }
.code .f { color: #7FE3C4; }
.tests {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border-top: 1px solid rgb(140 155 255 / .12);
font-family: var(--font-mono);
font-size: .75rem;
color: var(--muted);
}
.tiles { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.tiles li { aspect-ratio: 1; border-radius: 3px; background: var(--pass); box-shadow: 0 0 10px rgb(43 217 159 / .4); }
.tests-count { color: var(--text); font-variant-numeric: tabular-nums; }
.count { counter-reset: n var(--n); }
.count::before { content: counter(n); }
.verdict {
display: flex;
align-items: center;
gap: 8px;
margin: 0 14px 14px;
padding: 8px 12px;
border-radius: 10px;
background: var(--pass-soft);
color: var(--pass);
font-size: .875rem;
font-weight: 600;
}
.verdict .icon { stroke-width: 2.4; }
.rubric-card { padding: 16px; font-size: .8125rem; }
.rc-q { display: flex; align-items: baseline; gap: 8px; color: #fff; font-size: .875rem; font-weight: 600; line-height: 1.4; }
.rc-answer { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgb(255 255 255 / .04); color: var(--muted); line-height: 1.55; }
.hero .rc-answer mark { background: rgb(255 216 77 / .16); color: #FFE48A; border-radius: 3px; padding-inline: 2px; }
.rc-points { display: grid; gap: 7px; margin-top: 12px; }
.rc-points li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.rc-points .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; stroke-width: 2.6; }
.rc-points b { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; }
.is-ok > .icon { background: var(--pass-soft); color: var(--pass); }
.is-ok > b { color: var(--pass); }
.is-no > .icon { background: var(--fail-soft); color: var(--fail); }
.is-no > b, .is-no > span { color: var(--faint); }
.rc-score {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgb(140 155 255 / .12);
font-family: var(--font-mono);
color: var(--muted);
}
.rc-score b { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.03em; color: #fff; }
.float-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 8px;
border-radius: 999px;
background: rgb(255 255 255 / .95);
color: var(--ink-900);
font-size: .8125rem;
font-weight: 600;
white-space: nowrap;
box-shadow: 0 18px 40px -14px rgb(0 0 0 / .7);
}
.float-badge .icon { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--blue); color: #fff; stroke-width: 2.2; }
.fb-evidence .icon { background: var(--yellow); color: var(--ink-900); }
.stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: clamp(40px, 5vw, 64px);
border: 1px solid rgb(140 155 255 / .14);
border-radius: 20px;
background: rgb(7 10 31 / .6);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.stats li { display: flex; align-items: center; gap: 14px; padding: 18px 22px; }
.stats li + li { border-left: 1px solid rgb(140 155 255 / .12); }
.stat-n {
font-family: var(--font-display);
font-size: clamp(2rem, 1.5rem + 1.3vw, 2.75rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: #fff;
}
.stats span { color: var(--muted); font-size: .875rem; line-height: 1.35; }
.exam-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.exam-card {
display: flex;
flex-direction: column;
padding: 10px 10px 28px;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--shadow-sm);
transition: transform .35s var(--ease-out), box-shadow .35s;
}
.exam-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.exam-card > :not(.exam-demo) { margin-inline: 18px; }
.exam-card h3 { display: flex; align-items: center; gap: 12px; margin-top: 26px; margin-bottom: 10px; font-size: 1.5rem; }
.exam-card > p { color: var(--muted); font-size: .96875rem; }
.exam-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.langs li { padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: 999px; font-family: var(--font-mono); font-size: .75rem; }
.exam-demo {
color-scheme: dark;
display: flex;
flex-direction: column;
min-height: 250px;
padding: 16px 18px;
border-radius: 20px;
background: radial-gradient(120% 90% at 100% 0%, rgb(46 75 255 / .32), transparent 60%), var(--ink-950);
color: var(--text);
font-family: var(--font-mono);
font-size: .8125rem;
overflow: hidden;
}
.dd-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgb(140 155 255 / .16); }
.dd-k, .ds-step { color: var(--faint); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; padding-top: 2px; }
.dd-row code { font-size: .8125rem; line-height: 1.5; }
.dd-row.is-fail code b { padding: 0 3px; border-radius: 3px; background: rgb(255 92 108 / .18); color: var(--fail); font-weight: 500; }
.dd-verdict {
align-self: flex-start;
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px 4px 8px;
border-radius: 999px;
background: var(--fail-soft);
color: var(--fail);
font-size: .75rem;
}
.dd-row:nth-last-child(2), .ds-table { margin-bottom: 12px; }
.dd-verdict .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.dd-verdict.is-pass { background: var(--pass-soft); color: var(--pass); }
.ds-query { display: block; margin-top: 8px; line-height: 1.5; font-size: .78rem; }
.ds-query .k { color: var(--blue-300); }
.ds-table { width: 72%; margin-top: 12px; border-collapse: collapse; font-size: .75rem; }
.ds-table th { padding: 3px 8px; border-bottom: 1px solid rgb(140 155 255 / .22); color: var(--faint); font-weight: 400; text-align: left; }
.ds-table td { padding: 2px 8px; border-bottom: 1px solid rgb(140 155 255 / .08); }
.ds-table td + td, .ds-table th + th { text-align: right; }
.dt-answer { margin-bottom: 14px; font-family: var(--font-body); font-size: .875rem; line-height: 1.6; color: var(--muted); }
.exam-demo mark { padding: 1px 2px; border-radius: 3px; background: rgb(255 216 77 / .18); color: #FFE48A; }
.dt-point {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding: 8px 10px;
border-radius: 10px;
background: rgb(255 255 255 / .05);
font-family: var(--font-body);
font-size: .8125rem;
}
.dt-point span { flex: 1; }
.dt-point b { color: var(--pass); font-family: var(--font-mono); font-weight: 500; }
.dt-point .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--pass-soft); color: var(--pass); stroke-width: 2.6; }
.dt-quote { display: flex; gap: 8px; margin-top: 8px; padding-left: 10px; color: var(--faint); font-size: .75rem; line-height: 1.45; }
.dt-quote .icon { width: 16px; height: 16px; color: var(--yellow); }
.how { background: var(--bg-alt); }
.steps { display: grid; }
.step {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
gap: clamp(32px, 6vw, 96px);
min-height: 84vh;
}
.step:last-child { min-height: 0; }
.step-text, .step-visual { position: sticky; top: calc(var(--header-h) + 10vh); }
.step-text { padding-top: clamp(16px, 4vh, 48px); }
.step-n {
display: inline-flex;
margin-bottom: 18px;
padding: 3px 11px;
border: 1px solid var(--border-strong);
border-radius: 999px;
color: var(--primary);
font-family: var(--font-mono);
font-size: .8125rem;
}
.step h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.step-text p { margin-top: 14px; color: var(--muted); font-size: 1.0625rem; }
.step-visual {
padding: clamp(16px, 3vw, 40px);
border-radius: var(--radius-xl);
background:
radial-gradient(70% 70% at 80% 10%, light-dark(rgb(46 75 255 / .12), rgb(46 75 255 / .22)), transparent 70%),
light-dark(#E4E7F5, #0E1435);
}
.mock {
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-lg);
font-size: .875rem;
}
.mock-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
color: var(--muted);
font-family: var(--font-mono);
font-size: .8125rem;
}
.mock-bar .icon { color: var(--pass); }
.mock-sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .8125rem; }
.mock-sheet th, .mock-sheet td {
padding: 9px 10px;
border: 1px solid var(--border);
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.mock-sheet thead th, .mock-sheet tbody th {
background: var(--surface-2);
color: var(--faint);
font-family: var(--font-mono);
font-size: .75rem;
font-weight: 400;
text-align: center;
}
.mock-sheet tr > :first-child { width: 38px; }
.mock-sheet tr > :nth-child(3) { width: 26%; }
.sheet-head td { background: var(--primary-soft); color: var(--text); font-weight: 600; }
.mock-sheet td.c { color: var(--primary); font-family: var(--font-mono); font-size: .75rem; }
.sheet-sel td:first-of-type { outline: 2px solid var(--blue); outline-offset: -2px; }
.mock-signin { max-width: 420px; margin-inline: auto; padding: 28px; }
.ms-title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.ms-title .icon { color: var(--primary); }
.ms-field { display: grid; gap: 6px; margin-bottom: 14px; }
.ms-field > span:first-child { color: var(--faint); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; }
.ms-field b { padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-2); font-weight: 500; }
.ms-dots { letter-spacing: .3em; }
.ms-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-langs i { padding: 5px 11px; border: 1px solid var(--border-strong); border-radius: 999px; font-family: var(--font-mono); font-size: .75rem; font-style: normal; }
.ms-langs i.on { border-color: var(--blue); background: var(--blue); color: #fff; }
.ms-start { width: 100%; margin-top: 8px; }
.mock-queue { padding: 8px; }
.mq-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 12px; }
.mq-row + .mq-row { border-top: 1px solid var(--border); }
.mq-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-family: var(--font-mono); font-size: .8125rem; }
.mq-name { font-weight: 600; }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.status .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.is-pass .status { background: var(--pass-soft); color: var(--pass); }
.is-wait .status { background: var(--wait-soft); color: var(--wait); }
.is-fail .status { background: var(--fail-soft); color: var(--fail); }
.spinner { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.mock-results { padding: 20px; }
.mr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.mr-stats div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.mr-stats span { display: block; color: var(--faint); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }
.mr-stats b { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -0.03em; }
.mr-stats small { color: var(--faint); font-size: .55em; }
.mock-results table { width: 100%; border-collapse: collapse; }
.mock-results th { padding: 6px 8px; color: var(--faint); font-family: var(--font-mono); font-size: .6875rem; font-weight: 400; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.mock-results td { padding: 10px 8px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: .8125rem; }
.mock-results td:last-child { width: 40px; text-align: right; }
.mr-bar { width: 62%; }
.mr-bar i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--blue-500)); }
.mr-bar .w-96 { width: 96%; }
.mr-bar .w-88 { width: 88%; }
.mr-bar .w-71 { width: 71%; }
.mr-bar .w-54 { width: 54%; background: var(--wait); }
.integrity { overflow: clip; }
.integrity::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgb(140 155 255 / .07) 1px, transparent 1px),
linear-gradient(90deg, rgb(140 155 255 / .07) 1px, transparent 1px);
background-size: 48px 48px;
-webkit-mask-image: radial-gradient(70% 55% at 50% 0%, #000, transparent);
mask-image: radial-gradient(70% 55% at 50% 0%, #000, transparent);
}
.integrity .container { position: relative; }
.integrity-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 24px; }
.integrity h3 {
font-family: var(--font-mono);
font-size: .8125rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--blue-300);
}
.pipeline-card {
padding: clamp(22px, 3vw, 36px);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: linear-gradient(180deg, rgb(20 27 71 / .7), rgb(14 20 53 / .5));
}
.pipeline { position: relative; display: grid; gap: 24px; margin-top: 26px; }
.pipeline::before {
content: '';
position: absolute;
top: 18px;
bottom: 18px;
left: 17px;
width: 2px;
border-radius: 2px;
background: linear-gradient(var(--blue), var(--blue-300) 60%, var(--pass));
}
.pipeline li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; }
.pl-n {
position: relative;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 2px solid var(--blue-500);
border-radius: 50%;
background: var(--ink-950);
color: #fff;
font-family: var(--font-mono);
font-size: .8125rem;
font-weight: 600;
}
.pipeline li:last-child .pl-n { border-color: var(--pass); }
.pipeline h4 { margin-top: 6px; }
.pipeline p { margin-top: 4px; color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.written-note { margin-top: 28px; padding: 18px 20px; border: 1px solid rgb(255 216 77 / .22); border-radius: 16px; background: rgb(255 216 77 / .06); }
.written-note h4 { display: flex; align-items: center; gap: 8px; color: var(--yellow); }
.written-note p { margin-top: 6px; color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.room-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.room-grid li {
padding: 20px;
border: 1px solid var(--border);
border-radius: 18px;
background: rgb(14 20 53 / .6);
transition: border-color .25s, background-color .25s;
}
.room-grid li:hover { border-color: var(--border-strong); background: rgb(20 27 71 / .75); }
.room-grid .icon { width: 38px; height: 38px; padding: 8px; border-radius: 11px; background: var(--primary-soft); color: var(--blue-300); }
.room-grid h4 { margin-top: 14px; }
.room-grid p { margin-top: 4px; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.ai-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(40px, 6vw, 88px); }
.ai-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.ai-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.ai-points h3 { margin-top: 14px; font-size: 1.0625rem; letter-spacing: -0.015em; }
.ai-points p { margin-top: 6px; color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.ai-models {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 36px;
padding: 16px 18px;
border: 1px dashed var(--border-strong);
border-radius: 16px;
color: var(--muted);
font-size: .9375rem;
}
.ai-models .icon { margin-top: 2px; color: var(--primary); }
.grader {
position: sticky;
top: calc(var(--header-h) + 32px);
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--shadow-lg);
}
.grader-q {
display: flex;
align-items: baseline;
gap: 10px;
padding: 20px 24px;
border-bottom: 1px solid var(--border);
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.35;
}
.grader .label { margin-bottom: 8px; color: var(--faint); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.grader-answer { padding: 20px 24px; background: var(--surface-2); line-height: 1.7; }
.grader-answer mark.ev {
margin: 0;
padding: 1px 3px;
border-radius: 4px;
background: light-dark(rgb(255 216 77 / .55), rgb(255 216 77 / .82));
color: var(--ink-900);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: background-color .2s, box-shadow .2s;
}
.grader:has(.rp-1:hover) .ev-1,
.grader:has(.rp-2:hover) .ev-2 { background: var(--yellow); box-shadow: 0 0 0 4px rgb(255 216 77 / .35); }
.grader-rubric { padding: 20px 24px 6px; }
.rp { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); }
.rp:first-child { padding-top: 4px; border-top: 0; }
.rp-mark .icon { width: 26px; height: 26px; padding: 5px; border-radius: 50%; stroke-width: 2.6; }
.rp.is-ok .rp-mark .icon { background: var(--pass-soft); color: var(--pass); }
.rp.is-no .rp-mark .icon { background: var(--fail-soft); color: var(--fail); }
.rp-text { font-weight: 600; transition: color .2s; }
.rp:hover .rp-text { color: var(--primary); }
.rp-ev { margin-top: 3px; color: var(--muted); font-family: var(--font-mono); font-size: .8125rem; }
.rp.is-no .rp-ev { color: var(--faint); }
.rp-score { padding: 2px 10px; border-radius: 999px; background: var(--pass-soft); color: var(--pass); font-family: var(--font-mono); font-size: .875rem; font-weight: 500; }
.rp.is-ok .rp-score::before { content: '+'; }
.rp.is-no .rp-score { background: var(--surface-2); color: var(--faint); }
.rp.is-no .rp-score::before { content: '0 / '; }
.grader-total { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-2); }
.grader-total > span:first-child { color: var(--faint); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.grader-total b { margin-right: auto; font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -0.03em; }
.fake-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: .875rem; font-weight: 600; }
.langs-section { background: var(--bg-alt); }
.i18n-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 88px); }
.i18n-grid .section-head { margin-bottom: 0; }
.lang-demo { display: block; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lg); }
.lang-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface-2); }
cs-lang-demo:not(:defined) .lang-tabs { display: none; }
.lang-tabs button { flex: 1; padding: 10px 8px; border: 0; border-radius: 12px; background: none; color: var(--muted); font-size: .9375rem; font-weight: 600; transition: background-color .2s, color .2s; }
.lang-tabs button:hover { color: var(--text); }
.lang-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.lang-panel { padding: 22px 18px 14px; }
cs-lang-demo:not(:defined) .lang-panel + .lang-panel { border-top: 1px solid var(--border); }
cs-lang-demo:defined .lp-lang { display: none; }
.lp-lang { margin-bottom: 8px; color: var(--faint); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.lang-panel h3 { font-size: 1.375rem; }
.lang-panel > p { margin-top: 8px; color: var(--muted); }
.lp-io { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.lp-io > div { padding: 12px 14px; border-radius: 14px; background: var(--ink-950); color: #EEF0FD; }
.lp-io span { display: block; margin-bottom: 6px; color: #7D85B3; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.lp-io pre { font-size: .875rem; line-height: 1.5; }
.connect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.connect-card {
display: flex;
flex-direction: column;
padding: 10px 10px 28px;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: linear-gradient(180deg, rgb(20 27 71 / .7), rgb(14 20 53 / .5));
}
.connect-card > :not(.connect-demo) { margin-inline: 18px; }
.connect-card h3 { display: flex; align-items: center; gap: 12px; margin-top: 26px; margin-bottom: 10px; font-size: 1.5rem; }
.connect-card h3 .exam-icon { flex: none; }
.connect-card > p { color: var(--muted); font-size: .96875rem; }
.connect-note { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border-strong); color: var(--faint); font-size: .875rem; }
.connect-demo {
display: flex;
flex-direction: column;
gap: 14px;
min-height: 268px;
padding: 18px;
border-radius: 20px;
background: radial-gradient(120% 90% at 100% 0%, rgb(46 75 255 / .32), transparent 60%), var(--ink-950);
font-size: .8125rem;
overflow: hidden;
}
.cd-title { display: flex; align-items: center; gap: 8px; color: var(--faint); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; }
.cd-title .icon { width: 16px; height: 16px; color: var(--blue-300); }
.cd-sync { display: grid; gap: 8px; }
.cd-sync li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 4px 12px;
padding: 10px 12px;
border: 1px solid rgb(140 155 255 / .14);
border-radius: 12px;
background: rgb(255 255 255 / .03);
}
.cd-sync code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-state { grid-column: 1 / -1; color: var(--faint); font-size: .75rem; }
.is-on .cd-state { color: var(--pass); }
.toggle { position: relative; width: 34px; height: 20px; border-radius: 99px; background: var(--border-strong); }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.is-on .toggle { background: var(--pass); }
.is-on .toggle::after { translate: 14px 0; }
.cd-code {
margin-top: auto;
padding: 12px 14px;
border: 1px solid rgb(140 155 255 / .12);
border-radius: 12px;
background: rgb(0 0 0 / .25);
color: #DCE0FA;
font-size: .75rem;
line-height: 1.6;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
}
.cd-code .k { color: var(--blue-300); }
.cd-code .s { color: #7FE3C4; }
.cd-config { margin-top: 0; }
.cd-chat { display: grid; gap: 10px; margin-top: auto; font-family: var(--font-body); }
.cd-msg { max-width: 88%; padding: 9px 13px; border-radius: 14px; line-height: 1.45; }
.cd-who { display: block; margin-bottom: 2px; color: var(--faint); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }
.cd-you { justify-self: end; border-bottom-right-radius: 4px; background: var(--blue); color: #fff; }
.cd-you .cd-who { color: rgb(255 255 255 / .7); }
.cd-agent { border-bottom-left-radius: 4px; background: rgb(255 255 255 / .07); }
.cd-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--muted); font-size: .75rem; }
.cd-tool .icon { width: 16px; height: 16px; color: var(--yellow); }
.cd-tool code { padding: 2px 8px; border-radius: 6px; background: var(--primary-soft); color: var(--blue-300); }
.cd-tool .cd-args { background: none; padding: 0; color: var(--faint); overflow-wrap: anywhere; }
.connect-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.connect-items li {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 14px;
padding: 20px;
border: 1px solid var(--border);
border-radius: 18px;
background: rgb(14 20 53 / .6);
}
.connect-items .icon { width: 38px; height: 38px; padding: 8px; border-radius: 11px; background: var(--primary-soft); color: var(--blue-300); }
.connect-items p { margin-top: 4px; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.connect-items code { white-space: nowrap; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature {
padding: 24px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s;
}
.feature:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.feature-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.feature h3 { margin-top: 18px; font-size: 1.125rem; }
.feature p { margin-top: 6px; color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.features + .faq { padding-top: 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: start; gap: clamp(32px, 6vw, 96px); }
.faq-grid .section-head { position: sticky; top: calc(var(--header-h) + 32px); }
.cta-band { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(96px, 13vw, 176px); text-align: center; }
.cta-bg {
position: absolute;
inset: 0;
z-index: -1;
background-image: url('/assets/img/hero-tiles-960.0201e659ab.jpg');
background-image: image-set(url('/assets/img/hero-tiles-960.03dc780476.avif') type('image/avif'), url('/assets/img/hero-tiles-960.e956d2d2bf.webp') type('image/webp'), url('/assets/img/hero-tiles-960.0201e659ab.jpg') type('image/jpeg'));
background-position: 50% 90%;
background-size: cover;
}
.cta-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 80% at 50% 45%, rgb(7 10 31 / .55), rgb(7 10 31 / .96) 85%); }
.cta-inner { max-width: 46rem; }
.cta-band h2 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem); color: #fff; }
.cta-band .lead { margin-inline: auto; max-width: 36rem; color: rgb(238 240 253 / .8); }
.cta-band .actions { justify-content: center; }
.cta-mail { margin-top: 18px; color: var(--muted); font-size: .9375rem; }
.cta-mail a { color: #fff; }
.not-found { display: grid; place-items: center; min-height: 62svh; padding-block: 96px; text-align: center; }
.nf-inner { display: grid; justify-items: center; }
.nf-tiles { display: flex; margin-bottom: 28px; }
.nf-tiles li { width: 56px; height: 56px; border-radius: 14px; background: var(--fail); box-shadow: 0 0 44px rgb(255 92 108 / .45); }
.not-found h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }
.not-found .lead { max-width: 30rem; margin-inline: auto; }
.not-found .actions { justify-content: center; }
@media (max-width: 1080px) {
.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.integrity-grid, .ai-grid { grid-template-columns: minmax(0, 1fr); }
.grader { position: static; max-width: 640px; }
}
@media (max-width: 999.98px) {
.hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero-visual { width: 100%; max-width: 560px; margin: 24px auto 0; }
}
@media (max-width: 900px) {
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats li + li { border-left: 0; }
.stats li:nth-child(even) { border-left: 1px solid rgb(140 155 255 / .12); }
.stats li:nth-child(n + 3) { border-top: 1px solid rgb(140 155 255 / .12); }
.exam-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.exam-demo { min-height: 0; }
.step { grid-template-columns: minmax(0, 1fr); gap: 24px; min-height: 0; }
.step + .step { margin-top: 72px; }
.step-text, .step-visual { position: static; }
.step-text { padding-top: 0; }
.i18n-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
.faq-grid .section-head { position: static; }
.connect-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.connect-demo { min-height: 0; }
.connect-items { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}
@media (max-width: 600px) {
.feature-grid, .room-grid, .ai-points { grid-template-columns: minmax(0, 1fr); }
.hero-visual { margin-bottom: 16px; }
.hv-tilt { grid-template-columns: minmax(0, 6fr) minmax(0, 88fr) minmax(0, 6fr); grid-template-rows: auto 0 auto; }
.hv-rubric { margin-top: 20px; }
.fb-cases { margin-right: 0; }
.fb-evidence { grid-area: 3 / 1 / 4 / 4; justify-self: start; align-self: end; margin: 0 0 -20px 12px; }
.stats li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; }
.mock-sheet tr > :nth-child(n + 5) { display: none; }
.mq-row { grid-template-columns: 34px minmax(0, 1fr); row-gap: 6px; }
.mq-n { grid-row: span 2; }
.mq-row .status { justify-self: start; }
.mr-stats b { font-size: 1.375rem; }
.lp-io { grid-template-columns: minmax(0, 1fr); }
}
.depth-1 { --speed: .45; --tilt: 6; }
.depth-2 { --speed: .3; --tilt: 12; }
.depth-3 { --speed: .12; --tilt: 18; }
.depth-4 { --speed: -.04; --tilt: 28; }
.depth-5 { --speed: -.12; --tilt: 36; }
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }
.count { --n: 12; }
@supports (animation-timeline: scroll()) {
.page-home .site-header {
animation: header-fill linear both;
animation-timeline: scroll(root);
animation-range: 0 120px;
}
}
.page-home .site-header.at-top {
background-color: transparent;
border-bottom-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
@keyframes header-fill {
from {
background-color: rgb(7 10 31 / 0);
border-bottom-color: rgb(140 155 255 / 0);
-webkit-backdrop-filter: blur(0) saturate(100%);
backdrop-filter: blur(0) saturate(100%);
}
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
@supports (animation-timeline: scroll()) {
.layer {
animation: drift linear both;
animation-timeline: scroll(root);
animation-range: 0 100svh;
}
}
.layer {
transform: translate3d(calc(var(--px, 0) * var(--tilt, 0) * -1px), calc(var(--py, 0) * var(--tilt, 0) * -1px), 0);
}
.hv-tilt { transform: rotateX(calc(var(--py, 0) * 3deg)) rotateY(calc(var(--px, 0) * -4deg)); }
.hero .card { animation: rise .9s var(--ease-out) both; }
.hv-editor .card { animation-delay: .1s; }
.hv-rubric .card { animation-delay: .35s; }
.float-badge { animation: rise .7s var(--ease-out) both; }
.fb-cases { animation-delay: 2.4s; }
.fb-evidence { animation-delay: 1.1s; }
.hero .tiles li { animation: tile-pass .5s var(--ease-out) both; }
.hero .tiles li:nth-child(1) { animation-delay: .7s; }
.hero .tiles li:nth-child(2) { animation-delay: .85s; }
.hero .tiles li:nth-child(3) { animation-delay: 1s; }
.hero .tiles li:nth-child(4) { animation-delay: 1.15s; }
.hero .tiles li:nth-child(5) { animation-delay: 1.3s; }
.hero .tiles li:nth-child(6) { animation-delay: 1.45s; }
.hero .tiles li:nth-child(7) { animation-delay: 1.6s; }
.hero .tiles li:nth-child(8) { animation-delay: 1.75s; }
.hero .tiles li:nth-child(9) { animation-delay: 1.9s; }
.hero .tiles li:nth-child(10) { animation-delay: 2.05s; }
.hero .tiles li:nth-child(11) { animation-delay: 2.2s; }
.hero .tiles li:nth-child(12) { animation-delay: 2.35s; }
.hero .count { animation: count-up 1.8s linear .62s both; }
.hero .verdict { animation: rise .6s var(--ease-out) 2.5s both; }
@supports (animation-timeline: view()) {
[data-reveal] {
animation: reveal linear both;
animation-timeline: view();
animation-range: entry 0% entry 75%;
}
.step { view-timeline: --step block; }
.step .mock {
animation: mock-in linear both;
animation-timeline: --step;
animation-range: entry 0% entry 60%;
}
.spinner {
animation: spin linear both;
animation-timeline: --step;
animation-range: entry 0% exit 100%;
}
}
cs-lang-demo:defined .lang-panel { animation: panel-in .35s var(--ease-out) both; }
.nf-tiles li { animation: tile-fail .8s var(--ease-out) .3s both; }
}
@media (prefers-reduced-motion: reduce) {
.exam-card:hover, .feature:hover, .btn:active { transform: none; }
.btn-ghost:hover .icon { translate: none; }
}
@keyframes drift { to { translate: 0 calc(var(--speed) * 100svh); } }
@keyframes rise { from { opacity: 0; translate: 0 40px; } }
@keyframes reveal { from { opacity: 0; translate: 0 32px; } }
@keyframes mock-in { from { opacity: .3; scale: .94; } }
@keyframes panel-in { from { opacity: 0; translate: 0 6px; } }
@keyframes spin { to { rotate: 3turn; } }
@keyframes count-up { from { --n: 0; } to { --n: 12; } }
@keyframes tile-pass {
from { background-color: rgb(255 255 255 / .1); box-shadow: none; scale: .55; }
60% { scale: 1.15; }
}
@keyframes tile-fail {
from { background-color: var(--border-strong); box-shadow: none; scale: .6; }
60% { scale: 1.08; }
}