:root {
--k-palette-navy-950: #050b1f;
--k-palette-navy-900: #0a1633;
--k-palette-navy-800: #0f2459;
--k-palette-navy-700: #15327a;
--k-palette-blue-700: #1546c9;
--k-palette-blue-600: #1f5eff;
--k-palette-blue-500: #3d7bff;
--k-palette-blue-400: #5b8cff;
--k-palette-blue-300: #8db1ff;
--k-palette-blue-200: #b9ceff;
--k-palette-blue-100: #dce7ff;
--k-palette-blue-50: #eef3ff;
--k-palette-sky-300: #7fc4ff;
--k-palette-sky-100: #d9eeff;
--k-palette-turquoise-600: #0b8fa0;
--k-palette-turquoise-500: #12b5c9;
--k-palette-turquoise-300: #6fdce8;
--k-palette-ice: #f5f8ff;
--k-palette-white: #ffffff;
--k-mark-plate: #eef2f8;
--k-mark-ink-on-light: #0a1633;
--k-mark-ink-on-dark: #f4f7fc;
--k-wordmark-family: 'M PLUS Rounded 1c';
--k-wordmark-weight: 800;
--k-wordmark-tracking: -0.01em;
--k-wordmark-ratio: 0.578;
--k-flow-0: #0a1633;
--k-flow-1: #0f2459;
--k-flow-2: #15327a;
--k-flow-3: #1546c9;
--k-space-2: 2px;
--k-space-4: 4px;
--k-space-6: 6px;
--k-space-8: 8px;
--k-space-10: 10px;
--k-space-12: 12px;
--k-space-14: 14px;
--k-space-16: 16px;
--k-space-20: 20px;
--k-space-24: 24px;
--k-space-32: 32px;
--k-space-40: 40px;
--k-space-48: 48px;
--k-radius-xs: 6px;
--k-radius-sm: 8px;
--k-radius-md: 12px;
--k-radius-lg: 16px;
--k-radius-xl: 20px;
--k-radius-xxl: 24px;
--k-radius-full: 999px;
--k-shape-card: 24px;
--k-shape-card-large: 28px;
--k-shape-control: 16px;
--k-shape-sheet: 28px;
--k-shape-pill: 999px;
--k-font-caption: 0.75rem;
--k-font-body-2: 0.75rem;
--k-font-body: 0.875rem;
--k-font-subtitle: 0.9375rem;
--k-font-title: 1.0625rem;
--k-font-headline: 1.25rem;
--k-font-display: 1.5rem;
--k-anim-fast: 150ms;
--k-anim-normal: 250ms;
--k-anim-slow: 400ms;
--k-anim-sheet: 350ms;
--k-motion-quick: 120ms;
--k-motion-standard: 220ms;
--k-motion-emphasized: 360ms;
--k-motion-curve: cubic-bezier(0.33, 1, 0.68, 1);
--k-max-content: 720px;
--k-touch-target: 48px;
--k-btn-height-large: 56px;
--k-btn-height-medium: 48px;
--k-btn-height-small: 40px;
--k-btn-padding-large: 28px;
--k-btn-padding-medium: 24px;
--k-btn-padding-small: 18px;
--k-btn-radius-large: 16px;
--k-btn-radius-medium: 14px;
--k-btn-radius-small: 12px;
--k-btn-font-large: 1.0625rem;
--k-btn-font-medium: 1rem;
--k-btn-font-small: 0.875rem;
--k-btn-font-weight: 800;
--k-btn-letter-spacing-em: 0.005em;
--k-btn-disk-ratio: 0.78;
--k-btn-disk-inset-large: 6px;
--k-btn-disk-inset-medium: 5px;
--k-btn-disk-inset-small: 4px;
--k-btn-disk-icon: 20px;
--k-btn-ring-icon: 16px;
--k-btn-ring-stroke: 4px;
--k-btn-gap: 10px;
--k-btn-plate-near: 5px;
--k-btn-plate-far: 10px;
--k-btn-plate-near-small: 4px;
--k-btn-plate-far-small: 8px;
--k-btn-plate-hover-scale: 1.4;
--k-btn-hover-lift: 2px;
--k-btn-reserve-large: 10px;
--k-btn-reserve-medium: 10px;
--k-btn-reserve-small: 8px;
--k-btn-min-touch-target: 48px;
--k-btn-icon-size: 48px;
--k-btn-icon-radius: 14px;
--k-btn-icon-plate: 4px;
--k-btn-icon-glyph: 24px;
--k-btn-focus-width: 3px;
--k-btn-focus-gap: 4px;
--k-btn-secondary-border: 2px;
--k-btn-secondary-plate-opacity: 0.9;
--k-btn-critical-soft-plate-opacity: 0.3;
--k-btn-hold-glow-opacity: 0.18;
--k-btn-disabled-opacity: 0.45;
--k-btn-disk-press-travel: 0.3;
--k-btn-plates: 350ms;
--k-btn-disk-slide: 500ms;
--k-btn-press: 120ms;
--k-btn-release: 350ms;
--k-btn-spin: 750ms;
--k-btn-check: 450ms;
--k-btn-success-hold: 1400ms;
--k-btn-rewind: 250ms;
--k-btn-hold-sos: 3000ms;
--k-btn-hold-critical: 1600ms;
--k-btn-curve: cubic-bezier(0.2, 0.8, 0.2, 1);
--k-btn-font: 'M PLUS Rounded 1c', 'Rubik', system-ui, sans-serif;
}
:root,
:root[data-theme="light"] {
color-scheme: light;
--k-background: #fbfcfe;
--k-surface: #ffffff;
--k-surface-muted: #f2f5fa;
--k-surface-raised: #ffffff;
--k-border: #ecedef;
--k-border-strong: #dadce1;
--k-text-primary: #0b0f17;
--k-text-secondary: #3f4856;
--k-text-tertiary: #566070;
--k-brand: #1f5eff;
--k-on-brand: #ffffff;
--k-safe: #11803e;
--k-advisory: #1f5eff;
--k-watch: #b45309;
--k-warning: #c2410c;
--k-critical: #c81e1e;
--k-unknown: #5f6673;
--k-sos: #d61f2c;
--k-on-sos: #ffffff;
--k-map-overlay: rgb(255 255 255 / 0.902);
--k-on-map-overlay: #0b0f17;
--k-brand-on-hero: #ffffff;
--k-brand-on-hero-muted: rgb(255 255 255 / 0.851);
--k-brand-navy: #0a1633;
--k-brand-accent: #0b8fa0;
--k-brand-on-accent: #ffffff;
--k-brand-tint: #eaf0ff;
--k-brand-glass-fill: rgb(255 255 255 / 0.702);
--k-brand-glass-border: rgb(10 22 51 / 0.09);
--k-brand-hero-control-fill: rgb(255 255 255 / 0.18);
--k-brand-hero-control-border: rgb(255 255 255 / 0.322);
--k-brand-hero-glow: rgb(127 196 255 / 0.349);
--k-brand-hero-mist: rgb(61 139 255 / 0.18);
--k-brand-floating-fill: #ffffff;
--k-hero-0: #0a1633;
--k-hero-1: #0f2459;
--k-hero-2: #15327a;
--k-hero-3: #1546c9;
--k-aurora-ground: linear-gradient(180deg, #fbfcfe 0%, #f6f8fc 26%, #f2f5fa 58%, #e9eef6 84%, #eaf0ff 100%);
--k-aurora-glow-top: rgb(125 172 255 / 0.302);
--k-aurora-glow-leaf: rgb(94 214 40 / 0.161);
--k-aurora-glow-sky: rgb(109 218 230 / 0.239);
--k-aurora-glass: rgb(255 255 255 / 0.902);
--k-aurora-glass-inner: rgb(255 255 255 / 0.961);
--k-aurora-glass-edge: rgb(10 22 51 / 0.09);
--k-aurora-glass-highlight: rgb(255 255 255 / 0.6);
--k-aurora-ink: #0b0f17;
--k-aurora-ink-muted: #3f4856;
--k-aurora-brand-ink: #1546c9;
--k-aurora-accent: linear-gradient(90deg, #1f8a3a, #0b8fa0, #1546c9);
--k-btn-primary-bg: #1f5eff;
--k-btn-primary-fg: #ffffff;
--k-btn-plate-blue: #4fb3e8;
--k-btn-plate-green: #82d64f;
--k-btn-safe-bg: #1e7a3a;
--k-btn-safe-fg: #ffffff;
--k-btn-secondary-bg: #ffffff;
--k-btn-secondary-ink: #0a1633;
--k-btn-tertiary-fg: #1f5eff;
--k-btn-critical-bg: #b4231b;
--k-btn-critical-fg: #ffffff;
--k-btn-critical-plate: #6e1510;
--k-btn-critical-soft-fg: #b4231b;
--k-btn-disk-bg: #ffffff;
--k-btn-focus: #1f5eff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--k-background: #020409;
--k-surface: #080d19;
--k-surface-muted: #0c1322;
--k-surface-raised: #0c1322;
--k-border: #191e29;
--k-border-strong: #282c37;
--k-text-primary: #f2f4f7;
--k-text-secondary: #bac2ce;
--k-text-tertiary: #939cab;
--k-brand: #6f9bff;
--k-on-brand: #04091a;
--k-safe: #3dd68c;
--k-advisory: #6f9bff;
--k-watch: #f5b83d;
--k-warning: #ff8a4c;
--k-critical: #ff6b6b;
--k-unknown: #9aa2af;
--k-sos: #ff3b47;
--k-on-sos: #ffffff;
--k-map-overlay: rgb(8 13 25 / 0.902);
--k-on-map-overlay: #f2f4f7;
--k-brand-on-hero: #ffffff;
--k-brand-on-hero-muted: rgb(255 255 255 / 0.8);
--k-brand-navy: #050b1f;
--k-brand-accent: #4fd6e4;
--k-brand-on-accent: #050b1f;
--k-brand-tint: #0e1a38;
--k-brand-glass-fill: rgb(8 13 25 / 0.62);
--k-brand-glass-border: rgb(255 255 255 / 0.09);
--k-brand-hero-control-fill: rgb(255 255 255 / 0.141);
--k-brand-hero-control-border: rgb(255 255 255 / 0.239);
--k-brand-hero-glow: rgb(91 140 255 / 0.251);
--k-brand-hero-mist: rgb(47 107 255 / 0.2);
--k-brand-floating-fill: #0c1322;
--k-hero-0: #050b1f;
--k-hero-1: #0a1633;
--k-hero-2: #0f2459;
--k-hero-3: #1546c9;
--k-aurora-ground: linear-gradient(180deg, #060d24 0%, #0a1633 26%, #0f2459 58%, #15327a 84%, #1a3e96 100%);
--k-aurora-glow-top: rgb(91 140 255 / 0.502);
--k-aurora-glow-leaf: rgb(130 214 79 / 0.239);
--k-aurora-glow-sky: rgb(79 179 232 / 0.161);
--k-aurora-glass: rgb(12 20 42 / 0.722);
--k-aurora-glass-inner: rgb(10 18 40 / 0.851);
--k-aurora-glass-edge: rgb(160 180 235 / 0.161);
--k-aurora-glass-highlight: rgb(255 255 255 / 0.071);
--k-aurora-ink: #f3f6fd;
--k-aurora-ink-muted: rgb(214 224 250 / 0.859);
--k-aurora-brand-ink: #8db1ff;
--k-aurora-accent: linear-gradient(90deg, #79e34a, #4fd6e4, #7ea6ff);
--k-btn-primary-bg: #1f5eff;
--k-btn-primary-fg: #ffffff;
--k-btn-plate-blue: #4fb3e8;
--k-btn-plate-green: #82d64f;
--k-btn-safe-bg: #1e7a3a;
--k-btn-safe-fg: #ffffff;
--k-btn-secondary-bg: #0a1633;
--k-btn-secondary-ink: #f4f7fc;
--k-btn-tertiary-fg: #8db1ff;
--k-btn-critical-bg: #b4231b;
--k-btn-critical-fg: #ffffff;
--k-btn-critical-plate: #6e1510;
--k-btn-critical-soft-fg: #ff7a6e;
--k-btn-disk-bg: #ffffff;
--k-btn-focus: #8db1ff;
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--k-background: #020409;
--k-surface: #080d19;
--k-surface-muted: #0c1322;
--k-surface-raised: #0c1322;
--k-border: #191e29;
--k-border-strong: #282c37;
--k-text-primary: #f2f4f7;
--k-text-secondary: #bac2ce;
--k-text-tertiary: #939cab;
--k-brand: #6f9bff;
--k-on-brand: #04091a;
--k-safe: #3dd68c;
--k-advisory: #6f9bff;
--k-watch: #f5b83d;
--k-warning: #ff8a4c;
--k-critical: #ff6b6b;
--k-unknown: #9aa2af;
--k-sos: #ff3b47;
--k-on-sos: #ffffff;
--k-map-overlay: rgb(8 13 25 / 0.902);
--k-on-map-overlay: #f2f4f7;
--k-brand-on-hero: #ffffff;
--k-brand-on-hero-muted: rgb(255 255 255 / 0.8);
--k-brand-navy: #050b1f;
--k-brand-accent: #4fd6e4;
--k-brand-on-accent: #050b1f;
--k-brand-tint: #0e1a38;
--k-brand-glass-fill: rgb(8 13 25 / 0.62);
--k-brand-glass-border: rgb(255 255 255 / 0.09);
--k-brand-hero-control-fill: rgb(255 255 255 / 0.141);
--k-brand-hero-control-border: rgb(255 255 255 / 0.239);
--k-brand-hero-glow: rgb(91 140 255 / 0.251);
--k-brand-hero-mist: rgb(47 107 255 / 0.2);
--k-brand-floating-fill: #0c1322;
--k-hero-0: #050b1f;
--k-hero-1: #0a1633;
--k-hero-2: #0f2459;
--k-hero-3: #1546c9;
--k-aurora-ground: linear-gradient(180deg, #060d24 0%, #0a1633 26%, #0f2459 58%, #15327a 84%, #1a3e96 100%);
--k-aurora-glow-top: rgb(91 140 255 / 0.502);
--k-aurora-glow-leaf: rgb(130 214 79 / 0.239);
--k-aurora-glow-sky: rgb(79 179 232 / 0.161);
--k-aurora-glass: rgb(12 20 42 / 0.722);
--k-aurora-glass-inner: rgb(10 18 40 / 0.851);
--k-aurora-glass-edge: rgb(160 180 235 / 0.161);
--k-aurora-glass-highlight: rgb(255 255 255 / 0.071);
--k-aurora-ink: #f3f6fd;
--k-aurora-ink-muted: rgb(214 224 250 / 0.859);
--k-aurora-brand-ink: #8db1ff;
--k-aurora-accent: linear-gradient(90deg, #79e34a, #4fd6e4, #7ea6ff);
--k-btn-primary-bg: #1f5eff;
--k-btn-primary-fg: #ffffff;
--k-btn-plate-blue: #4fb3e8;
--k-btn-plate-green: #82d64f;
--k-btn-safe-bg: #1e7a3a;
--k-btn-safe-fg: #ffffff;
--k-btn-secondary-bg: #0a1633;
--k-btn-secondary-ink: #f4f7fc;
--k-btn-tertiary-fg: #8db1ff;
--k-btn-critical-bg: #b4231b;
--k-btn-critical-fg: #ffffff;
--k-btn-critical-plate: #6e1510;
--k-btn-critical-soft-fg: #ff7a6e;
--k-btn-disk-bg: #ffffff;
--k-btn-focus: #8db1ff;
}
@media (prefers-contrast: more) {
:root:not([data-theme="dark"]) {
--k-background: #ffffff;
--k-surface: #ffffff;
--k-surface-muted: #f0f0f0;
--k-surface-raised: #ffffff;
--k-border: #6b6b6b;
--k-border-strong: #3d3d3d;
--k-text-primary: #000000;
--k-text-secondary: #262626;
--k-text-tertiary: #404040;
--k-brand: #0038c7;
--k-on-brand: #ffffff;
--k-safe: #0b5f2e;
--k-advisory: #0038c7;
--k-watch: #7a3800;
--k-warning: #8f2c00;
--k-critical: #9b0000;
--k-unknown: #3d3d3d;
--k-sos: #b00010;
--k-on-sos: #ffffff;
--k-map-overlay: #ffffff;
--k-on-map-overlay: #000000;
}
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--k-background: #000000;
--k-surface: #0c0c0c;
--k-surface-muted: #161616;
--k-surface-raised: #161616;
--k-border: #5a5a5a;
--k-border-strong: #8a8a8a;
--k-text-primary: #ffffff;
--k-text-secondary: #e0e0e0;
--k-text-tertiary: #c2c2c2;
--k-brand: #8fb0ff;
--k-on-brand: #000000;
--k-safe: #5cf0a6;
--k-advisory: #9fbcff;
--k-watch: #ffd166;
--k-warning: #ffa472;
--k-critical: #ff8a8a;
--k-unknown: #c8c8c8;
--k-sos: #ff4d57;
--k-on-sos: #ffffff;
--k-map-overlay: #0c0c0c;
--k-on-map-overlay: #ffffff;
}
}
@media (prefers-contrast: more) {
:root[data-theme="dark"] {
--k-background: #000000;
--k-surface: #0c0c0c;
--k-surface-muted: #161616;
--k-surface-raised: #161616;
--k-border: #5a5a5a;
--k-border-strong: #8a8a8a;
--k-text-primary: #ffffff;
--k-text-secondary: #e0e0e0;
--k-text-tertiary: #c2c2c2;
--k-brand: #8fb0ff;
--k-on-brand: #000000;
--k-safe: #5cf0a6;
--k-advisory: #9fbcff;
--k-watch: #ffd166;
--k-warning: #ffa472;
--k-critical: #ff8a8a;
--k-unknown: #c8c8c8;
--k-sos: #ff4d57;
--k-on-sos: #ffffff;
--k-map-overlay: #0c0c0c;
--k-on-map-overlay: #ffffff;
}
}
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url('/_k/fonts/rubik-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url('/_k/fonts/rubik-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap; src: url('/_k/fonts/rubik-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url('/_k/fonts/rubik-400-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url('/_k/fonts/rubik-500-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap; src: url('/_k/fonts/rubik-700-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Rubik Fallback'; src: local('Arial'), local('Helvetica'), local('Roboto'); size-adjust: 104%; ascent-override: 90%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: 'Koruya Wordmark'; font-style: normal; font-weight: 800; font-display: block; src: url('/_k/fonts/wordmark.woff2') format('woff2'); }
:root {
--k-font-sans: 'Rubik', 'Rubik Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
--k-font-wordmark: 'Koruya Wordmark', 'Rubik', 'Rubik Fallback', system-ui, sans-serif;
--k-header-h: 72px;
--k-gutter: clamp(16px, 4vw, 32px);
--k-container: 1180px;
--k-ease: var(--k-motion-curve);
--k-link: var(--k-brand);
--k-shadow-card: 0 8px 24px rgb(10 22 51 / 0.08);
--k-shadow-float: 0 12px 32px rgb(10 22 51 / 0.12);
}
:root[data-theme='dark'] { --k-shadow-card: none; --k-shadow-float: 0 8px 24px rgb(0 0 0 / 0.4); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) { --k-shadow-card: none; --k-shadow-float: 0 8px 24px rgb(0 0 0 / 0.4); }
}
:root:lang(ar) { --k-font-sans: 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, system-ui, sans-serif; }
:root:lang(hi) { --k-font-sans: 'Nirmala UI', 'Noto Sans Devanagari', 'Kohinoor Devanagari', system-ui, sans-serif; }
:root:lang(zh-Hans) { --k-font-sans: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-block-start: calc(var(--k-header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
html:focus-within { scroll-behavior: smooth; }
}
body {
margin: 0;
min-block-size: 100vh;
background: var(--k-background);
color: var(--k-text-primary);
font-family: var(--k-font-sans);
font-size: 1.0625rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-synthesis-weight: none;
}
h1, h2, h3, h4 {
margin: 0;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-inline-size: 100%; }
img { block-size: auto; }
a { color: var(--k-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible {
outline: 3px solid var(--k-brand);
outline-offset: 3px;
border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--k-palette-blue-200); color: var(--k-palette-navy-950); }
.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; border: 0; padding: 0; margin: -1px;
}
.skip-link {
position: absolute;
inset-block-start: 8px;
inset-inline-start: 8px;
z-index: 100;
padding: 12px 18px;
border-radius: var(--k-radius-md);
background: var(--k-brand);
color: var(--k-on-brand);
font-weight: 500;
text-decoration: none;
transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; }
.k-icon { flex: none; }
[dir='rtl'] .k-icon--flip { transform: scaleX(-1); }
.k-lockup {
--size: 40px;
display: inline-flex;
align-items: center;
gap: calc(var(--size) * 0.22);
color: var(--k-mark-ink-on-light);
line-height: 1;
}
.k-lockup--28 { --size: 28px; }
.k-lockup--32 { --size: 32px; }
.k-lockup--40 { --size: 40px; }
.k-lockup--56 { --size: 56px; }
.k-lockup--72 { --size: 72px; }
.k-lockup--96 { --size: 96px; }
.k-lockup__logo {
display: grid;
place-items: center;
inline-size: var(--size);
block-size: var(--size);
border-radius: 50%;
}
.k-lockup__logo img { inline-size: 100%; block-size: 100%; }
.k-lockup__word {
font-family: var(--k-font-wordmark);
font-weight: 800;
font-size: calc(var(--size) * var(--k-wordmark-ratio));
letter-spacing: var(--k-wordmark-tracking);
white-space: nowrap;
}
.k-lockup--dark { color: var(--k-mark-ink-on-dark); }
.k-lockup--dark .k-lockup__logo { background: var(--k-mark-plate); }
.k-lockup--dark .k-lockup__logo img { inline-size: 84%; block-size: 84%; }
:root[data-theme='dark'] .k-lockup--auto { color: var(--k-mark-ink-on-dark); }
:root[data-theme='dark'] .k-lockup--auto .k-lockup__logo { background: var(--k-mark-plate); }
:root[data-theme='dark'] .k-lockup--auto .k-lockup__logo img { inline-size: 84%; block-size: 84%; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) .k-lockup--auto { color: var(--k-mark-ink-on-dark); }
:root:not([data-theme='light']) .k-lockup--auto .k-lockup__logo { background: var(--k-mark-plate); }
:root:not([data-theme='light']) .k-lockup--auto .k-lockup__logo img { inline-size: 84%; block-size: 84%; }
}
@media (forced-colors: active) {
.k-lockup__logo { background: Canvas !important; }
:focus-visible { outline-color: Highlight; }
}
:root {
--k-btn-primary-bg: #1f5eff;
--k-btn-primary-fg: #ffffff;
--k-btn-plate-blue: #4fb3e8;
--k-btn-plate-green: #82d64f;
--k-btn-safe-bg: #1e7a3a;
--k-btn-safe-fg: #ffffff;
--k-btn-secondary-bg: #ffffff;
--k-btn-secondary-ink: #0a1633;
--k-btn-secondary-plate: rgb(10 22 51 / 0.9);
--k-btn-tertiary-fg: #1f5eff;
--k-btn-critical-bg: #b4231b;
--k-btn-critical-fg: #ffffff;
--k-btn-critical-plate: #6e1510;
--k-btn-critical-soft-ink: #b4231b;
--k-btn-critical-soft-plate: rgb(180 35 27 / 0.3);
--k-btn-disk-bg: #ffffff;
--k-btn-focus: #1f5eff;
--k-btn-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--k-btn-font: 'Koruya Display', 'M PLUS Rounded 1c', var(--k-font-sans, system-ui, sans-serif);
}
:root[data-theme='dark'], .k-on-dark {
--k-btn-secondary-bg: #0a1633;
--k-btn-secondary-ink: #f4f7fc;
--k-btn-secondary-plate: rgb(244 247 252 / 0.9);
--k-btn-tertiary-fg: #8db1ff;
--k-btn-critical-soft-ink: #ff7a6e;
--k-btn-critical-soft-plate: rgb(255 122 110 / 0.3);
--k-btn-focus: #8db1ff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--k-btn-secondary-bg: #0a1633;
--k-btn-secondary-ink: #f4f7fc;
--k-btn-secondary-plate: rgb(244 247 252 / 0.9);
--k-btn-tertiary-fg: #8db1ff;
--k-btn-critical-soft-ink: #ff7a6e;
--k-btn-critical-soft-plate: rgb(255 122 110 / 0.3);
--k-btn-focus: #8db1ff;
}
}
.k-on-light {
--k-btn-secondary-bg: #ffffff;
--k-btn-secondary-ink: #0a1633;
--k-btn-secondary-plate: rgb(10 22 51 / 0.9);
--k-btn-tertiary-fg: #1f5eff;
--k-btn-critical-plate: #6e1510;
--k-btn-critical-soft-ink: #b4231b;
--k-btn-critical-soft-plate: rgb(180 35 27 / 0.3);
--k-btn-focus: #1f5eff;
}
.k-btn {
--_h: 48px;
--_px: 24px;
--_r: 14px;
--_d: 38px;
--_m: 5px;
--_fs: 1rem;
--_ico: 20px;
--_o1: 5px;
--_o2: 10px;
--_oh1: 7px;
--_oh2: 14px;
--_press: 5px;
--_room: 10px;
--_dir: 1;
--_bg: var(--k-btn-primary-bg);
--_fg: var(--k-btn-primary-fg);
--_bd: transparent;
--_p1: var(--k-btn-plate-blue);
--_p2: var(--k-btn-plate-green);
--_disk-bg: var(--k-btn-disk-bg);
--_disk-fg: var(--_bg);
--_disk-bw: 0px;
--_ring: var(--_fg);
--_track: rgb(255 255 255 / 0.24);
--_light: rgb(255 255 255 / 0.18);
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
box-sizing: border-box;
min-block-size: var(--_h);
max-inline-size: calc(100% - var(--_room));
margin: 0 var(--_room) var(--_room) 0;
padding-block: 6px;
padding-inline: var(--_px);
border: 0;
border-radius: var(--_r);
background: var(--_bg);
color: var(--_fg);
box-shadow:
inset 0 0 0 2px var(--_bd),
var(--_o1) var(--_o1) 0 0 var(--_p1),
var(--_o2) var(--_o2) 0 0 var(--_p2);
font-family: var(--k-btn-font);
font-weight: 800;
font-size: var(--_fs);
line-height: 1.15;
letter-spacing: 0.005em;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.k-btn[hidden] { display: none; }
[dir='rtl'] .k-btn, .k-btn[dir='rtl'] { --_dir: -1; }
.k-btn:hover { color: var(--_fg); text-decoration: none; }
.k-btn--m { --_h: 48px; --_px: 24px; --_r: 14px; --_d: 38px; --_m: 5px; --_fs: 1rem; --_ico: 20px; }
.k-btn--l { --_h: 56px; --_px: 28px; --_r: 16px; --_d: 44px; --_m: 6px; --_fs: 1.0625rem; --_ico: 22px; }
.k-btn--s {
--_h: 40px; --_px: 18px; --_r: 12px; --_d: 32px; --_m: 4px; --_fs: 0.875rem; --_ico: 18px;
--_o1: 4px; --_o2: 8px; --_oh1: 6px; --_oh2: 11px; --_press: 4px; --_room: 8px;
}
.k-btn--s::before {
content: '';
position: absolute;
inset: -4px 0;
border-radius: inherit;
}
.k-btn__label, .k-btn__icon {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 10px;
min-inline-size: 0;
}
.k-btn__label { overflow-wrap: anywhere; }
.k-btn svg { flex: none; inline-size: var(--_ico); block-size: var(--_ico); }
.k-btn--block { inline-size: calc(100% - var(--_room)); }
.k-btn--primary {
--_bg: var(--k-btn-primary-bg);
--_fg: var(--k-btn-primary-fg);
--_p1: var(--k-btn-plate-blue);
--_p2: var(--k-btn-plate-green);
}
.k-btn--safe {
--_bg: var(--k-btn-safe-bg);
--_fg: var(--k-btn-safe-fg);
--_p1: var(--k-btn-plate-green);
--_p2: var(--k-btn-plate-blue);
}
.k-btn--secondary {
--_bg: var(--k-btn-secondary-bg);
--_fg: var(--k-btn-secondary-ink);
--_bd: var(--k-btn-secondary-ink);
--_p1: var(--k-btn-secondary-plate);
--_p2: transparent;
--_oh2: var(--_oh1);
--_disk-bg: transparent;
--_disk-fg: var(--k-btn-secondary-ink);
--_disk-bw: 2px;
--_ring: var(--k-btn-secondary-ink);
--_track: rgb(127 127 127 / 0.28);
--_light: rgb(127 127 127 / 0.12);
}
.k-btn--tertiary {
--_bg: transparent;
--_fg: var(--k-btn-tertiary-fg);
--_p1: transparent;
--_p2: transparent;
--_px: 6px;
--_room: 0px;
box-shadow: none;
}
.k-btn--critical {
--_bg: var(--k-btn-critical-bg);
--_fg: var(--k-btn-critical-fg);
--_p1: var(--k-btn-critical-plate);
--_p2: transparent;
--_oh2: var(--_oh1);
}
.k-btn--critical-soft {
--_bg: var(--k-btn-secondary-bg);
--_fg: var(--k-btn-critical-soft-ink);
--_bd: var(--k-btn-critical-soft-ink);
--_p1: var(--k-btn-critical-soft-plate);
--_p2: transparent;
--_oh2: var(--_oh1);
--_disk-bg: transparent;
--_disk-fg: var(--k-btn-critical-soft-ink);
--_disk-bw: 2px;
--_ring: var(--k-btn-critical-soft-ink);
--_track: var(--k-btn-critical-soft-plate);
--_light: var(--k-btn-critical-soft-plate);
}
.k-btn--icon {
inline-size: var(--_h);
min-inline-size: var(--_h);
padding: 0;
--_o1: 4px; --_o2: 4px; --_oh1: 6px; --_oh2: 6px; --_press: 4px; --_room: 4px;
--_p2: transparent;
}
.k-btn--icon.k-btn--secondary, .k-btn--icon.k-btn--critical-soft { --_p1: transparent; --_room: 0px; }
.k-btn--icon.k-btn--tertiary { --_room: 0px; }
.k-btn--icon.k-btn--safe { --_p1: transparent; --_room: 0px; }
.k-btn--tertiary .k-btn__label { text-decoration: underline 2px transparent; text-underline-offset: 0.25em; }
.k-btn--tertiary:hover .k-btn__label, .k-btn--tertiary:focus-visible .k-btn__label { text-decoration-color: currentColor; }
.k-btn--disk, .k-btn--hold { padding-inline-start: calc(var(--_m) + var(--_d) + 12px); }
.k-btn__disk, .k-btn__ring {
position: absolute;
z-index: 2;
inset-block-start: 50%;
inset-inline-start: var(--_m);
display: grid;
place-items: center;
inline-size: var(--_d);
block-size: var(--_d);
margin-block-start: calc(var(--_d) / -2);
border-radius: 50%;
}
.k-btn__disk {
background: var(--_disk-bg);
color: var(--_disk-fg);
box-shadow: inset 0 0 0 var(--_disk-bw) currentColor;
}
.k-btn__disk > svg, .k-btn__ring > svg { grid-area: 1 / 1; }
.k-btn--s .k-btn__disk > svg, .k-btn--s .k-btn__ring > svg { inline-size: 16px; block-size: 16px; }
.k-btn__spin, .k-btn__check { display: none; grid-area: 1 / 1; }
.k-btn__spin {
inline-size: 50%;
block-size: 50%;
border: 2.5px solid currentColor;
border-inline-end-color: transparent;
border-radius: 50%;
}
.k-btn__check path { stroke-dasharray: 24; stroke-dashoffset: 0; }
.k-btn.is-busy .k-btn__spin { display: block; }
.k-btn.is-success .k-btn__check { display: block; }
.k-btn.is-busy :is(.k-btn__disk, .k-btn__state) > svg:not(.k-btn__check),
.k-btn.is-success :is(.k-btn__disk, .k-btn__state) > svg:not(.k-btn__check),
.k-btn.is-success .k-btn__spin { display: none; }
.k-btn__state {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
visibility: hidden;
pointer-events: none;
}
.k-btn__state .k-btn__spin { inline-size: 20px; block-size: 20px; }
.k-btn__state .k-btn__check { inline-size: 24px; block-size: 24px; }
.k-btn:is(.is-busy, .is-success) > .k-btn__state { visibility: visible; }
.k-btn:not(.k-btn--disk):is(.is-busy, .is-success) > :is(.k-btn__label, .k-btn__icon) { opacity: 0; }
.k-btn.is-busy { cursor: progress; }
.k-btn--hold { -webkit-touch-callout: none; }
.k-btn--hold .k-btn__label { flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; }
.k-btn__hint { display: block; font-family: var(--k-font-sans, system-ui, sans-serif); font-weight: 500; font-size: 0.75rem; line-height: 1.25; opacity: 0.88; }
.k-btn__ring { background: conic-gradient(var(--_ring) calc(var(--k-hold, 0) * 1turn), var(--_track) 0); }
.k-btn__ring::before {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
background: var(--_bg);
}
.k-btn--critical-soft .k-btn__ring::before, .k-btn--secondary .k-btn__ring::before { background: var(--k-btn-secondary-bg); }
.k-btn--s .k-btn__ring::before { inset: 3px; }
.k-btn__ring > svg { position: relative; color: var(--_fg); }
.k-btn--hold::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(to right, var(--_light) calc(var(--k-hold, 0) * 100%), transparent 0);
}
[dir='rtl'] .k-btn--hold::after, .k-btn--hold[dir='rtl']::after { background: linear-gradient(to left, var(--_light) calc(var(--k-hold, 0) * 100%), transparent 0); }
.k-btn:disabled, .k-btn[aria-disabled='true']:not(.is-busy) {
filter: grayscale(1) opacity(0.45);
cursor: not-allowed;
}
.k-btn:focus-visible {
outline: 3px solid var(--k-btn-focus);
outline-offset: 4px;
border-radius: var(--_r);
}
@media (prefers-reduced-motion: reduce) {
.k-btn:not(.k-btn--tertiary, :disabled, [aria-disabled='true']):hover { background-image: linear-gradient(rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.1)); }
}
@media (prefers-reduced-motion: no-preference) {
.k-btn {
transition:
transform 350ms var(--k-btn-ease),
box-shadow 350ms var(--k-btn-ease),
background-color 200ms ease,
color 200ms ease;
}
.k-btn__label { transition: translate 500ms var(--k-btn-ease), text-decoration-color 200ms ease; }
.k-btn__disk { transition: inset-inline-start 500ms var(--k-btn-ease), rotate 500ms var(--k-btn-ease); }
.k-btn--tertiary .k-btn__icon--end { transition: translate 350ms var(--k-btn-ease); }
@media (hover: hover) {
.k-btn:not(.k-btn--tertiary, :disabled, [aria-disabled='true']):hover { transform: translate(-2px, -2px); --_o1: var(--_oh1); --_o2: var(--_oh2); }
.k-btn--disk:not(:disabled, [aria-disabled='true'], .is-busy):hover .k-btn__disk { inset-inline-start: calc(100% - var(--_d) - var(--_m)); rotate: calc(var(--_dir) * 360deg); }
.k-btn--disk:not(:disabled, [aria-disabled='true'], .is-busy):hover .k-btn__label { translate: calc(var(--_dir) * -1 * (var(--_d) + 4px)) 0; }
.k-btn--tertiary:hover .k-btn__icon--end { translate: calc(var(--_dir) * 4px) 0; }
}
.k-btn:not(.k-btn--tertiary, :disabled, [aria-disabled='true']):focus-visible { transform: translate(-2px, -2px); --_o1: var(--_oh1); --_o2: var(--_oh2); }
.k-btn--disk:not(:disabled, [aria-disabled='true'], .is-busy):focus-visible .k-btn__disk { inset-inline-start: calc(100% - var(--_d) - var(--_m)); rotate: calc(var(--_dir) * 360deg); }
.k-btn--disk:not(:disabled, [aria-disabled='true'], .is-busy):focus-visible .k-btn__label { translate: calc(var(--_dir) * -1 * (var(--_d) + 4px)) 0; }
.k-btn--tertiary:focus-visible .k-btn__icon--end { translate: calc(var(--_dir) * 4px) 0; }
.k-btn:not(.k-btn--tertiary, :disabled, [aria-disabled='true']):active,
.k-btn.is-holding {
transform: translate(var(--_press), var(--_press));
--_o1: 0px;
--_o2: 0px;
transition-duration: 120ms;
}
@media (hover: none) {
.k-btn--disk:not(:disabled, [aria-disabled='true'], .is-busy):active .k-btn__disk { inset-inline-start: calc(var(--_m) + (100% - var(--_d) - 2 * var(--_m)) * 0.3); }
}
.k-btn--disk.is-success .k-btn__disk { inset-inline-start: calc(100% - var(--_d) - var(--_m)); rotate: calc(var(--_dir) * 360deg); }
.k-btn--disk.is-success .k-btn__label { translate: calc(var(--_dir) * -1 * (var(--_d) + 4px)) 0; }
.k-btn.is-success .k-btn__check path { animation: k-btn-draw 450ms 50ms var(--k-btn-ease) both; }
.k-btn.is-busy .k-btn__spin { animation: k-btn-spin 750ms linear infinite; }
.k-btn--hold.is-holding { transition: transform 200ms var(--k-btn-ease), box-shadow 200ms var(--k-btn-ease); }
.k-confirm[open] { animation: k-btn-pop 220ms var(--k-btn-ease); }
@keyframes k-btn-spin { to { transform: rotate(360deg); } }
@keyframes k-btn-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes k-btn-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
}
@media (forced-colors: active) {
.k-btn { border: 2px solid ButtonText; box-shadow: none; }
.k-btn--tertiary { border-color: transparent; }
.k-btn__ring { forced-color-adjust: none; --_ring: Highlight; --_track: GrayText; }
.k-btn__ring::before { background: ButtonFace !important; }
.k-btn__ring > svg { color: ButtonText; }
.k-btn__disk { border: 1px solid ButtonText; }
}
.k-confirm {
box-sizing: border-box;
inline-size: min(440px, calc(100vw - 32px));
max-inline-size: none;
padding: 24px;
border: 0;
border-radius: 20px;
background: var(--k-btn-secondary-bg);
color: var(--k-btn-secondary-ink);
box-shadow: 0 24px 64px rgb(0 0 0 / 0.32);
}
.k-confirm::backdrop { background: rgb(5 11 31 / 0.6); }
.k-confirm__title { margin: 0 0 8px; font-family: var(--k-btn-font); font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.k-confirm__text { margin: 0 0 22px; line-height: 1.5; }
.k-confirm__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; }
.k-btn-sr {
position: absolute !important;
inline-size: 1px;
block-size: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
:root,
:root[data-theme='light'] {
--s-bg: #fbfcfe;
--s-bg-2: #f2f5fa;
--s-bg-3: #e9eef6;
--s-surface: #ffffff;
--s-surface-2: #f6f8fc;
--s-line: rgb(10 22 51 / 0.08);
--s-line-2: rgb(10 22 51 / 0.15);
--s-text: #0b0f17;
--s-text-2: #3f4856;
--s-text-3: #566070;
--s-brand: #1f5eff;
--s-brand-ink: #1546c9;
--s-brand-soft: #eaf0ff;
--s-on-brand: #ffffff;
--s-safe: #11803e;
--s-safe-soft: #e3f5ea;
--s-warn: #b45309;
--s-warn-soft: #fff3e3;
--s-sos: #d61f2c;
--s-unknown: #5f6673;
--s-grad-a: #1f8a3a;
--s-grad-b: #0b8fa0;
--s-grad-c: #1546c9;
--s-glow-blue: rgb(61 123 255 / 0.22);
--s-glow-teal: rgb(18 181 201 / 0.18);
--s-glow-green: rgb(94 214 40 / 0.16);
--s-glass: rgb(255 255 255 / 0.7);
--s-glass-strong: rgb(255 255 255 / 0.9);
--s-glass-line: rgb(10 22 51 / 0.09);
--s-shadow-1: 0 1px 2px rgb(10 22 51 / 0.05), 0 6px 20px -6px rgb(10 22 51 / 0.08);
--s-shadow-2: 0 2px 6px rgb(10 22 51 / 0.05), 0 28px 64px -18px rgb(10 22 51 / 0.22);
--s-shadow-device: 0 40px 80px -30px rgb(10 22 51 / 0.45), 0 18px 36px -18px rgb(10 22 51 / 0.3);
--s-grid-line: rgb(10 22 51 / 0.045);
--s-ink-panel: linear-gradient(150deg, #0a1633 0%, #0f2459 45%, #1546c9 100%);
--s-ink-text: #ffffff;
--s-ink-text-2: rgb(255 255 255 / 0.82);
--a-bg: #f4f5f7;
--a-card: #ffffff;
--a-card-2: #f0f2f5;
--a-line: #e3e6eb;
--a-text: #0b0f17;
--a-text-2: #4f5867;
--a-sheet: #f6f8fc;
--a-field: #ffffff;
--a-field-line: #d3dbe7;
--a-seg: #eaeff7;
color-scheme: light;
}
:root[data-theme='dark'] {
--s-bg: #020409;
--s-bg-2: #050912;
--s-bg-3: #0a1020;
--s-surface: #080d19;
--s-surface-2: #0c1322;
--s-line: rgb(255 255 255 / 0.07);
--s-line-2: rgb(255 255 255 / 0.13);
--s-text: #f2f4f7;
--s-text-2: #bac2ce;
--s-text-3: #939cab;
--s-brand: #6f9bff;
--s-brand-ink: #8db1ff;
--s-brand-soft: #0e1a38;
--s-on-brand: #04091a;
--s-safe: #3dd68c;
--s-safe-soft: #0b2a1c;
--s-warn: #f5b83d;
--s-warn-soft: #2a1d07;
--s-sos: #ff4b55;
--s-unknown: #9aa2af;
--s-grad-a: #79e34a;
--s-grad-b: #4fd6e4;
--s-grad-c: #7ea6ff;
--s-glow-blue: rgb(61 123 255 / 0.3);
--s-glow-teal: rgb(18 181 201 / 0.22);
--s-glow-green: rgb(110 226 28 / 0.14);
--s-glass: rgb(8 13 25 / 0.62);
--s-glass-strong: rgb(8 13 25 / 0.9);
--s-glass-line: rgb(255 255 255 / 0.09);
--s-shadow-1: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 10px 30px -10px rgb(0 0 0 / 0.7);
--s-shadow-2: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 40px 90px -30px rgb(0 0 0 / 0.9);
--s-shadow-device: 0 50px 100px -30px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.04), 0 0 80px -20px rgb(61 123 255 / 0.35);
--s-grid-line: rgb(255 255 255 / 0.035);
--s-ink-panel: linear-gradient(150deg, #050b1f 0%, #0a1633 50%, #15327a 100%);
--a-bg: #070b16;
--a-card: #0f1522;
--a-card-2: #161d2c;
--a-line: #222b3d;
--a-text: #f2f4f7;
--a-text-2: #adb4c0;
--a-sheet: #0d1424;
--a-field: #141c2e;
--a-field-line: #2a3550;
--a-seg: #141c2e;
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--s-bg: #020409;
--s-bg-2: #050912;
--s-bg-3: #0a1020;
--s-surface: #080d19;
--s-surface-2: #0c1322;
--s-line: rgb(255 255 255 / 0.07);
--s-line-2: rgb(255 255 255 / 0.13);
--s-text: #f2f4f7;
--s-text-2: #bac2ce;
--s-text-3: #939cab;
--s-brand: #6f9bff;
--s-brand-ink: #8db1ff;
--s-brand-soft: #0e1a38;
--s-on-brand: #04091a;
--s-safe: #3dd68c;
--s-safe-soft: #0b2a1c;
--s-warn: #f5b83d;
--s-warn-soft: #2a1d07;
--s-sos: #ff4b55;
--s-unknown: #9aa2af;
--s-grad-a: #79e34a;
--s-grad-b: #4fd6e4;
--s-grad-c: #7ea6ff;
--s-glow-blue: rgb(61 123 255 / 0.3);
--s-glow-teal: rgb(18 181 201 / 0.22);
--s-glow-green: rgb(110 226 28 / 0.14);
--s-glass: rgb(8 13 25 / 0.62);
--s-glass-strong: rgb(8 13 25 / 0.9);
--s-glass-line: rgb(255 255 255 / 0.09);
--s-shadow-1: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 10px 30px -10px rgb(0 0 0 / 0.7);
--s-shadow-2: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 40px 90px -30px rgb(0 0 0 / 0.9);
--s-shadow-device: 0 50px 100px -30px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.04), 0 0 80px -20px rgb(61 123 255 / 0.35);
--s-grid-line: rgb(255 255 255 / 0.035);
--s-ink-panel: linear-gradient(150deg, #050b1f 0%, #0a1633 50%, #15327a 100%);
--a-bg: #070b16;
--a-card: #0f1522;
--a-card-2: #161d2c;
--a-line: #222b3d;
--a-text: #f2f4f7;
--a-text-2: #adb4c0;
--a-sheet: #0d1424;
--a-field: #141c2e;
--a-field-line: #2a3550;
--a-seg: #141c2e;
color-scheme: dark;
}
}
@media (prefers-contrast: more) {
:root {
--s-text-2: var(--s-text);
--s-text-3: var(--s-text);
--s-line: var(--s-line-2);
--s-glass: var(--s-glass-strong);
}
}
.only-dark { display: none; }
:root[data-theme='dark'] .only-dark { display: block; }
:root[data-theme='dark'] .only-light { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) .only-dark { display: block; }
:root:not([data-theme='light']) .only-light { display: none; }
}
.dev {
--w: 280px;
--frame-1: #2a3142;
--frame-2: #0c1019;
position: relative;
inline-size: var(--w);
flex: none;
}
.dev--xs { --w: 150px; }
.dev--s { --w: 220px; }
.dev--m { --w: 270px; }
.dev--l { --w: 310px; }
.dev--xl { --w: 340px; }
@media (max-width: 599px) {
.dev--l, .dev--xl { --w: min(72vw, 280px); }
.dev--m { --w: min(64vw, 250px); }
}
.dev__body {
position: relative;
padding: calc(var(--w) * 0.032);
border-radius: calc(var(--w) * 0.16);
background: linear-gradient(145deg, var(--frame-1), var(--frame-2) 60%);
box-shadow: var(--s-shadow-device), inset 0 0 0 1px rgb(255 255 255 / 0.12), inset 0 0 0 calc(var(--w) * 0.012) rgb(0 0 0 / 0.55);
}
.dev__screen {
position: relative;
overflow: hidden;
aspect-ratio: 393 / 852;
border-radius: calc(var(--w) * 0.13);
background: var(--a-bg);
font-size: calc(var(--w) * 0.042);
isolation: isolate;
}
.dev__island {
position: absolute;
z-index: 3;
inset-block-start: calc(var(--w) * 0.058);
inset-inline-start: 50%;
translate: -50% 0;
inline-size: calc(var(--w) * 0.3);
block-size: calc(var(--w) * 0.085);
border-radius: 99px;
background: #000;
}
[dir='rtl'] .dev__island, [dir='rtl'] .dev__cam { translate: 50% 0; }
.dev__body::before, .dev__body::after {
content: '';
position: absolute;
inline-size: calc(var(--w) * 0.012);
border-radius: 2px;
background: var(--frame-1);
}
.dev__body::before { inset-inline-start: calc(var(--w) * -0.01); inset-block-start: 22%; block-size: 9%; }
.dev__body::after { inset-inline-end: calc(var(--w) * -0.01); inset-block-start: 28%; block-size: 14%; }
.dev--android .dev__body { border-radius: calc(var(--w) * 0.11); padding: calc(var(--w) * 0.026); --frame-1: #343b4c; }
.dev--android .dev__screen { aspect-ratio: 412 / 915; border-radius: calc(var(--w) * 0.09); }
.dev__cam {
position: absolute;
z-index: 3;
inset-block-start: calc(var(--w) * 0.05);
inset-inline-start: 50%;
translate: -50% 0;
inline-size: calc(var(--w) * 0.05);
block-size: calc(var(--w) * 0.05);
border-radius: 50%;
background: #000;
box-shadow: 0 0 0 2px rgb(255 255 255 / 0.06);
}
.dev--browser { --w: min(760px, 86vw); }
.dev--browser .dev__body { padding: 0; border-radius: 16px; background: var(--s-surface); box-shadow: var(--s-shadow-device), 0 0 0 1px var(--s-line-2); overflow: hidden; }
.dev--browser .dev__body::before, .dev--browser .dev__body::after { display: none; }
.dev__bar { display: flex; align-items: center; gap: 8px; block-size: calc(var(--w) * 0.055); padding-inline: calc(var(--w) * 0.02); background: var(--s-bg-3); border-block-end: 1px solid var(--s-line); }
.dev__dot { inline-size: calc(var(--w) * 0.014); block-size: calc(var(--w) * 0.014); border-radius: 50%; background: var(--s-line-2); }
.dev__url { margin-inline: auto; padding: 2px 14px; border-radius: 99px; background: var(--s-surface); color: var(--s-text-3); font-size: calc(var(--w) * 0.018); }
.dev--browser .dev__screen { aspect-ratio: 16 / 9.4; border-radius: 0; font-size: calc(var(--w) * 0.018); }
.dev--watch { --w: 150px; }
.dev--watch .dev__body { padding: calc(var(--w) * 0.06); border-radius: 34%; aspect-ratio: 0.84; --frame-1: #3a4152; }
.dev--watch .dev__body::before { display: none; }
.dev--watch .dev__body::after { inset-inline-end: calc(var(--w) * -0.045); inset-block-start: 26%; block-size: 20%; inline-size: calc(var(--w) * 0.06); border-radius: 6px; }
.dev--watch .dev__screen { aspect-ratio: auto; block-size: 100%; border-radius: 28%; background: #000; font-size: calc(var(--w) * 0.1); }
.dev--round .dev__body { border-radius: 50%; aspect-ratio: 1; }
.dev--round .dev__screen { border-radius: 50%; }
.dev__strap { position: absolute; inset-inline: 18%; block-size: 26%; border-radius: 14px; background: linear-gradient(180deg, #1c2333, #121826); z-index: -1; }
.dev__strap--top { inset-block-start: -20%; }
.dev__strap--bottom { inset-block-end: -20%; }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.75em; padding: 3.4em 1em 0.9em; color: var(--a-text); background: var(--a-bg); line-height: 1.3; text-align: start; }
.scr img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.scr--img { padding: 0; }
.scr__title { display: flex; align-items: center; gap: 0.45em; font-size: 1.3em; font-weight: 700; letter-spacing: -0.02em; }
.scr__sub { font-size: 0.85em; font-weight: 500; color: var(--a-text-2); }
.scr__card { padding: 0.85em; border-radius: 1.3em; background: var(--a-card); border: 1px solid var(--a-line); }
.scr__card--navy { color: #fff; background: linear-gradient(150deg, #0a1633, #15327a); border-color: rgb(255 255 255 / 0.08); }
.scr__card--teal { color: #fff; background: linear-gradient(120deg, #0b5f6a, #12304f 70%); border-color: rgb(255 255 255 / 0.08); }
.scr__bar { display: block; block-size: 0.55em; border-radius: 99px; background: var(--a-line); }
.scr__card--navy .scr__bar, .scr__card--teal .scr__bar { background: rgb(255 255 255 / 0.22); }
.w-30 { inline-size: 30%; } .w-40 { inline-size: 40%; } .w-50 { inline-size: 50%; } .w-60 { inline-size: 60%; } .w-70 { inline-size: 70%; } .w-80 { inline-size: 80%; }
.scr__rows { display: grid; gap: 0.6em; }
.scr__row { display: flex; align-items: center; gap: 0.6em; }
.scr__row > .scr__bar { flex: 0 1 auto; }
.scr__check { display: grid; place-items: center; flex: none; inline-size: 1.35em; block-size: 1.35em; border-radius: 0.45em; border: 2px solid var(--a-line); color: transparent; }
.scr__check.is-done { color: #fff; border-color: transparent; background: #11803e; }
.scr__tag { flex: none; padding: 0.15em 0.55em; border-radius: 99px; font-size: 0.7em; font-weight: 700; color: #1546c9; background: #dce7ff; }
.scr__pill { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.3em; flex: none; padding: 0.2em 0.6em; border-radius: 99px; font-size: 0.7em; font-weight: 700; }
.scr__pill--safe { color: #fff; background: #11803e; }
.scr__pill--unknown { color: var(--a-text-2); border: 1.5px dashed var(--a-text-2); }
.scr__pill--exp { color: var(--a-text-2); background: var(--a-card-2); }
.scr__btn { display: flex; align-items: center; justify-content: center; gap: 0.5em; min-block-size: 3em; border-radius: 1.2em; font-weight: 700; font-size: 1em; }
.scr__btn--safe { color: #fff; background: linear-gradient(135deg, #0e7a3a, #1aa356); box-shadow: 0 0.6em 1.4em -0.6em rgb(17 128 62 / 0.8); }
.scr__btn--blue { color: #fff; background: linear-gradient(135deg, #15327a, #1f5eff); }
.scr__btn--sos { color: #fff; background: linear-gradient(135deg, #c81e1e, #ff4b55); }
.scr__nav { margin-block-start: auto; display: flex; align-items: center; justify-content: space-between; padding: 0.4em; border-radius: 1.6em; background: var(--a-card); border: 1px solid var(--a-line); box-shadow: 0 0.5em 1.2em -0.6em rgb(0 0 0 / 0.3); color: var(--a-text-2); }
.scr__nav span { display: grid; place-items: center; inline-size: 2.4em; block-size: 2.4em; }
.scr__nav .is-on { inline-size: auto; padding-inline: 0.9em; gap: 0.4em; display: inline-flex; align-items: center; border-radius: 1.3em; color: #fff; background: linear-gradient(135deg, #15327a, #1f5eff); font-size: 0.8em; font-weight: 700; block-size: 3em; }
.scr__ring { inline-size: 2.6em; block-size: 2.6em; margin-inline-start: auto; border-radius: 50%; background: conic-gradient(#1aa356 0 62%, var(--a-line) 62% 100%); -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%); mask: radial-gradient(circle, transparent 52%, #000 54%); }
.scr__minimap { position: relative; block-size: 5.5em; margin-block-start: 0.6em; border-radius: 0.9em; overflow: hidden; background: linear-gradient(160deg, #dfe9e4, #cfe0f4); }
:root[data-theme='dark'] .scr__minimap { background: linear-gradient(160deg, #13261f, #12203a); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .scr__minimap { background: linear-gradient(160deg, #13261f, #12203a); } }
.scr__minimap::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 46%, rgb(255 255 255 / 0.65) 46% 50%, transparent 50%), linear-gradient(20deg, transparent 60%, rgb(255 255 255 / 0.5) 60% 63%, transparent 63%); }
.scr__pin { position: absolute; inset-block-start: 34%; inset-inline-start: 56%; inline-size: 1.3em; block-size: 1.3em; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #1f5eff; box-shadow: 0 0 0 0.35em rgb(31 94 255 / 0.25); }
.scr__map { position: relative; flex: none; block-size: 38%; border-radius: 1.3em; overflow: hidden; background: radial-gradient(circle at 60% 45%, #15327a, #0a1633 70%); }
.scr__map::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px); background-size: 1.6em 1.6em; }
.scr__epi { position: absolute; inset-block-start: 45%; inset-inline-start: 60%; inline-size: 0.9em; block-size: 0.9em; translate: -50% -50%; border-radius: 50%; background: #ff8a4c; box-shadow: 0 0 0 0.3em rgb(255 138 76 / 0.35); }
.scr__ripple { position: absolute; inset-block-start: 45%; inset-inline-start: 60%; inline-size: 6em; block-size: 6em; translate: -50% -50%; border-radius: 50%; border: 1.5px solid rgb(255 138 76 / 0.55); }
.scr__ripple:nth-child(3) { inline-size: 10em; block-size: 10em; border-color: rgb(255 138 76 / 0.3); }
.scr__ripple:nth-child(4) { inline-size: 14em; block-size: 14em; border-color: rgb(255 138 76 / 0.15); }
.scr__offmap { position: relative; flex: none; block-size: 42%; border-radius: 1.3em; overflow: hidden; background: #e8eef3; }
:root[data-theme='dark'] .scr__offmap { background: #101a2b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .scr__offmap { background: #101a2b; } }
.scr__road { position: absolute; block-size: 0.5em; border-radius: 99px; background: rgb(255 255 255 / 0.9); }
:root[data-theme='dark'] .scr__road { background: rgb(255 255 255 / 0.14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .scr__road { background: rgb(255 255 255 / 0.14); } }
.scr__road.r1 { inset-inline: -10% -10%; inset-block-start: 40%; rotate: -12deg; }
.scr__road.r2 { inline-size: 0.5em; block-size: 140%; inset-block-start: -20%; inset-inline-start: 38%; rotate: 18deg; }
.scr__road.r3 { inset-inline: 20% -20%; inset-block-start: 74%; rotate: 8deg; }
.scr__park { position: absolute; inline-size: 5em; block-size: 3.4em; border-radius: 40%; background: rgb(17 128 62 / 0.22); inset-block-start: 8%; inset-inline-start: 6%; }
.scr__place { position: absolute; display: grid; place-items: center; inline-size: 1.6em; block-size: 1.6em; border-radius: 0.5em; font-weight: 700; font-size: 0.9em; color: #fff; background: #c81e1e; box-shadow: 0 0.2em 0.6em rgb(0 0 0 / 0.25); }
.scr__place.p1 { inset-block-start: 22%; inset-inline-start: 58%; }
.scr__place.p2 { inset-block-start: 56%; inset-inline-start: 20%; background: #11803e; }
.scr__place.p3 { inset-block-start: 62%; inset-inline-start: 72%; background: #1546c9; }
.scr__me { position: absolute; inset-block-start: 46%; inset-inline-start: 46%; inline-size: 1em; block-size: 1em; border-radius: 50%; background: #1f5eff; box-shadow: 0 0 0 0.35em rgb(31 94 255 / 0.3), 0 0 0 0.2em #fff inset; }
.scr__chip { position: absolute; inset-block-start: 0.7em; inset-inline-start: 0.7em; display: inline-flex; align-items: center; gap: 0.35em; padding: 0.3em 0.7em; border-radius: 99px; font-size: 0.75em; font-weight: 700; color: #fff; background: rgb(10 22 51 / 0.82); }
.scr__avatar { flex: none; inline-size: 2.1em; block-size: 2.1em; border-radius: 50%; }
.scr__avatar.a1 { background: linear-gradient(135deg, #3d7bff, #12b5c9); }
.scr__avatar.a2 { background: linear-gradient(135deg, #6ee21c, #12b5c9); }
.scr__avatar.a3 { background: linear-gradient(135deg, #8db1ff, #5f6673); }
.scr__avatars { display: flex; margin-inline-start: auto; }
.scr__avatars .scr__avatar { inline-size: 1.6em; block-size: 1.6em; border: 2px solid var(--a-bg); margin-inline-start: -0.5em; }
.scr__circles { position: relative; flex: none; inline-size: 2.6em; block-size: 2.6em; border-radius: 50%; border: 2px solid #8db1ff; }
.scr__circles::before, .scr__circles::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; border: 2px solid #3d7bff; }
.scr__circles::after { inset: 42%; background: #1f5eff; border: 0; }
.scr__steps { display: flex; align-items: center; gap: 0.25em; }
.scr__steps span { inline-size: 1em; block-size: 1em; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.55); }
.scr__steps .is-done { background: #fff; border-color: #fff; }
.scr__play { display: grid; place-items: center; margin-inline-start: auto; inline-size: 2.6em; block-size: 2.6em; border-radius: 50%; color: #0a1633; background: #fff; }
.scr__sosbar { display: flex; align-items: center; gap: 0.7em; padding: 0.8em; border-radius: 1.3em; color: #fff; background: linear-gradient(135deg, #d61f2c, #ff4b55); box-shadow: 0 0.8em 1.6em -0.8em rgb(214 31 44 / 0.7); }
.scr__sosdot { display: grid; place-items: center; flex: none; inline-size: 2.4em; block-size: 2.4em; border-radius: 50%; background: rgb(255 255 255 / 0.22); font-weight: 800; font-size: 0.8em; }
.scr__big { font-size: 3.6em; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.scr__scripts { display: flex; flex-wrap: wrap; gap: 0.4em; }
.scr__scripts span { display: grid; place-items: center; inline-size: 2.4em; block-size: 2.4em; border-radius: 0.8em; background: var(--a-card); border: 1px solid var(--a-line); font-size: 1.1em; font-weight: 700; }
.scr__toggle { position: relative; margin-inline-start: auto; inline-size: 2.8em; block-size: 1.6em; border-radius: 99px; background: #1f5eff; }
.scr__toggle::after { content: ''; position: absolute; inset-block: 0.2em; inset-inline-end: 0.2em; inline-size: 1.2em; border-radius: 50%; background: #fff; }
.scr__hero { margin: -3.4em -1em 0; padding: 3.6em 1em 1.1em; border-end-start-radius: 1.6em; border-end-end-radius: 1.6em; color: #fff; background: linear-gradient(160deg, #0a1633, #15327a 55%, #1546c9); }
.scr__hero .scr__sub { color: rgb(255 255 255 / 0.8); }
.scr__note { font-size: 0.7em; color: var(--a-text-2); }
.wscr { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0.35em; padding: 0.8em; color: #fff; background: radial-gradient(circle at 50% 30%, #102043, #000 75%); text-align: center; }
.wscr__logo { inline-size: 1.6em; block-size: 1.6em; border-radius: 50%; background: #eef2f8; display: grid; place-items: center; }
.wscr__logo img { inline-size: 80%; block-size: 80%; }
.wscr__btn { display: grid; place-items: center; inline-size: 4.6em; block-size: 4.6em; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #2ccf74, #0e7a3a); box-shadow: 0 0 1.4em rgb(26 163 86 / 0.55); font-weight: 700; font-size: 0.62em; line-height: 1.15; padding: 0.3em; }
.wscr__label { font-size: 0.5em; color: rgb(255 255 255 / 0.75); }
.bscr { position: absolute; inset: 0; display: grid; grid-template-columns: 18% 1fr 28%; gap: 1.2em; padding: 1.4em; color: var(--a-text); background: var(--a-bg); text-align: start; }
.bscr__side { display: grid; align-content: start; gap: 0.9em; padding: 1em; border-radius: 1.2em; background: var(--a-card); border: 1px solid var(--a-line); }
.bscr__side .scr__bar { block-size: 0.8em; }
.bscr__side .is-on { background: #1f5eff; }
.bscr__main { display: grid; grid-template-rows: auto 1fr; gap: 1em; }
.bscr__main .scr__map { block-size: 100%; }
.bscr__col { display: grid; align-content: start; gap: 0.8em; }
.bscr__soon { position: absolute; inset-block-start: 1.2em; inset-inline-end: 1.2em; padding: 0.35em 1em; border-radius: 99px; color: #fff; background: rgb(10 22 51 / 0.85); font-weight: 700; font-size: 1.1em; }
.manifesto { padding-block: clamp(80px, 14vw, 200px); }
.manifesto__text { font-size: clamp(1.75rem, 1rem + 3vw, 3.4rem); line-height: 1.18; letter-spacing: -0.03em; font-weight: 500; color: var(--s-text); }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); list-style: none; }
.bento__item { position: relative; grid-column: span 2; border-radius: var(--k-shape-card-large); border: 1px solid var(--s-line); background: var(--s-surface); box-shadow: var(--s-shadow-1); overflow: hidden; }
.bento__item:nth-child(1), .bento__item:nth-child(2) { grid-column: span 3; }
.bento__item:nth-child(7) { grid-column: span 6; }
.bento__item::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), var(--s-glow-blue), transparent 45%); opacity: 0.8; }
.bento__link { position: relative; display: block; block-size: 100%; padding: clamp(24px, 3vw, 36px); color: inherit; text-decoration: none; border-radius: inherit; }
.bento__link p { margin-block-start: 10px; color: var(--s-text-2); max-inline-size: 52ch; }
.bento__more { position: absolute; inset-block-start: 24px; inset-inline-end: 24px; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; border: 1px solid var(--s-line-2); color: var(--s-text-2); }
[dir='rtl'] .bento__more { transform: scaleX(-1); }
.bento__item:hover { border-color: color-mix(in srgb, var(--s-brand) 40%, var(--s-line)); }
.bento__item:hover .bento__more { color: #fff; background: var(--s-brand); border-color: transparent; }
@media (max-width: 899px) {
.bento { grid-template-columns: 1fr 1fr; }
.bento__item, .bento__item:nth-child(1), .bento__item:nth-child(2) { grid-column: span 1; }
.bento__item:nth-child(7) { grid-column: span 2; }
}
@media (max-width: 599px) { .bento { grid-template-columns: 1fr; } .bento__item, .bento__item:nth-child(n) { grid-column: auto; } }
.section-more { margin-block-start: clamp(28px, 4vw, 44px); }
.showcase__stage { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 760px) 1fr; align-items: center; justify-items: center; gap: 24px; padding-block-end: 90px; }
.showcase__slot { position: relative; display: grid; justify-items: center; gap: 12px; }
.showcase__slot--web { grid-column: 2; grid-row: 1; inline-size: 100%; }
.showcase__slot--web .dev--browser { --w: min(760px, 86vw); }
.showcase__slot--iphone { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; margin-inline-start: -7%; margin-block-end: -90px; z-index: 2; }
.showcase__slot--iphone .dev { --w: 200px; }
.showcase__slot--android { grid-column: 2; grid-row: 1; justify-self: end; align-self: end; margin-inline-end: -6%; margin-block-end: -70px; z-index: 2; }
.showcase__slot--android .dev { --w: 176px; }
.showcase__slot--applewatch { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; }
.showcase__slot--applewatch .dev, .showcase__slot--wearos .dev { --w: 132px; }
.showcase__slot--wearos { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; }
.showcase__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-block-start: clamp(72px, 9vw, 120px); list-style: none; }
.showcase__item { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 20px; border: 1px solid var(--s-line); background: var(--s-surface); }
.showcase__item strong { display: block; font-weight: 500; }
.showcase__item small { display: block; color: var(--s-text-3); font-size: 0.8125rem; }
.showcase__item .badge { justify-self: start; }
.showcase__ico { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 12px; color: var(--s-brand-ink); background: var(--s-brand-soft); }
@media (max-width: 1099px) {
.showcase__stage { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 28px 12px; padding-block-end: 0; }
.showcase__slot--web { grid-column: 1 / -1; grid-row: 1; }
.showcase__slot--iphone, .showcase__slot--android { grid-row: 2; margin: 0; justify-self: center; }
.showcase__slot--iphone { grid-column: 1; }
.showcase__slot--android { grid-column: 2; }
.showcase__slot--applewatch, .showcase__slot--wearos { grid-row: 3; }
.showcase__slot--applewatch { grid-column: 1; }
.showcase__slot--wearos { grid-column: 2; }
.showcase__list { grid-template-columns: 1fr 1fr; margin-block-start: 40px; }
}
@media (max-width: 599px) {
.showcase__slot--iphone .dev, .showcase__slot--android .dev { --w: 40vw; }
.dev--watch { --w: 32vw; }
.showcase__list { grid-template-columns: 1fr; }
}
.hazard-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; list-style: none; }
.hazard-card a { position: relative; display: grid; gap: 10px; align-content: start; block-size: 100%; padding: 22px; border-radius: 24px; border: 1px solid var(--s-line); background: var(--s-surface); color: inherit; text-decoration: none; box-shadow: var(--s-shadow-1); overflow: hidden; }
.hazard-card a:hover { border-color: color-mix(in srgb, var(--s-brand) 45%, var(--s-line)); }
.hazard-card strong { font-size: 1.25rem; letter-spacing: -0.02em; }
.hazard-card small { color: var(--s-text-2); font-size: 0.9375rem; line-height: 1.45; }
.hazard-card__ico { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 16px; color: #fff; background: linear-gradient(140deg, var(--hz-1, #15327a), var(--hz-2, #1f5eff)); box-shadow: 0 12px 26px -14px var(--hz-2, #1f5eff); }
.hazard-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 6px; color: var(--s-brand-ink); font-weight: 500; font-size: 0.9375rem; }
[data-hazard='earthquake'] { --hz-1: #7a3b15; --hz-2: #e0701f; }
[data-hazard='flood'] { --hz-1: #0a3a7a; --hz-2: #1f8fff; }
[data-hazard='wildfire'] { --hz-1: #8a1c12; --hz-2: #f0502a; }
[data-hazard='storm'] { --hz-1: #2a2f6b; --hz-2: #6a5cff; }
[data-hazard='tsunami'] { --hz-1: #0b4f5a; --hz-2: #12b5c9; }
[data-hazard='landslide'] { --hz-1: #4a3a1a; --hz-2: #a8742a; }
[data-hazard='extreme_heat'] { --hz-1: #8a2a0c; --hz-2: #ff8a2a; }
@media (max-width: 599px) {
.hazard-rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: 12px; margin-inline: calc(var(--k-gutter) * -1); padding-inline: var(--k-gutter); scroll-padding-inline: var(--k-gutter); }
.hazard-card { scroll-snap-align: start; }
}
.privacy__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.privacy__head { position: sticky; inset-block-start: calc(var(--k-header-h) + 40px); }
.stack-cards { display: grid; gap: 22px; list-style: none; }
.stack-card { position: sticky; inset-block-start: calc(var(--k-header-h) + 40px); padding: clamp(26px, 3.4vw, 40px); border-radius: 28px; border: 1px solid var(--s-line); background: var(--s-surface); box-shadow: var(--s-shadow-2); transform-origin: 50% 0; }
.stack-card:nth-child(2) { inset-block-start: calc(var(--k-header-h) + 56px); }
.stack-card:nth-child(3) { inset-block-start: calc(var(--k-header-h) + 72px); }
.stack-card:nth-child(4) { inset-block-start: calc(var(--k-header-h) + 88px); }
.stack-card p { margin-block-start: 10px; color: var(--s-text-2); font-size: 1.0625rem; }
@media (max-width: 899px) {
.privacy__grid { grid-template-columns: 1fr; }
.privacy__head { position: static; }
}
.reviews { position: relative; }
.reviews__empty { position: relative; z-index: 2; max-inline-size: 620px; margin: 0 auto 28px; padding: 32px; border-radius: 28px; border: 1px solid var(--s-line-2); background: var(--s-glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--s-shadow-2); text-align: center; }
.reviews__icon { display: inline-grid; place-items: center; inline-size: 56px; block-size: 56px; margin-block-end: 14px; border-radius: 18px; color: var(--s-brand-ink); background: var(--s-brand-soft); }
.reviews__empty h3 { font-size: 1.375rem; margin-block-end: 8px; }
.reviews__empty > p { color: var(--s-text-2); }
.reviews__rules { display: grid; gap: 8px; margin-block-start: 18px; list-style: none; text-align: start; font-size: 0.9375rem; color: var(--s-text-2); }
.reviews__rules li { display: flex; gap: 10px; }
.reviews__rules .k-icon { color: var(--s-safe); flex: none; margin-block-start: 3px; }
.reviews__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.reviews__col { padding: 22px; border-radius: 26px; border: 1px dashed var(--s-line-2); background: var(--s-surface-2); }
.reviews__store { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.reviews__store .badge { margin-inline-start: auto; }
.reviews__ghosts { display: grid; gap: 12px; margin-block-start: 16px; }
.reviews__ghost { display: block; block-size: 110px; border-radius: 18px; border: 1px dashed var(--s-line-2); background: repeating-linear-gradient(135deg, transparent 0 10px, var(--s-line) 10px 11px); }
.reviews__list { display: grid; gap: 12px; margin-block-start: 16px; list-style: none; }
.reviews__item { padding: 16px; border-radius: 18px; background: var(--s-surface); border: 1px solid var(--s-line); }
.reviews__rating { display: inline-flex; gap: 4px; }
.reviews__dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--s-line-2); }
.reviews__dot.is-on { background: var(--s-brand); }
@media (max-width: 699px) { .reviews__cols { grid-template-columns: 1fr; } }
.ink-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: 32px; padding: clamp(32px, 6vw, 80px); border-radius: clamp(28px, 4vw, 44px); color: var(--s-ink-text); background: var(--s-ink-panel); box-shadow: var(--s-shadow-2); }
.ink-panel .ambient__glow--1 { --glow: rgb(61 123 255 / 0.5); }
.ink-panel .ambient__glow--2 { --glow: rgb(18 181 201 / 0.4); }
.ink-panel .ambient__glow--3 { --glow: rgb(110 226 28 / 0.24); }
.ink-panel .lead { color: var(--s-ink-text-2); margin-block-start: 18px; }
.eyebrow--ink { color: #fff; background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.22); }
.stores { display: grid; gap: 12px; margin-block-start: 28px; list-style: none; max-inline-size: 520px; }
.store { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.16); }
.store__icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 12px; background: #fff; color: #0a1633; flex: none; }
.store__text { display: grid; line-height: 1.25; }
.store__text small { font-size: 0.75rem; color: var(--s-ink-text-2); }
.store__text strong { font-size: 1.125rem; }
.store__text a { color: #fff; }
.store .badge { margin-inline-start: auto; }
.ink-panel__note { margin-block-start: 18px; font-size: 0.875rem; color: var(--s-ink-text-2); }
.ink-panel__art { display: grid; justify-items: center; }
.ink-panel__art .dev { transform: rotate(-6deg); }
@media (max-width: 899px) { .ink-panel { grid-template-columns: 1fr; } .ink-panel__art { display: none; } }
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--s-line); border-radius: 20px; background: var(--s-surface); }
.faq details[open] { border-color: var(--s-line-2); box-shadow: var(--s-shadow-1); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 64px; padding: 14px 22px; font-weight: 500; font-size: 1.0625rem; cursor: pointer; list-style: none; border-radius: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .k-icon { flex: none; color: var(--s-text-3); }
.faq details[open] summary .k-icon { transform: rotate(180deg); }
.faq__answer { padding: 0 22px 20px; color: var(--s-text-2); }
.closing { text-align: center; overflow: hidden; }
.closing__title { max-inline-size: 14ch; margin-inline: auto; }
.closing .lead { margin: 24px auto 0; max-inline-size: 52ch; }
.closing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: 32px; }
.root { position: relative; isolation: isolate; overflow: hidden; min-block-size: 100vh; display: grid; align-items: center; padding-block: 64px; }
.root__inner { position: relative; }
.root__lockup { margin-block-end: 32px; }
.root__title { max-inline-size: 15ch; }
.root .lead { margin-block-start: 22px; max-inline-size: 52ch; }
.root-choose { margin-block: 44px 16px; font-size: 1rem; color: var(--s-text-2); font-weight: 500; }
.chooser { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; list-style: none; }
.chooser a { display: grid; gap: 2px; min-block-size: 64px; padding: 14px 18px; border-radius: 18px; border: 1px solid var(--s-line); background: var(--s-glass); color: var(--s-text); text-decoration: none; }
.chooser a:hover, .chooser a[data-suggested] { border-color: var(--s-brand); background: var(--s-surface); }
.chooser span { font-size: 0.75rem; color: var(--s-text-3); }
.nf-code { font-size: clamp(5rem, 20vw, 10rem); font-weight: 700; line-height: 1; letter-spacing: -0.06em; }
.site-header + main > .hero:first-child { margin-block-start: -88px; padding-block-start: calc(88px + clamp(32px, 6vw, 80px)); }
.jump ul, .chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.jump { margin-block-start: 28px; }
.jump a, .chip-link {
display: inline-flex;
align-items: center;
gap: 8px;
min-block-size: 40px;
padding: 6px 14px;
border-radius: var(--k-radius-full);
border: 1px solid var(--s-line-2);
background: var(--s-glass);
color: var(--s-text);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
}
.jump a:hover, .chip-link:hover { border-color: var(--s-brand); color: var(--s-brand-ink); }
.jump .k-icon, .chip-link .k-icon { color: var(--s-brand-ink); }
.chips--col { flex-direction: column; align-items: stretch; }
.feat { padding-block: clamp(56px, 8vw, 120px); border-block-start: 1px solid var(--s-line); scroll-margin-block-start: var(--k-header-h); }
.feat:nth-child(even) { background: var(--s-bg-2); }
.feat__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.feat:nth-child(even) .feat__art { order: -1; }
.feat__text .lead { margin-block-start: 18px; }
.feat__art { display: grid; justify-items: center; perspective: 1200px; }
.feat__art .dev { transform: rotateY(-8deg) rotateX(2deg); }
.feat:nth-child(even) .feat__art .dev { transform: rotateY(8deg) rotateX(2deg); }
.feat__guides { margin-block-start: 28px; }
.feat__guides-title { margin-block-end: 12px; font-size: 0.875rem; font-weight: 500; color: var(--s-text-3); }
@media (max-width: 899px) {
.feat__grid { grid-template-columns: 1fr; }
.feat:nth-child(even) .feat__art { order: 0; }
}
.org-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 22px; color: var(--s-text-2); font-size: 0.9375rem; }
.org-line .k-icon { color: var(--s-safe); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; list-style: none; }
.guide-tile__link { position: relative; display: grid; gap: 12px; align-content: start; block-size: 100%; padding: 28px; border-radius: 28px; border: 1px solid var(--s-line); background: var(--s-surface); color: inherit; text-decoration: none; box-shadow: var(--s-shadow-1); overflow: hidden; }
.guide-tile__link::after { content: ''; position: absolute; inset-block-start: -40%; inset-inline-end: -30%; inline-size: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--hz-2, #1f5eff) 22%, transparent), transparent 70%); pointer-events: none; }
.guide-tile__link:hover { border-color: color-mix(in srgb, var(--hz-2, var(--s-brand)) 55%, var(--s-line)); }
.guide-tile__link .h3 { margin-block-start: 6px; }
.guide-tile__phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-block-start: 6px; list-style: none; }
.guide-tile__phases li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--s-bg-2); font-size: 0.8125rem; color: var(--s-text-3); }
.guide-tile__phases b { font-size: 1.25rem; color: var(--s-text); font-variant-numeric: tabular-nums; }
.guide__fine { display: grid; gap: 8px; margin-block-start: 28px; font-size: 0.875rem; color: var(--s-text-3); }
.guide__fine--center { max-inline-size: 760px; margin-inline: auto; text-align: center; }
.phase-jump ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-block-start: 30px; max-inline-size: 760px; list-style: none; }
.phase-jump a { display: grid; gap: 2px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--s-line-2); background: var(--s-glass); color: var(--s-text); text-decoration: none; }
.phase-jump a:hover { border-color: var(--s-brand); }
.phase-jump span { font-weight: 500; }
.phase-jump small { color: var(--s-text-3); font-size: 0.8125rem; }
@media (max-width: 599px) { .phase-jump ul { grid-template-columns: 1fr 1fr; } }
.guide__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 5vw, 64px); align-items: start; }
.guide__main > * + * { margin-block-start: clamp(36px, 5vw, 56px); }
.phase { scroll-margin-block-start: calc(var(--k-header-h) + 24px); }
.phase__title { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-block-end: 20px; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -0.03em; }
.phase__tag { padding: 4px 12px; border-radius: var(--k-radius-full); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: #fff; background: linear-gradient(135deg, var(--hz-1, #15327a), var(--hz-2, #1f5eff)); }
.phase__empty { padding: 18px 20px; border-radius: 18px; border: 1px dashed var(--s-line-2); color: var(--s-text-2); }
.steps { display: grid; gap: 12px; list-style: none; counter-reset: none; }
.step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--s-line); background: var(--s-surface); }
.step__n { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--hz-2, var(--s-brand-ink)); background: color-mix(in srgb, var(--hz-2, #1f5eff) 12%, transparent); }
.step p { font-size: 1.0625rem; }
.step__src { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 8px; }
.step__src a { padding: 2px 10px; border-radius: var(--k-radius-full); background: var(--s-bg-2); color: var(--s-text-2); font-size: 0.75rem; font-weight: 500; text-decoration: none; }
.step__src a:hover { color: var(--s-brand-ink); text-decoration: underline; }
.source-list { display: grid; gap: 10px; margin-block-start: 16px; list-style: none; }
.source { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--s-line); background: var(--s-surface); scroll-margin-block-start: calc(var(--k-header-h) + 24px); }
.source:target { border-color: var(--s-brand); box-shadow: 0 0 0 3px var(--s-glow-blue); }
.source a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.source small { color: var(--s-text-3); font-size: 0.8125rem; }
.guide__aside { position: sticky; inset-block-start: calc(var(--k-header-h) + 32px); }
.guide__card { display: grid; gap: 14px; padding: 24px; border-radius: 26px; border: 1px solid var(--s-line); background: var(--s-surface); box-shadow: var(--s-shadow-1); }
.others-title { margin-block-end: 32px; }
@media (max-width: 979px) { .guide__grid { grid-template-columns: 1fr; } .guide__aside { position: static; } }
.faq-group { scroll-margin-block-start: calc(var(--k-header-h) + 24px); }
.auth { position: relative; isolation: isolate; overflow: hidden; }
.auth__go .crumbs { margin-block-end: 24px; }
.auth__title { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem); }
.auth__go .lead { margin-block-start: 16px; }
.auth__card { margin-block-start: 28px; padding: clamp(22px, 3vw, 32px); border-radius: 28px; border: 1px solid var(--s-glass-line); background: var(--s-glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--s-shadow-2); }
.auth__cardhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-end: 10px; font-size: 1.125rem; }
.auth__card > p { color: var(--s-text-2); }
.auth__cardhead strong { color: var(--s-text); }
.auth__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 22px; }
.auth__note { display: flex; gap: 10px; align-items: flex-start; margin-block-start: 20px; padding: 14px 16px; border-radius: 16px; background: var(--s-warn-soft); border: 1px solid color-mix(in srgb, var(--s-warn) 35%, transparent); color: var(--s-text); font-size: 0.9375rem; }
.auth__note .k-icon { flex: none; margin-block-start: 2px; color: var(--s-warn); }
.auth__mobile { display: flex; gap: 10px; align-items: flex-start; margin-block-start: 22px; color: var(--s-text-2); font-size: 0.9375rem; }
.auth__mobile .k-icon { flex: none; margin-block-start: 3px; }
.ink-panel__webnote { display: flex; gap: 8px; align-items: flex-start; }
.ink-panel__webnote .k-icon { flex: none; margin-block-start: 3px; }
.badge--open { color: #062b18; background: #b7f5cf; border-color: transparent; }
.principles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.principle { padding: 26px; border-radius: var(--k-shape-card); background: var(--s-surface); border: 1px solid var(--s-line); box-shadow: var(--s-shadow-1); }
.principle .k-icon { inline-size: 26px; block-size: 26px; color: var(--s-brand-ink); }
.principle h3 { margin-block-start: 16px; font-size: 1.125rem; }
.principle p { margin-block-start: 8px; color: var(--s-text-2); font-size: 1rem; }
.prose { max-inline-size: 72ch; }
.prose h2 { margin-block: 48px 14px; font-size: 1.6rem; letter-spacing: -0.02em; scroll-margin-block-start: calc(var(--k-header-h) + 24px); }
.prose h2:first-child { margin-block-start: 0; }
.prose h3 { margin-block: 28px 10px; font-size: 1.1875rem; }
.prose p, .prose ul { margin-block-end: 14px; color: var(--s-text-2); }
.prose strong { color: var(--s-text); }
.prose ul { padding-inline-start: 1.3em; }
.prose li + li { margin-block-start: 6px; }
.prose li::marker { color: var(--s-brand); }
.toc { padding: 22px; border: 1px solid var(--s-line); border-radius: 22px; background: var(--s-surface); }
.toc h2 { font-size: 0.875rem; color: var(--s-text-3); font-weight: 500; }
.toc ol, .toc__list { margin-block-start: 10px; padding-inline-start: 1.2em; display: grid; gap: 4px; font-size: 0.9375rem; }
.toc__list { list-style: none; padding-inline-start: 0; }
.toc__sub { margin-block-start: 22px; }
.toc a { color: var(--s-text); text-decoration: none; }
.toc a:hover { color: var(--s-brand-ink); text-decoration: underline; }
.legal-layout { display: grid; gap: 32px; }
@media (min-width: 1040px) {
.legal-layout { grid-template-columns: minmax(0, 1fr) 290px; align-items: start; }
.legal-layout .toc { position: sticky; inset-block-start: calc(var(--k-header-h) + 32px); max-block-size: calc(100vh - var(--k-header-h) - 64px); overflow-y: auto; order: 2; }
}
.legal-doc .draft { padding: 12px 16px; border-radius: var(--k-radius-md); background: var(--s-warn-soft); border: 1px solid color-mix(in srgb, var(--s-warn) 45%, transparent); font-weight: 500; color: var(--s-text); }
.legal-doc .notice { padding: 14px 16px; border: 1px solid var(--s-line); border-inline-start: 4px solid var(--s-sos); border-radius: var(--k-radius-md); background: var(--s-surface); }
.legal-doc mark.pending { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--s-warn) 25%, transparent); color: inherit; }
.legal-doc h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); margin-block: 0 20px; letter-spacing: -0.03em; }
.mail-list { list-style: none; display: grid; gap: 10px; }
.mail-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 16px 20px; border: 1px solid var(--s-line); border-radius: 18px; background: var(--s-surface); }
.mail-list span { color: var(--s-text-2); }
.mail-list a { margin-inline-start: auto; font-weight: 500; }
.biz-nav { position: sticky; inset-block-start: calc(var(--k-header-h) + 8px); z-index: 40; margin-block-start: 10px; padding-inline: var(--k-gutter); pointer-events: none; }
.biz-nav__inner { pointer-events: auto; display: flex; align-items: center; gap: 6px; max-inline-size: 1100px; min-block-size: 52px; margin-inline: auto; padding: 4px 8px; overflow-x: auto; scrollbar-width: thin; border-radius: 18px; border: 1px solid var(--s-glass-line); background: var(--s-glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--s-shadow-1); }
.biz-nav__back { display: inline-flex; align-items: center; gap: 6px; padding-inline-end: 12px; margin-inline-end: 4px; border-inline-end: 1px solid var(--s-line-2); white-space: nowrap; }
.biz-nav ul { display: flex; gap: 2px; list-style: none; }
.nav-link { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 12px; border-radius: 12px; color: var(--s-text-2); font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav-link:hover { color: var(--s-text); background: var(--s-bg-3); }
.nav-link[aria-current='page'] { color: var(--s-brand-ink); background: var(--s-brand-soft); }
.biz-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 24px 26px; border-radius: var(--k-shape-card); border: 1px solid var(--s-line); background: var(--s-surface); }
.biz-contact .k-icon { color: var(--s-brand-ink); }
.biz-contact a { font-weight: 500; font-size: 1.0625rem; }
.sources { margin-block-start: 16px; font-size: 0.9375rem; }
.sources h3 { font-size: 0.9375rem; font-weight: 500; color: var(--s-text-2); }
.sources ul { margin-block-start: 8px; list-style: none; display: grid; gap: 6px; }
.sources a { display: inline-flex; gap: 6px; align-items: center; }
.swatches { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); list-style: none; padding: 0; }
.swatch { overflow: hidden; border: 1px solid var(--s-line); border-radius: 18px; background: var(--s-surface); }
.swatch__chip { display: block; block-size: 72px; }
.swatch__meta { display: grid; padding: 10px 12px; font-size: 0.875rem; }
.swatch__meta code { color: var(--s-text-2); font-size: 0.8125rem; }
.swatch--navy-950 .swatch__chip { background: var(--k-palette-navy-950); }
.swatch--navy-900 .swatch__chip { background: var(--k-palette-navy-900); }
.swatch--navy-700 .swatch__chip { background: var(--k-palette-navy-700); }
.swatch--blue-600 .swatch__chip { background: var(--k-palette-blue-600); }
.swatch--blue-400 .swatch__chip { background: var(--k-palette-blue-400); }
.swatch--turquoise-500 .swatch__chip { background: var(--k-palette-turquoise-500); }
.swatch--ice .swatch__chip { background: var(--k-palette-ice); }
.press-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 28px; border: 1px solid var(--s-line); border-radius: var(--k-shape-card); background: var(--s-surface); }
@media print {
.site-header, .site-footer, .lang-band, .ambient, .biz-nav, .notice-strip, .hero__visual, .story__stage { display: none !important; }
body { background: #fff; color: #000; }
}
.badge--safe { color: var(--s-safe); background: var(--s-safe-soft); border-color: color-mix(in srgb, var(--s-safe) 35%, transparent); }
.section-more--center { text-align: center; }
.mw { display: inline-block; }
.shot, .shot img { display: block; inline-size: 100%; block-size: auto; }
.dev__screen .shot img { block-size: 100%; object-fit: cover; object-position: top; }
.dev__screen .shot--web { block-size: 100%; }
.about { position: relative; padding-block: clamp(56px, 8vw, 120px); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.about__def { margin-block-start: 22px; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem); line-height: 1.5; color: var(--s-text); letter-spacing: -0.01em; max-inline-size: 40ch; }
.facts { display: grid; gap: 2px; padding: 8px; border-radius: 28px; border: 1px solid var(--s-glass-line); background: var(--s-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--s-shadow-1); }
.facts__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; padding: 14px 16px; border-radius: 20px; }
.facts__row + .facts__row { border-block-start: 1px solid var(--s-line); border-radius: 0; }
.facts dt { font-size: 0.8125rem; font-weight: 500; color: var(--s-brand-ink); letter-spacing: 0.02em; padding-block-start: 2px; }
.facts dd { margin: 0; color: var(--s-text-2); font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 899px) { .about__grid { grid-template-columns: 1fr; } }
@media (max-width: 479px) { .facts__row { grid-template-columns: 1fr; gap: 4px; } }
.free-banner { position: relative; display: flex; gap: 18px; align-items: flex-start; margin-block-end: clamp(40px, 6vw, 72px); padding: clamp(20px, 3vw, 30px); border-radius: 28px; border: 1px solid color-mix(in srgb, var(--s-safe) 35%, transparent); background: linear-gradient(135deg, var(--s-safe-soft), var(--s-surface)); box-shadow: var(--s-shadow-1); }
.free-banner h2, .free-banner h3 { font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem); letter-spacing: -0.02em; }
.free-banner p { margin-block-start: 8px; color: var(--s-text-2); max-inline-size: 70ch; }
.free-banner__ico { display: grid; place-items: center; flex: none; inline-size: 56px; block-size: 56px; border-radius: 18px; color: #fff; background: linear-gradient(140deg, #11803e, #0b8fa0); box-shadow: 0 14px 30px -14px #11803e; }
.free-banner--big { margin-block-end: 28px; }
.plans-tiers { position: relative; isolation: isolate; overflow: clip; }
.plans-free__title { margin-block: 8px 16px; }
.free-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; list-style: none; }
.free-list__item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--s-line); background: var(--s-surface); font-size: 0.9375rem; }
.free-list__item .k-icon { flex: none; margin-block-start: 3px; color: var(--s-safe); }
.free-list__item small { display: block; margin-block-start: 2px; color: var(--s-warn); font-size: 0.8125rem; }
.plans-core { margin-block-start: 22px; }
.cmp { overflow-x: auto; border-radius: 26px; border: 1px solid var(--s-line); background: var(--s-surface); box-shadow: var(--s-shadow-1); }
.cmp:focus-visible { outline: 3px solid var(--s-brand); outline-offset: 3px; }
.cmp__table { inline-size: 100%; min-inline-size: 720px; border-collapse: collapse; font-size: 0.9375rem; }
.cmp__table th, .cmp__table td { padding: 16px 18px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--s-line); }
.cmp__table thead th { position: sticky; inset-block-start: 0; z-index: 1; font-size: 1rem; background: var(--s-surface-2); }
.cmp__table tbody th { font-weight: 400; inline-size: 46%; }
.cmp__table tbody th strong { display: block; font-weight: 500; margin-block-end: 6px; }
.cmp__table tbody th small { display: block; margin-block-start: 6px; color: var(--s-text-2); font-size: 0.875rem; line-height: 1.5; }
.cmp__group th { padding-block: 12px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--s-text-3); background: var(--s-bg-2); }
.cmp__v { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; }
.cmp__v--yes { color: var(--s-safe); }
.cmp__v--limited { color: var(--s-brand-ink); }
.cmp__v--no { color: var(--s-text-3); }
.cmp__table--text tbody th { font-weight: 500; inline-size: 20%; }
.cmp__table--text td { color: var(--s-text-2); line-height: 1.55; inline-size: 40%; }
.cmp__table--text td:last-child { color: var(--s-text); }
.compare__note { margin-block-start: 22px; }
.feats__def { margin-block-start: 22px; max-inline-size: 70ch; color: var(--s-text-2); }
.feat__pair { position: relative; display: grid; place-items: center; min-block-size: 620px; perspective: 1600px; }
.feat__back { position: absolute; inset-block-start: 6%; inset-inline-start: 2%; transform: rotate(-7deg) scale(0.9); opacity: 0.95; }
.feat__front { position: relative; z-index: 1; transform: translateX(14%) rotate(3deg); }
[dir='rtl'] .feat__front { transform: translateX(-14%) rotate(-3deg); }
.feat__art { display: grid; justify-items: center; }
.deep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-block-start: clamp(28px, 4vw, 48px); }
.deep__card { padding: 22px 22px 24px; border-radius: 24px; border: 1px solid var(--s-line); background: var(--s-surface); box-shadow: var(--s-shadow-1); }
.deep__card--privacy { background: linear-gradient(180deg, var(--s-brand-soft), var(--s-surface) 60%); }
.deep__card--limits { background: linear-gradient(180deg, var(--s-warn-soft), var(--s-surface) 60%); }
.deep__title { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; margin-block-end: 12px; }
.deep__ico { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 10px; color: var(--s-brand-ink); background: var(--s-brand-soft); }
.deep__card--limits .deep__ico { color: var(--s-warn); background: var(--s-warn-soft); }
.deep__card ul { display: grid; gap: 10px; list-style: none; }
.deep__card li { position: relative; padding-inline-start: 16px; color: var(--s-text-2); font-size: 0.9375rem; line-height: 1.55; }
.deep__card li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--s-brand); }
.deep__card--limits li::before { background: var(--s-warn); }
@media (max-width: 1099px) { .deep { grid-template-columns: 1fr; } }
@media (max-width: 899px) { .feat__pair { min-block-size: 0; padding-block: 12px 24px; } .feat__back { display: none; } .feat__front { transform: none; } }
.jump--letters ul { gap: 6px; }
.jump--letters a { min-inline-size: 44px; justify-content: center; }
.gloss + .gloss { margin-block-start: 40px; }
.gloss__letter { font-size: 2.4rem; letter-spacing: -0.04em; color: var(--s-brand-ink); padding-block-end: 8px; border-block-end: 1px solid var(--s-line); }
.gloss__list { display: grid; }
.gloss__item { padding-block: 18px; border-block-end: 1px solid var(--s-line); scroll-margin-block-start: calc(var(--k-header-h) + 32px); }
.gloss__item:target { background: linear-gradient(90deg, var(--s-brand-soft), transparent); border-radius: 12px; padding-inline: 12px; }
.gloss__anchor { font-size: 1.1875rem; font-weight: 500; color: var(--s-text); text-decoration: none; }
.gloss__anchor:hover { color: var(--s-brand-ink); text-decoration: underline; }
.gloss__item dd p { margin-block-start: 6px; color: var(--s-text-2); }
.gloss__src { font-size: 0.8125rem; color: var(--s-text-3) !important; }
.search-form { margin-block-start: 28px; max-inline-size: 720px; }
.search-form__label { display: block; margin-block-end: 8px; font-size: 0.875rem; color: var(--s-text-2); }
.search-form__row { display: flex; align-items: center; gap: 10px; padding-block: 6px; padding-inline: 18px 6px; border-radius: 999px; border: 1px solid var(--s-line-2); background: var(--s-surface); box-shadow: var(--s-shadow-1); }
.search-form__row:focus-within { border-color: var(--s-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--s-brand) 22%, transparent); }
.search-form__row .k-icon { flex: none; color: var(--s-text-3); }
.search-form input { flex: 1; min-inline-size: 0; min-block-size: 44px; border: 0; background: transparent; color: var(--s-text); font: inherit; font-size: 1.0625rem; outline: none; }
.search-results { display: grid; gap: 10px; margin-block-end: 40px; }
.search-results__count { font-size: 0.875rem; color: var(--s-text-3); }
.search-hit { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--s-line); background: var(--s-surface); color: inherit; text-decoration: none; }
.search-hit:hover, .search-hit:focus-visible { border-color: var(--s-brand); }
.search-hit strong { font-weight: 500; }
.search-hit small { color: var(--s-text-2); font-size: 0.875rem; }
.search-hit mark, .palette__opt mark { color: inherit; background: color-mix(in srgb, var(--s-brand) 22%, transparent); border-radius: 3px; }
.search-hit__g, .palette__g { justify-self: start; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--s-brand-ink); }
.search-dir { margin-block-start: 26px; }
.search-dir h3 { font-size: 1rem; margin-block-end: 10px; color: var(--s-text-2); }
.search-dir ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 4px 18px; list-style: none; }
.search-dir a { display: inline-block; padding-block: 6px; }
.palette { position: fixed; inset: 0; margin: 0; padding: 0; inline-size: 100%; max-inline-size: none; block-size: 100%; max-block-size: none; border: 0; background: transparent; color: var(--s-text); }
.palette::backdrop { background: rgb(2 4 9 / 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.palette__box { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; inline-size: min(680px, calc(100% - 2 * var(--k-gutter))); max-block-size: min(72vh, 640px); margin: 12vh auto 0; border-radius: 26px; border: 1px solid var(--s-glass-line); background: var(--s-glass-strong); -webkit-backdrop-filter: saturate(170%) blur(24px); backdrop-filter: saturate(170%) blur(24px); box-shadow: var(--s-shadow-2); overflow: hidden; }
.palette__title { padding: 16px 20px 0; font-size: 0.8125rem; font-weight: 500; color: var(--s-text-3); }
.palette__bar { display: flex; align-items: center; gap: 12px; padding-block: 10px 12px; padding-inline: 20px 14px; border-block-end: 1px solid var(--s-line); }
.palette__bar .k-icon { flex: none; color: var(--s-text-3); }
.palette__input { flex: 1; min-inline-size: 0; min-block-size: 44px; border: 0; background: transparent; color: var(--s-text); font: inherit; font-size: 1.125rem; outline: none; }
.palette__close { min-block-size: 36px; padding: 0 10px; border: 1px solid var(--s-line-2); border-radius: 10px; background: var(--s-surface); color: var(--s-text-2); font: inherit; font-size: 0.75rem; cursor: pointer; }
.palette__list { overflow-y: auto; padding: 8px; list-style: none; }
.palette__opt { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; cursor: pointer; }
.palette__opt[aria-selected='true'] { background: var(--s-brand-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-brand) 30%, transparent); }
.palette__opt strong { font-weight: 500; }
.palette__opt small { color: var(--s-text-2); font-size: 0.8125rem; }
.palette__empty { padding: 18px; color: var(--s-text-3); }
.palette__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 12px 20px; border-block-start: 1px solid var(--s-line); font-size: 0.8125rem; color: var(--s-text-3); }
.palette__foot a { display: inline-flex; align-items: center; gap: 6px; }
.palette__status { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.palette-open { overflow: hidden; }
.hdr__search { gap: 8px; padding-inline: 12px; }
.hdr__kbd { padding: 1px 6px; border-radius: 6px; border: 1px solid var(--s-line-2); font: inherit; font-size: 0.6875rem; color: var(--s-text-3); }
.site-header[data-tone='ink'] .hdr::before { background: rgb(5 11 31 / 0.55); border-color: rgb(255 255 255 / 0.14); }
.site-header[data-tone='ink'] .hdr__link, .site-header[data-tone='ink'] .icon-btn, .site-header[data-tone='ink'] .hdr__brand { color: #fff; }
.site-header[data-tone='ink'] .hdr__kbd { color: rgb(255 255 255 / 0.75); border-color: rgb(255 255 255 / 0.3); }
.site-header[data-tone='ink'] .hdr__indicator { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.2); }
.mega__panel--preview { grid-template-columns: 1fr 230px; }
.mega__aside--preview { align-items: center; text-align: center; }
.mega__pv { display: grid; justify-items: center; gap: 8px; }
.mega__crop { position: relative; display: grid; place-items: center; inline-size: 200px; block-size: 220px; }
.mega__pvshot { position: absolute; inset: 0; display: none; place-items: center; }
.mega__pvshot .cp { inline-size: 200px; filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.45)); }
.mega__pvshot .cp--home-sos { inline-size: 112px; }
.mega__pvshot[data-pv='0'] { display: grid; }
.mega__panel--preview:has(li[data-pv] :is(:hover, :focus-visible)) .mega__pvshot { display: none; }
.mega__panel--preview:has(li[data-pv='0'] :is(:hover, :focus-visible)) .mega__pvshot[data-pv='0'],
.mega__panel--preview:has(li[data-pv='1'] :is(:hover, :focus-visible)) .mega__pvshot[data-pv='1'],
.mega__panel--preview:has(li[data-pv='2'] :is(:hover, :focus-visible)) .mega__pvshot[data-pv='2'],
.mega__panel--preview:has(li[data-pv='3'] :is(:hover, :focus-visible)) .mega__pvshot[data-pv='3'],
.mega__panel--preview:has(li[data-pv='4'] :is(:hover, :focus-visible)) .mega__pvshot[data-pv='4'],
.mega__panel--preview:has(li[data-pv='5'] :is(:hover, :focus-visible)) .mega__pvshot[data-pv='5'],
.mega__panel--preview:has(li[data-pv='6'] :is(:hover, :focus-visible)) .mega__pvshot[data-pv='6'] { display: grid; }
.mega__pvnote { font-size: 0.6875rem; color: var(--s-ink-text-2); }
@media (max-width: 1339px) { .hdr__search-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hdr__kbd { display: none; } .hdr__search { padding-inline: 0; } }
@media (max-width: 1099px) { .mega__panel--preview { grid-template-columns: 1fr; } .hdr__tools .hdr__search { display: inline-grid; } }
.site-footer { padding-block: clamp(64px, 8vw, 104px) 32px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 80px); }
.footer-brand__tag { margin-block-start: 18px; font-size: 1.125rem; color: var(--s-text); font-weight: 500; max-inline-size: 30ch; }
.footer-brand__made { margin-block-start: 6px; color: var(--s-text-3); font-size: 0.9375rem; }
.footer-stores { display: grid; gap: 8px; margin-block-start: 24px; list-style: none; max-inline-size: 360px; }
.footer-store { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--s-line); background: var(--s-surface); }
.footer-store > .k-icon { flex: none; color: var(--s-brand-ink); }
.footer-store span:nth-child(2) { display: grid; line-height: 1.25; }
.footer-store small { font-size: 0.6875rem; color: var(--s-text-3); }
.footer-store strong { font-size: 0.9375rem; font-weight: 500; }
.footer-store .badge { margin-inline-start: auto; }
.footer-status { display: inline-flex; align-items: center; gap: 12px; margin-block-start: 16px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--s-line); color: var(--s-text); text-decoration: none; }
.footer-status:hover { border-color: var(--s-brand); }
.footer-status span:nth-child(2) { display: grid; line-height: 1.3; }
.footer-status strong { font-size: 0.9375rem; font-weight: 500; }
.footer-status small { font-size: 0.75rem; color: var(--s-text-3); }
.footer-status__dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--s-unknown); box-shadow: 0 0 0 4px color-mix(in srgb, var(--s-unknown) 20%, transparent); }
.footer-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.footer-col__sub { margin-block-start: 22px; }
.footer-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-block-start: 48px; padding: 14px 18px; border-radius: 20px; border: 1px solid var(--s-line); background: var(--s-surface); }
.footer-controls__group { display: inline-flex; align-items: center; gap: 10px; }
.footer-controls__label { font-size: 0.8125rem; color: var(--s-text-3); }
.footer-controls .menu__panel { inset-block-start: auto; inset-block-end: calc(100% + 12px); inset-inline-end: auto; inset-inline-start: 0; }
.footer-top-link { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; min-block-size: 44px; color: var(--s-text); text-decoration: none; font-weight: 500; }
.footer-top-link:hover { color: var(--s-brand-ink); }
.footer-notice { margin-block-start: 20px; }
@media (max-width: 1099px) { .footer-top { grid-template-columns: 1fr; } }
@media (max-width: 699px) { .footer-nav { grid-template-columns: 1fr 1fr; } .footer-top-link { margin-inline-start: 0; } }
.cursor { display: none; }
@media (pointer: fine) and (hover: hover) {
html.has-cursor, html.has-cursor :is(a, button, summary, label, [role='button'], [role='option']) { cursor: none; }
html.has-cursor :is(input, textarea, select, [contenteditable='true']) { cursor: auto; }
html.has-cursor .cursor { display: block; position: fixed; inset: 0 auto auto 0; z-index: 2147483000; pointer-events: none; }
.cursor__dot, .cursor__ring { position: fixed; inset: 0 auto auto 0; will-change: transform; }
.cursor__dot > span, .cursor__ring > span { position: absolute; display: block; border-radius: 50%; }
.cursor__dot > span { inline-size: 8px; block-size: 8px; margin: -4px 0 0 -4px; background: #1f5eff; box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.9); }
.cursor__ring > span { inline-size: 34px; block-size: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgb(31 94 255 / 0.55); background: rgb(31 94 255 / 0.04); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.35); }
html.cursor-link .cursor__ring > span { transform: scale(1.55); background: rgb(31 94 255 / 0.1); border-color: rgb(31 94 255 / 0.85); }
html.cursor-link .cursor__dot > span { transform: scale(0.6); }
html.cursor-text .cursor__dot > span { transform: scale(0.25, 2.75); border-radius: 2px; }
html.cursor-text .cursor__ring > span { transform: scale(0.4); opacity: 0; }
html.cursor-down .cursor__dot > span { background: #12b5c9; }
html.cursor-down .cursor__ring > span { transform: scale(0.85); }
html.cursor-hidden .cursor { opacity: 0; }
:root[data-theme='dark'] .cursor__dot > span { background: #5b8cff; box-shadow: 0 0 0 1.5px rgb(2 4 9 / 0.9); }
:root[data-theme='dark'] .cursor__ring > span { border-color: rgb(126 166 255 / 0.6); }
}
@media (pointer: fine) and (hover: hover) and (prefers-color-scheme: dark) {
:root:not([data-theme='light']) .cursor__dot > span { background: #5b8cff; box-shadow: 0 0 0 1.5px rgb(2 4 9 / 0.9); }
:root:not([data-theme='light']) .cursor__ring > span { border-color: rgb(126 166 255 / 0.6); }
}
@media (forced-colors: active), (prefers-contrast: more) { .cursor { display: none !important; } html.has-cursor, html.has-cursor * { cursor: auto !important; } }
.asm[data-set='tr'] .asm__part--home-map { --x: 2.036%; --y: 19.484%; --w: 95.929%; }
.asm[data-set='en'] .asm__part--home-map { --x: 2.036%; --y: 19.484%; --w: 95.929%; }
.asm[data-set='tr'] .asm__part--home-place { --x: 4.58%; --y: 5.399%; --w: 90.84%; }
.asm[data-set='en'] .asm__part--home-place { --x: 4.58%; --y: 5.399%; --w: 90.84%; }
.asm[data-set='tr'] .asm__part--home-headline { --x: 4.58%; --y: 72.183%; --w: 90.84%; }
.asm[data-set='en'] .asm__part--home-headline { --x: 4.58%; --y: 68.31%; --w: 90.84%; }
.asm[data-set='tr'] .asm__part--home-sos { --x: 4.58%; --y: 59.859%; --w: 17.303%; }
.asm[data-set='en'] .asm__part--home-sos { --x: 4.58%; --y: 55.986%; --w: 17.303%; }
.asm[data-set='tr'] .asm__part--home-family { --x: 23.664%; --y: 59.859%; --w: 52.672%; }
.asm[data-set='en'] .asm__part--home-family { --x: 23.664%; --y: 55.986%; --w: 52.672%; }
.asm[data-set='tr'] .asm__part--home-tools { --x: 78.117%; --y: 59.859%; --w: 17.303%; }
.asm[data-set='en'] .asm__part--home-tools { --x: 78.117%; --y: 55.986%; --w: 17.303%; }
@font-face { font-family: 'Koruya Display'; font-style: normal; font-weight: 800; font-display: swap; src: url('/_k/fonts/display-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Koruya Display'; font-style: normal; font-weight: 900; font-display: swap; src: url('/_k/fonts/display-900-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Koruya Display Fallback'; src: local('Arial Black'), local('Arial Bold'), local('Arial'); size-adjust: 96%; ascent-override: 96%; descent-override: 26%; line-gap-override: 0%; }
:root { --k-font-display: 'Koruya Display', 'Koruya Display Fallback', 'Rubik', 'Rubik Fallback', system-ui, sans-serif; }
:root:lang(ar), :root:lang(hi), :root:lang(zh-Hans), :root:lang(ru) { --k-font-display: var(--k-font-sans); }
.display, .h2, .page-hero h1, .h-section, .closing__title, .ch__num, .tl__node, .interlude__steps b {
font-family: var(--k-font-display);
font-weight: 800;
font-synthesis: none;
}
.display { letter-spacing: -0.035em; line-height: 1.04; }
.h2 { letter-spacing: -0.03em; line-height: 1.08; }
.h2--xl { font-size: clamp(2.3rem, 1.1rem + 4.4vw, 4.8rem); }
.page-hero h1 { letter-spacing: -0.035em; line-height: 1.06; }
.h-section { letter-spacing: -0.02em; }
:root:lang(ar) :is(.display, .h2, .page-hero h1) { letter-spacing: 0; }
@property --au-1 { syntax: '<color>'; inherits: false; initial-value: rgb(125 172 255 / 0.30); }
@property --au-2 { syntax: '<color>'; inherits: false; initial-value: rgb(109 218 230 / 0.26); }
@property --au-3 { syntax: '<color>'; inherits: false; initial-value: rgb(159 230 200 / 0.18); }
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.aurora i { position: absolute; display: block; border-radius: 50%; }
.aurora__a { --au-1: rgb(125 172 255 / 0.30); inline-size: 78vmax; block-size: 52vmax; inset-block-start: -26vmax; inset-inline-end: -18vmax; background: radial-gradient(closest-side, var(--au-1), transparent); }
.aurora__b { --au-2: rgb(109 218 230 / 0.24); inline-size: 64vmax; block-size: 40vmax; inset-block-start: -12vmax; inset-inline-start: -22vmax; background: radial-gradient(closest-side, var(--au-2), transparent); }
.aurora__c { --au-3: rgb(159 230 200 / 0.16); inline-size: 56vmax; block-size: 36vmax; inset-block-end: -20vmax; inset-inline-start: 20vw; background: radial-gradient(closest-side, var(--au-3), transparent); }
:root[data-theme='dark'] .aurora__a { --au-1: rgb(31 94 255 / 0.30); }
:root[data-theme='dark'] .aurora__b { --au-2: rgb(18 181 201 / 0.20); }
:root[data-theme='dark'] .aurora__c { --au-3: rgb(52 211 153 / 0.10); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) .aurora__a { --au-1: rgb(31 94 255 / 0.30); }
:root:not([data-theme='light']) .aurora__b { --au-2: rgb(18 181 201 / 0.20); }
:root:not([data-theme='light']) .aurora__c { --au-3: rgb(52 211 153 / 0.10); }
}
html[data-hue='amber'] .aurora__a { --au-1: rgb(246 182 92 / 0.26); }
html[data-hue='amber'] .aurora__c { --au-3: rgb(238 123 115 / 0.12); }
html[data-hue='teal'] .aurora__a { --au-1: rgb(109 218 230 / 0.30); }
html[data-hue='green'] .aurora__a { --au-1: rgb(130 214 79 / 0.22); }
html[data-hue='green'] .aurora__c { --au-3: rgb(130 214 79 / 0.20); }
@media (forced-colors: active), (prefers-reduced-data: reduce) { .aurora { display: none; } }
.page-hero { isolation: isolate; }
.page-hero::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(60% 90% at 88% -10%, var(--s-glow-blue), transparent 70%),
radial-gradient(50% 80% at 8% 0%, var(--s-glow-teal), transparent 72%),
radial-gradient(40% 60% at 50% 120%, var(--s-glow-green), transparent 70%);
}
.page-hero::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block-end: 0;
block-size: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--s-grad-b) 60%, transparent), transparent);
}
@media (forced-colors: active) { .page-hero::before, .page-hero::after { display: none; } }
.cp, .cp img { display: block; inline-size: 100%; block-size: auto; }
.part .cp img, .sat .cp img, .dl__card .cp img {
filter: drop-shadow(0 28px 44px rgb(10 22 51 / 0.2)) drop-shadow(0 6px 14px rgb(10 22 51 / 0.1));
}
:root[data-theme='dark'] :is(.part, .sat, .dl__card) .cp img { filter: drop-shadow(0 30px 50px rgb(0 0 0 / 0.6)) drop-shadow(0 0 1px rgb(255 255 255 / 0.12)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) :is(.part, .sat, .dl__card) .cp img { filter: drop-shadow(0 30px 50px rgb(0 0 0 / 0.6)) drop-shadow(0 0 1px rgb(255 255 255 / 0.12)); } }
.chnav { display: none; }
@media (min-width: 1280px) and (min-height: 640px) {
.chnav { position: fixed; z-index: 40; inset-inline-end: 18px; inset-block-start: 50%; translate: 0 -50%; display: block; }
.chnav ol { display: grid; gap: 4px; list-style: none; }
.chnav a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-block-size: 30px; padding-inline: 8px; color: var(--s-text-3); font-size: 0.8125rem; font-weight: 500; text-decoration: none; }
.chnav__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--s-line-2); box-shadow: 0 0 0 4px transparent; }
.chnav__label { position: absolute; inset-inline-end: 30px; padding: 4px 10px; border-radius: 999px; background: var(--s-glass-strong); border: 1px solid var(--s-glass-line); white-space: nowrap; opacity: 0; pointer-events: none; }
.chnav a:hover .chnav__label, .chnav a:focus-visible .chnav__label { opacity: 1; }
.chnav a[aria-current] { color: var(--s-text); }
.chnav a[aria-current] .chnav__dot { inline-size: 10px; block-size: 10px; background: linear-gradient(135deg, var(--s-grad-a), var(--s-grad-c)); box-shadow: 0 0 0 4px var(--s-glow-blue); }
html[data-tone='ink'] .chnav a { color: rgb(255 255 255 / 0.75); }
html[data-tone='ink'] .chnav__dot { background: rgb(255 255 255 / 0.35); }
}
@media (forced-colors: active) { .chnav__dot { forced-color-adjust: none; background: CanvasText; } }
.sc { position: relative; }
.sc__pin { position: relative; }
.hero { position: relative; isolation: isolate; }
.hero .sc__pin { display: grid; align-items: center; min-block-size: min(100svh, 1000px); padding-block: clamp(28px, 5vw, 72px) clamp(72px, 8vw, 112px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero__title { margin-block: 4px 0; font-size: clamp(2.6rem, 1.1rem + 4.8vw, 5.6rem); }
.hero__title .w { display: inline-block; }
.hero__lead { margin-block-start: 26px; max-inline-size: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 34px; }
.hero__note { display: flex; gap: 10px; align-items: flex-start; margin-block-start: 28px; max-inline-size: 52ch; font-size: 0.875rem; color: var(--s-text-3); }
.hero__note .k-icon { flex: none; margin-block-start: 2px; color: var(--s-warn); }
.hero__visual { position: relative; display: grid; justify-items: center; }
.hero__stage { position: relative; inline-size: min(100%, 640px); aspect-ratio: 0.94; display: grid; place-items: center; perspective: 1600px; perspective-origin: 50% 40%; }
.hero__halo { position: absolute; inset: -6% -10%; border-radius: 50%; background: radial-gradient(circle, var(--s-glow-blue), transparent 64%); }
.hero__halo::before, .hero__halo::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid var(--s-line-2); }
.hero__halo::before { inset: 16%; }
.hero__halo::after { inset: 28%; border-style: dashed; opacity: 0.6; }
.hero__phone { position: relative; z-index: 2; transform-style: preserve-3d; }
.hero__phone .dev, .hero__phone .dev__body { transform-style: preserve-3d; }
.asm { position: absolute; inset: calc(var(--w) * 0.032); z-index: 4; display: none; pointer-events: none; transform-style: preserve-3d; }
.asm__part { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); inline-size: var(--w); }
[dir='rtl'] .asm__part { inset-inline-start: auto; inset-inline-end: calc(100% - var(--x) - var(--w)); }
.sat { position: absolute; z-index: 1; }
.sat--a { inline-size: 44%; inset-block-end: 0; inset-inline-start: -2%; z-index: 3; }
.sat--b { inline-size: 42%; inset-block-start: 3%; inset-inline-start: -6%; }
.sat--c { inline-size: 34%; inset-block-start: 30%; inset-inline-end: 1%; }
.veil { position: absolute; inset: 0; z-index: 2; display: none; background: linear-gradient(180deg, #1d4aa3 0%, #6f9fe0 22%, #cfe2f8 46%, #eef4fb 72%, #f4f6f9 100%); }
:root[data-theme='dark'] .veil { background: linear-gradient(180deg, #14306e 0%, #0c1d42 34%, #070b16 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .veil { background: linear-gradient(180deg, #14306e 0%, #0c1d42 34%, #070b16 100%); } }
.hero__tag { margin-block-start: 10px; }
.hero__scroll { position: absolute; inset-block-end: 20px; inset-inline-start: 50%; translate: -50% 0; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--s-text-3); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; }
[dir='rtl'] .hero__scroll { translate: 50% 0; }
.hero__mouse { position: relative; inline-size: 22px; block-size: 34px; border-radius: 12px; border: 1.5px solid var(--s-line-2); }
.hero__mouse::after { content: ''; position: absolute; inset-block-start: 7px; inset-inline-start: 50%; inline-size: 3px; block-size: 7px; margin-inline-start: -1.5px; border-radius: 2px; background: var(--s-text-3); }
@media (max-width: 1099px) {
.hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero__stage { inline-size: min(100%, 560px); }
.hero__scroll { display: none; }
}
@media (max-width: 599px) {
.hero__stage { aspect-ratio: 0.9; }
.sat--a { inline-size: 52%; inset-inline-start: -6%; }
.sat--b { inline-size: 50%; inset-inline-start: -8%; }
.sat--c { inline-size: 46%; inset-inline-end: -6%; }
}
.manifesto { position: relative; overflow: clip; padding-block: clamp(96px, 14vw, 200px); }
.manifesto__text { font-family: var(--k-font-display); font-weight: 800; font-size: clamp(1.9rem, 1rem + 3.4vw, 3.9rem); line-height: 1.16; letter-spacing: -0.03em; }
.manifesto__glow { position: absolute; inset: 10% 20%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--s-glow-teal), transparent); pointer-events: none; }
.interlude { position: relative; padding-block: clamp(80px, 10vw, 150px) clamp(24px, 4vw, 48px); }
.interlude__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); list-style: none; max-inline-size: 980px; margin-inline: auto; }
.interlude__steps a { display: grid; gap: 6px; padding: 18px 20px; border-radius: 22px; border: 1px solid var(--s-glass-line); background: var(--s-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--s-text); text-decoration: none; font-weight: 500; box-shadow: var(--s-shadow-1); }
.interlude__steps a:hover { border-color: color-mix(in srgb, var(--s-brand) 45%, var(--s-line)); }
.interlude__steps b { font-size: 1.6rem; line-height: 1; background: linear-gradient(120deg, var(--s-grad-a), var(--s-grad-c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 799px) { .interlude__steps { grid-template-columns: 1fr 1fr; } }
@media (forced-colors: active) { .interlude__steps b { color: CanvasText; background: none; } }
.ch { position: relative; isolation: isolate; }
.ch .sc__pin { padding-block: clamp(72px, 9vw, 130px); }
.ch__grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.ch--flip .ch__copy { order: 2; }
.ch__copy { position: relative; z-index: 2; max-inline-size: 560px; }
.ch__label { display: inline-flex; align-items: center; gap: 12px; margin-block-end: 18px; font-weight: 500; color: var(--s-brand-ink); }
.ch__label b { display: grid; place-items: center; min-inline-size: 44px; block-size: 44px; padding-inline: 8px; border-radius: 14px; background: var(--s-brand-soft); font-family: var(--k-font-display); font-weight: 800; }
.ch__body { margin-block-start: 20px; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem); color: var(--s-text-2); }
.ch__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-block-start: 26px; }
.ch__links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.ch__tag { margin-block-start: 22px; }
.ch__num { position: absolute; z-index: -1; inset-block-start: 4%; inset-inline-end: 2%; font-size: clamp(8rem, 22vw, 22rem); line-height: 0.8; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px var(--s-line-2); user-select: none; pointer-events: none; }
.ch--flip .ch__num { inset-inline-end: auto; inset-inline-start: 2%; }
@media (forced-colors: active) { .ch__num { display: none; } }
.ch__stage { position: relative; inline-size: min(100%, 600px); aspect-ratio: 1 / 1.06; margin-inline: auto; }
.stage__drift { position: absolute; inset: 0; }
.part { position: absolute; inline-size: var(--cw); inset-block-start: var(--ct); inset-inline-start: var(--cl); z-index: var(--cz, 1); }
.stage--before .part--plan-summary { --cw: 74%; --ct: 0%; --cl: 0%; --cz: 1; }
.stage--before .part--kit-summary { --cw: 68%; --ct: 30%; --cl: 32%; --cz: 2; }
.stage--before .part--kit-item { --cw: 76%; --ct: 72%; --cl: 2%; --cz: 3; }
.stage--before .part--home-tools { --cw: 22%; --ct: 70%; --cl: 76%; --cz: 4; }
.stage--during .part--map-area { --cw: 60%; --ct: 9%; --cl: 20%; --cz: 1; }
.stage--during .part--map-top { --cw: 80%; --ct: 1%; --cl: 10%; --cz: 2; }
.stage--during .part--status-quake { --cw: 60%; --ct: 52%; --cl: 40%; --cz: 4; }
.stage--during .part--alertcard-card { --cw: 56%; --ct: 30%; --cl: -2%; --cz: 3; }
.stage--during .part--home-sos { --cw: 19%; --ct: 72%; --cl: 6%; --cz: 5; }
.stage--offline .part--notes-note { --cw: 48%; --ct: 0%; --cl: 52%; --cz: 1; }
.stage--offline .part--guide-during { --cw: 68%; --ct: 40%; --cl: 0%; --cz: 2; }
.stage--offline .part--learn-step { --cw: 62%; --ct: 74%; --cl: 36%; --cz: 3; }
.stage--family .part--family-tasks { --cw: 56%; --ct: 0%; --cl: 44%; --cz: 1; }
.stage--family .part--family-members { --cw: 60%; --ct: 26%; --cl: 0%; --cz: 2; }
.part--family-tasks .cp, .part--map-area .cp { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
.part--map-area .cp img { border-radius: 28px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 0 80px -10px rgb(255 138 76 / 0.35); }
.part--map-top .cp img { border-radius: 26px; }
.asm__part--home-map .cp img, .asm__part--home-headline .cp img { border-radius: 16px; }
.radar { position: absolute; z-index: 2; inset-block-start: 22%; inset-inline-start: 22%; inline-size: 56%; aspect-ratio: 1; pointer-events: none; }
.radar i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgb(255 138 76 / 0.5); opacity: 0; }
.radar i:first-child { opacity: 0.5; inset: 30%; }
.nowifi { position: absolute; z-index: 0; inset-block-start: 6%; inset-inline-start: 8%; display: grid; place-items: center; inline-size: 88px; block-size: 88px; border-radius: 28px; color: var(--s-brand-ink); background: var(--s-brand-soft); box-shadow: var(--s-shadow-1); }
.orbit { position: absolute; inset-block-start: 50%; inset-inline-start: 36%; inline-size: 96%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--s-safe) 40%, transparent); pointer-events: none; }
[dir='rtl'] .orbit { translate: 50% -50%; }
.orbit--2 { inline-size: 70%; border-style: solid; border-color: color-mix(in srgb, var(--s-safe) 22%, transparent); }
.bloom { position: absolute; inset-block-start: 24%; inset-inline-start: -4%; inline-size: 76%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--s-safe) 32%, transparent), transparent); pointer-events: none; }
@media (forced-colors: active) { .radar, .orbit, .bloom, .nowifi { display: none; } }
.ch--during { color: var(--s-ink-text); }
.ch__ink { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(160deg, #050b1f 0%, #0a1633 52%, #15327a 100%); }
.ch__inkglow { position: absolute; inset: -20% -10% auto auto; inline-size: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 138 76 / 0.28), transparent); }
.ch--during .ch__label { color: #ffd5b8; }
.ch--during .ch__label b { background: rgb(255 255 255 / 0.1); color: #fff; }
.ch--during .ch__body, .ch--during .checklist li { color: rgb(255 255 255 / 0.84); }
.ch--during .checklist .k-icon { color: #6ee7a8; }
.ch--during .ch__links a { color: #b9cdff; }
.ch--during .art-tag { color: rgb(255 255 255 / 0.68); }
.ch--during .ch__num { -webkit-text-stroke-color: rgb(255 255 255 / 0.14); }
.ch--during .nowifi { color: #fff; }
.ch__notes { display: grid; gap: 12px; margin-block-start: 22px; list-style: none; }
.ch__notes li { display: flex; gap: 12px; align-items: flex-start; color: rgb(255 255 255 / 0.84); font-size: 0.9375rem; }
.ch__notes strong { color: #fff; }
.ch__noteico { display: grid; place-items: center; flex: none; inline-size: 34px; block-size: 34px; border-radius: 11px; background: rgb(255 255 255 / 0.1); color: #ffd5b8; }
@media (forced-colors: active) { .ch__ink { background: Canvas; } .ch--during, .ch--during * { color: CanvasText; } }
@media (max-width: 899px) {
.ch__grid { grid-template-columns: minmax(0, 1fr); }
.ch--flip .ch__copy { order: 0; }
.ch__stage { inline-size: min(100%, 520px); margin-block-start: 8px; }
.ch__num { font-size: clamp(7rem, 34vw, 12rem); inset-block-start: 1%; }
}
.tl__body { position: relative; max-inline-size: 980px; margin-inline: auto; }
.tl__line { position: absolute; inset-block: 24px; inset-inline-start: 27px; inline-size: 3px; border-radius: 3px; background: var(--s-line-2); overflow: hidden; }
.tl__fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--s-grad-a), var(--s-grad-b), var(--s-grad-c)); transform-origin: top; }
.tl__list { position: relative; display: grid; gap: clamp(28px, 4vw, 52px); list-style: none; }
.tl__phase { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.tl__node { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 18px; background: var(--s-surface); border: 1px solid var(--s-line-2); box-shadow: var(--s-shadow-2); font-size: 1.5rem; }
.tl__node span { background: linear-gradient(135deg, var(--s-grad-a), var(--s-grad-c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tl__copy { padding: clamp(20px, 3vw, 32px); border-radius: 28px; border: 1px solid var(--s-glass-line); background: var(--s-glass-strong); box-shadow: var(--s-shadow-1); }
.tl__label { font-size: 0.8125rem; font-weight: 500; color: var(--s-brand-ink); letter-spacing: 0.02em; }
.tl__copy .h3 { margin-block: 6px 4px; }
.tl__src { color: var(--s-text-3); }
@media (forced-colors: active) { .tl__node span { color: CanvasText; background: none; } }
.ink-panel__art { position: relative; min-block-size: 420px; }
.dl__card { position: absolute; }
.dl__card--a { inline-size: 78%; inset-block-start: 4%; inset-inline-end: 4%; }
.dl__card--b { inline-size: 88%; inset-block-end: 4%; inset-inline-start: 0; }
@media (max-width: 899px) { .ink-panel__art { min-block-size: 0; display: grid; gap: 14px; } .dl__card { position: static; inline-size: 100%; } }
.closing__title { font-size: clamp(2.6rem, 1rem + 6vw, 6.4rem); }
.hero, .ch, .devices, .tl, .feat { overflow-x: clip; }
@media (forced-colors: active) { .x-lit { color: CanvasText !important; background: none !important; } }
:root[dir='rtl'] :is(h1, h2, h3, p, li, dt, dd, summary, figcaption, legend, label) { unicode-bidi: plaintext; }
.lang-band { position: fixed; z-index: 70; inset-inline: 12px; inset-block-end: 12px; max-inline-size: 620px; margin-inline: auto; border: 1px solid var(--s-glass-line); border-radius: 18px; background: var(--s-glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--s-shadow-2); }
.lang-band[hidden] { display: none; }
@font-face { font-family: 'Koruya Tier'; font-style: normal; font-weight: 900; font-display: block; src: url('/_k/fonts/tier.woff2') format('woff2'); }
:root {
--tier-plus: linear-gradient(to bottom left, #357a1c, #0369a1);
--tier-plus-dark: linear-gradient(to bottom left, #82d64f, #4fb3e8);
--tier-pro: linear-gradient(100deg, #2f6e1a 0%, #0e7490 22%, #1d4ed8 46%, #5b21b6 64%, #0e7490 82%, #2f6e1a 100%);
--tier-pro-dark: linear-gradient(100deg, #82d64f 0%, #4fd6e4 22%, #7ea6ff 46%, #c4b5fd 64%, #4fd6e4 82%, #82d64f 100%);
}
.tiermark { display: inline-flex; align-items: baseline; font-family: var(--k-font-wordmark); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; color: var(--s-text); line-height: 1; }
.tiermark--free { font-family: var(--k-font-display); font-weight: 800; letter-spacing: -0.02em; }
.tiermark__suffix {
font-family: 'Koruya Tier', var(--k-font-wordmark);
font-weight: 900;
color: transparent;
background-image: var(--tier-plus);
-webkit-background-clip: text;
background-clip: text;
padding-inline-end: 0.04em;
}
.tiermark--plus .tiermark__suffix { font-size: 1.5em; line-height: 0.66; margin-inline-start: 0.02em; translate: 0 0.06em; }
.tiermark--pro .tiermark__suffix { font-size: 1.12em; margin-inline-start: 0.18em; letter-spacing: -0.02em; background-image: var(--tier-pro); background-size: 300% 100%; background-position: 0% 50%; }
:root[data-theme='dark'] .tiermark--plus .tiermark__suffix { background-image: var(--tier-plus-dark); }
:root[data-theme='dark'] .tiermark--pro .tiermark__suffix { background-image: var(--tier-pro-dark); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) .tiermark--plus .tiermark__suffix { background-image: var(--tier-plus-dark); }
:root:not([data-theme='light']) .tiermark--pro .tiermark__suffix { background-image: var(--tier-pro-dark); }
}
.tier--pro .tiermark { color: #f4f7fc; }
.tier--pro .tiermark--pro .tiermark__suffix { background-image: var(--tier-pro-dark); }
@media (forced-colors: active) { .tiermark__suffix { color: CanvasText; background: none; } }
.tiermark--l { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem); }
.tiers { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); list-style: none; align-items: stretch; }
.tier {
position: relative;
isolation: isolate;
display: grid;
gap: 14px;
align-content: start;
padding: clamp(26px, 3vw, 38px);
border-radius: 32px;
border: 1px solid var(--s-glass-line);
background: var(--s-glass-strong);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
box-shadow: var(--s-shadow-2);
overflow: hidden;
}
.tier__name { font-size: 1.6rem; line-height: 1.1; min-block-size: 1.3em; }
.tier__tagline { font-size: 1.0625rem; color: var(--s-text); font-weight: 500; }
.tier__for { color: var(--s-text-2); font-size: 0.9375rem; }
.tier__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 6px; }
.tier__price { font-size: 0.875rem; color: var(--s-text-3); }
.tiers--teaser .tier { grid-template-rows: auto 1fr auto; }
.tiers--teaser .tier .badge { justify-self: start; }
@media (max-width: 899px) { .tiers { grid-template-columns: 1fr; } }
.tier--plus::after, .tier--pro::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.05;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.6 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.tier__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.tier__bg i { position: absolute; display: block; border-radius: 50%; }
.tier--plus {
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 1px solid transparent;
background:
linear-gradient(var(--s-surface), var(--s-surface)) padding-box,
linear-gradient(135deg, color-mix(in srgb, #82d64f 70%, transparent), color-mix(in srgb, #12b5c9 40%, transparent) 45%, color-mix(in srgb, #1f5eff 60%, transparent)) border-box;
}
.tier--plus .tier__bg i:nth-child(1) { inline-size: 80%; aspect-ratio: 1; inset-block-start: -40%; inset-inline-end: -26%; background: radial-gradient(closest-side, rgb(130 214 79 / 0.3), transparent); }
.tier--plus .tier__bg i:nth-child(2) { inline-size: 70%; aspect-ratio: 1; inset-block-end: -44%; inset-inline-start: -24%; background: radial-gradient(closest-side, rgb(31 94 255 / 0.18), transparent); }
.tier--plus .tier__bg i:nth-child(3) { inline-size: 60%; aspect-ratio: 1; inset-block-start: 20%; inset-inline-start: 30%; background: radial-gradient(closest-side, rgb(18 181 201 / 0.12), transparent); }
.tier--pro {
color: #f4f7fc;
border-color: transparent;
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: 0 40px 90px -30px rgb(31 94 255 / 0.55), 0 18px 40px -20px rgb(10 22 51 / 0.6);
}
.tier__ring { position: absolute; inset: -1px; z-index: -3; overflow: hidden; border-radius: inherit; pointer-events: none; }
.tier__ring i { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: conic-gradient(rgb(130 214 79 / 0.6), rgb(79 214 228 / 0.55), rgb(126 166 255 / 0.7), rgb(196 181 253 / 0.65), rgb(130 214 79 / 0.6)); }
[dir='rtl'] .tier__ring i { translate: 50% -50%; }
.tier--pro .tier__bg { inset: 0; border-radius: inherit; background: linear-gradient(165deg, #070d22 0%, #0a1633 48%, #101f4d 100%); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset; }
.tier--pro .tier__bg i:nth-child(1) { inline-size: 95%; aspect-ratio: 1; inset-block-start: -55%; inset-inline-end: -35%; background: radial-gradient(closest-side, rgb(61 123 255 / 0.55), transparent); }
.tier--pro .tier__bg i:nth-child(2) { inline-size: 85%; aspect-ratio: 1; inset-block-end: -55%; inset-inline-start: -30%; background: radial-gradient(closest-side, rgb(34 211 238 / 0.36), transparent); }
.tier--pro .tier__bg i:nth-child(3) { inline-size: 70%; aspect-ratio: 1; inset-block-start: 10%; inset-inline-start: 25%; background: radial-gradient(closest-side, rgb(139 92 246 / 0.32), transparent); }
.tier--pro::before { content: ''; position: absolute; inset-inline: 10%; inset-block-start: 0; block-size: 1px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.55), transparent); }
.tier--pro .tier__tagline { color: #fff; }
.tier--pro .tier__for, .tier--pro .tier__price { color: rgb(255 255 255 / 0.8); }
.tier--pro .badge--planned { color: #ffd9a8; background: rgb(255 255 255 / 0.08); border-color: rgb(255 214 168 / 0.38); }
@media (forced-colors: active) {
.tier--plus, .tier--pro { background: Canvas; border: 1px solid CanvasText; color: CanvasText; }
.tier__bg, .tier__ring, .tier--plus::after, .tier--pro::after, .tier--pro::before { display: none; }
}
@media (prefers-contrast: more) { .tier__bg, .tier--plus::after, .tier--pro::after { display: none; } }
@media (prefers-reduced-motion: no-preference) {
.tiermark--pro .tiermark__suffix { animation: k-tier-flow 9s ease-in-out infinite alternate; }
@keyframes k-tier-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.tier__ring i { animation: k-tier-edge 12s linear infinite; }
@keyframes k-tier-edge { to { rotate: 360deg; } }
.tier--pro .tier__bg i:nth-child(1) { animation: k-tier-a 22s ease-in-out infinite alternate; }
.tier--pro .tier__bg i:nth-child(2) { animation: k-tier-b 27s ease-in-out infinite alternate; }
.tier--pro .tier__bg i:nth-child(3) { animation: k-tier-c 31s ease-in-out infinite alternate; }
@keyframes k-tier-a { to { transform: translate(-22%, 18%) scale(1.15); } }
@keyframes k-tier-b { to { transform: translate(24%, -16%) scale(0.9); } }
@keyframes k-tier-c { to { transform: translate(-18%, -12%) scale(1.25) rotate(20deg); } }
.tier--plus .tier__bg i:nth-child(1) { animation: k-tier-breathe 14s ease-in-out infinite alternate; }
@keyframes k-tier-breathe { to { transform: scale(1.12); opacity: 0.8; } }
.tier { transition: transform 420ms var(--k-ease), box-shadow 420ms var(--k-ease); }
.tier:hover { transform: translateY(-6px); }
.page-hidden .tier__ring i, .page-hidden .tier__bg i, .page-hidden .tiermark__suffix { animation-play-state: paused; }
}
.lf { position: relative; }
.lf [hidden] { display: none !important; }
.lf__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.lf__title { margin-block: 4px 8px; }
.lf__lead { color: var(--s-text-2); max-inline-size: 60ch; }
.lf__nojs { margin-block-start: 18px; }
.lf__form {
position: relative;
margin-block-start: 22px;
padding: clamp(20px, 3vw, 34px);
border-radius: 30px;
border: 1px solid var(--s-glass-line);
background: var(--s-glass-strong);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
box-shadow: var(--s-shadow-2);
}
.lf__form::before {
content: '';
position: absolute;
inset-inline: 24px;
inset-block-start: 0;
block-size: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--s-grad-b) 60%, transparent), transparent);
}
.lf__progress { margin-block-end: 18px; }
.lf__bar { display: block; block-size: 6px; border-radius: 6px; background: var(--s-bg-3); overflow: hidden; }
.lf__bar i { display: block; block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--s-grad-a), var(--s-grad-b), var(--s-grad-c)); transform: scaleX(var(--lf-p, 0.25)); transform-origin: 0 50%; }
[dir='rtl'] .lf__bar i { transform-origin: 100% 50%; }
.lf__dots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-block-end: 22px; list-style: none; }
.lf__dots li { display: flex; align-items: center; gap: 8px; min-inline-size: 0; font-size: 0.8125rem; color: var(--s-text-3); }
.lf__dots b { display: grid; place-items: center; flex: none; inline-size: 26px; block-size: 26px; border-radius: 50%; border: 1px solid var(--s-line-2); font-size: 0.75rem; font-weight: 600; background: var(--s-surface); }
.lf__dots span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf__dots .is-on { color: var(--s-text); font-weight: 500; }
.lf__dots .is-on b { color: #fff; border-color: transparent; background: linear-gradient(135deg, #15327a, #1f5eff); }
.lf__dots .is-done b { color: var(--s-safe); border-color: color-mix(in srgb, var(--s-safe) 45%, transparent); background: var(--s-safe-soft); }
@media (max-width: 599px) { .lf__dots span { display: none; } .lf__dots .is-on span { display: inline; } .lf__dots { grid-auto-columns: auto; justify-content: start; } }
.lf__step { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; gap: 18px; }
.lf__legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-block-end: 2px; font-family: var(--k-font-display); font-weight: 800; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); letter-spacing: -0.02em; outline: none; }
.lf__legend:focus-visible { outline: 3px solid var(--s-brand); outline-offset: 4px; border-radius: 8px; }
.lf__num { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 12px; font-size: 1rem; color: var(--s-brand-ink); background: var(--s-brand-soft); }
.lf__field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.lf__field > label, .lf__group > legend { font-weight: 500; padding: 0; }
.lf__req { font-size: 0.8125rem; font-weight: 400; color: var(--s-text-3); }
.lf__hint { font-size: 0.875rem; color: var(--s-text-2); }
.lf__field input, .lf__field select, .lf__field textarea {
inline-size: 100%;
min-block-size: 50px;
padding: 12px 16px;
border: 1px solid var(--s-line-2);
border-radius: 16px;
background: var(--s-surface);
color: var(--s-text);
font: inherit;
font-size: 1rem;
}
.lf__field textarea { min-block-size: 140px; resize: vertical; line-height: 1.5; }
.lf__field input:focus-visible, .lf__field select:focus-visible, .lf__field textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--s-brand) 70%, transparent); outline-offset: 1px; border-color: var(--s-brand); }
.lf__field [aria-invalid='true'] { border-color: var(--s-sos); box-shadow: 0 0 0 1px var(--s-sos); }
.lf__err { display: flex; gap: 6px; font-size: 0.875rem; font-weight: 500; color: var(--s-sos); }
.lf__count { font-size: 0.8125rem; color: var(--s-text-3); text-align: end; }
.lf__checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.lf__check { display: flex; gap: 10px; align-items: flex-start; min-block-size: 48px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--s-line-2); background: var(--s-surface); cursor: pointer; font-size: 0.9375rem; }
.lf__check input { inline-size: 20px; block-size: 20px; margin: 1px 0 0; flex: none; accent-color: var(--s-brand); }
.lf__check:has(input:checked) { border-color: var(--s-brand); background: var(--s-brand-soft); }
.lf__check:has(input:focus-visible) { outline: 3px solid var(--s-brand); outline-offset: 2px; }
.lf__errors { margin-block-end: 18px; padding: 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--s-sos) 45%, transparent); background: color-mix(in srgb, var(--s-sos) 8%, var(--s-surface)); }
.lf__errors:focus-visible { outline: 3px solid var(--s-sos); outline-offset: 2px; }
.lf__errors p { display: flex; gap: 8px; align-items: center; color: var(--s-sos); }
.lf__errors ul { margin-block-start: 6px; padding-inline-start: 28px; }
.lf__errors a { color: var(--s-text); }
.lf__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-block-start: 26px; }
.lf__nav [data-lead-next] { margin-inline-start: auto; }
.lf__nosend { display: flex; gap: 10px; align-items: flex-start; margin-block-start: 20px; padding-block-start: 16px; border-block-start: 1px solid var(--s-line); font-size: 0.875rem; color: var(--s-text-2); }
.lf__nosend .k-icon { flex: none; margin-block-start: 2px; color: var(--s-safe); }
.lf__summary { display: grid; gap: 2px; margin: 0; padding: 6px; border-radius: 20px; border: 1px solid var(--s-line); background: var(--s-surface-2); }
.lf__summary div { display: grid; grid-template-columns: minmax(8rem, 0.4fr) minmax(0, 1fr); gap: 12px; padding: 10px 12px; }
.lf__summary div + div { border-block-start: 1px solid var(--s-line); }
.lf__summary dt { font-size: 0.875rem; color: var(--s-text-2); }
.lf__summary dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 479px) { .lf__summary div { grid-template-columns: 1fr; gap: 2px; } }
.lf__send { display: flex; flex-wrap: wrap; gap: 12px; }
.lf__copied { min-block-size: 1.4em; font-size: 0.9375rem; color: var(--s-safe); }
.lf__done { font-size: 0.9375rem; color: var(--s-text-2); }
.lf__prepared summary { cursor: pointer; font-weight: 500; min-block-size: 44px; display: flex; align-items: center; }
.lf__prepared pre { margin: 8px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--s-bg-3); font-size: 0.8125rem; white-space: pre-wrap; overflow-wrap: anywhere; max-block-size: 320px; overflow: auto; }
.lf__aside { position: sticky; inset-block-start: 96px; display: grid; gap: 16px; }
.lf__info { position: relative; overflow: hidden; padding: 22px 24px; border-radius: 26px; color: var(--s-ink-text); background: var(--s-ink-panel); box-shadow: var(--s-shadow-2); }
.lf__info::after { content: ''; position: absolute; inset: -40% -30% auto auto; inline-size: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(79 214 228 / 0.35), transparent); pointer-events: none; }
.lf__infohead { display: flex; gap: 8px; align-items: center; margin-block-end: 8px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(255 255 255 / 0.8); }
.lf__infotext { position: relative; color: rgb(255 255 255 / 0.9); line-height: 1.55; }
.lf__infotext strong { display: block; margin-block-end: 4px; color: #fff; font-size: 1.0625rem; }
@media (max-width: 999px) { .lf__grid { grid-template-columns: 1fr; } .lf__aside { position: static; } }
@media (forced-colors: active) { .lf__info { background: Canvas; color: CanvasText; } .lf__bar i { background: Highlight; } }
.mailboxes { padding: 22px 24px; border-radius: 26px; border: 1px solid var(--s-glass-line); background: var(--s-glass-strong); box-shadow: var(--s-shadow-1); }
.mailboxes h2, .mailboxes h3 { font-size: 1.0625rem; margin-block-end: 12px; }
.mailboxes ul { display: grid; gap: 10px; list-style: none; }
.mailboxes li { display: grid; gap: 2px; }
.mailboxes a { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; overflow-wrap: anywhere; }
.mailboxes small { color: var(--s-text-2); font-size: 0.8125rem; }
.mailboxes .is-main a { font-size: 1.0625rem; }
@media (prefers-reduced-motion: no-preference) {
.lf__bar i { transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.lf__dots b { transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
.lf__dots .is-on b { transform: scale(1.12); }
.lf__step.lf-in { animation: k-lf-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.lf__step.lf-in-back { animation: k-lf-back 560ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes k-lf-in { from { opacity: 0; transform: translateX(48px); } }
@keyframes k-lf-back { from { opacity: 0; transform: translateX(-48px); } }
[dir='rtl'] .lf__step.lf-in { animation-name: k-lf-back; }
[dir='rtl'] .lf__step.lf-in-back { animation-name: k-lf-in; }
.lf__infotext:not([hidden]) { animation: k-lf-info 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes k-lf-info { from { opacity: 0; transform: translateY(14px); } }
.lf__errors:not([hidden]) { animation: k-lf-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes k-lf-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.lf__check { transition: border-color 200ms ease, background-color 200ms ease; }
}
.mailboxes .biz-noform { margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px solid var(--s-line); }
.card__apply { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 12px; padding: 4px 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; color: var(--s-brand-ink); background: var(--s-brand-soft); }
.site-header[data-tone='ink'] {
--k-btn-secondary-bg: #0a1633;
--k-btn-secondary-ink: #f4f7fc;
--k-btn-secondary-plate: rgb(244 247 252 / 0.9);
--k-btn-tertiary-fg: #8db1ff;
--k-btn-focus: #8db1ff;
}
.hdr__tools .k-btn { margin-block-end: 0; }
.section-more .k-btn--tertiary:first-child { margin-inline-start: -6px; }
.section-more .k-btn + .k-btn { margin-inline-start: 8px; }
.search-form__row .k-btn { margin-block: 0; }
@media (max-width: 479px) {
.hero__actions .k-btn, .closing__actions .k-btn, .page-hero__actions .k-btn, .auth__actions .k-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms var(--k-ease) both k-fade-out; }
::view-transition-new(root) { animation: 320ms var(--k-ease) both k-fade-in; }
html.theme-vt::view-transition-old(root) { animation: none; }
html.theme-vt::view-transition-new(root) { animation: 640ms cubic-bezier(0.65, 0, 0.35, 1) both k-theme-reveal; }
@keyframes k-fade-out { to { opacity: 0; } }
@keyframes k-fade-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes k-theme-reveal {
from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0%)); }
to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0%)); }
}
html.theme-fade, html.theme-fade * { transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease !important; }
html:focus-within { scroll-behavior: smooth; }
.skip-link { transition: transform var(--k-motion-standard) var(--k-ease); }
.card--link, .hazard-card a, .guide-tile__link, .bento__item, .chip-link, .jump a, .phase-jump a { transition: transform 300ms var(--k-ease), border-color 300ms var(--k-ease), box-shadow 300ms var(--k-ease); }
.card--link:hover, .hazard-card a:hover, .guide-tile__link:hover, .bento__item:hover { transform: translateY(-4px); box-shadow: var(--s-shadow-2); }
.bento__more, .hazard-card__cta .k-icon, .card__more { transition: transform 300ms var(--k-ease), background-color 300ms var(--k-ease), color 300ms var(--k-ease); }
.bento__item:hover .bento__more { transform: rotate(45deg); }
[dir='rtl'] .bento__item:hover .bento__more { transform: scaleX(-1) rotate(45deg); }
.hazard-card a:hover .hazard-card__cta .k-icon { transform: translateX(4px); }
[dir='rtl'] .hazard-card a:hover .hazard-card__cta .k-icon { transform: scaleX(-1) translateX(4px); }
.faq summary .k-icon, .hdr__link .k-icon { transition: transform 300ms var(--k-ease); }
.mega__link, .menu__item, .icon-btn, .nav-link { transition: background-color 200ms ease, color 200ms ease; }
.hdr { transition: max-inline-size 520ms cubic-bezier(0.22, 1, 0.36, 1), min-block-size 400ms var(--k-ease); }
.hdr::before { transition: background-color 400ms ease, box-shadow 400ms ease; }
.hdr__indicator { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), inline-size 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease; }
.hdr__progress { transition: opacity 300ms ease; }
.mega[open] .mega__panel, .menu[open] .menu__panel { transition: opacity 260ms var(--k-ease), transform 360ms cubic-bezier(0.22, 1, 0.36, 1); }
.mega[open] .mega__link { transition: opacity 360ms var(--k-ease), transform 420ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease; }
@starting-style {
.mega[open] .mega__panel, .menu[open] .menu__panel { opacity: 0; transform: translateY(-8px) scale(0.98); }
.mega[open] .mega__link { opacity: 0; transform: translateY(8px); }
}
.mega[open] li:nth-child(2) .mega__link { transition-delay: 30ms; }
.mega[open] li:nth-child(3) .mega__link { transition-delay: 60ms; }
.mega[open] li:nth-child(4) .mega__link { transition-delay: 90ms; }
.mega[open] li:nth-child(5) .mega__link { transition-delay: 120ms; }
.mega[open] li:nth-child(6) .mega__link { transition-delay: 150ms; }
.mega[open] li:nth-child(7) .mega__link { transition-delay: 180ms; }
.burger span { transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), inset-block-start 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease; }
@media (max-width: 1099px) {
.js .hdr__nav { clip-path: circle(0 at calc(100% - 40px) 36px); transition: clip-path 620ms cubic-bezier(0.65, 0, 0.35, 1), opacity 300ms ease, visibility 0s linear 620ms; }
[dir='rtl'].js .hdr__nav { clip-path: circle(0 at 40px 36px); }
.js .hdr__nav[data-open] { clip-path: circle(150vmax at calc(100% - 40px) 36px); transition: clip-path 720ms cubic-bezier(0.65, 0, 0.35, 1), opacity 200ms ease, visibility 0s; }
[dir='rtl'].js .hdr__nav[data-open] { clip-path: circle(150vmax at 40px 36px); }
.js .hdr__nav .hdr__item, .js .hdr__nav .hdr__mobile { opacity: 0; transform: translateY(18px); transition: opacity 400ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.js .hdr__nav[data-open] .hdr__item, .js .hdr__nav[data-open] .hdr__mobile { opacity: 1; transform: none; }
.js .hdr__nav[data-open] .hdr__item:nth-child(1) { transition-delay: 120ms; }
.js .hdr__nav[data-open] .hdr__item:nth-child(2) { transition-delay: 170ms; }
.js .hdr__nav[data-open] .hdr__item:nth-child(3) { transition-delay: 220ms; }
.js .hdr__nav[data-open] .hdr__item:nth-child(4) { transition-delay: 270ms; }
.js .hdr__nav[data-open] .hdr__item:nth-child(5) { transition-delay: 320ms; }
.js .hdr__nav[data-open] .hdr__mobile { transition-delay: 380ms; }
}
.ambient__glow--1 { animation: k-drift-a 26s ease-in-out infinite alternate; }
.ambient__glow--2 { animation: k-drift-b 32s ease-in-out infinite alternate; }
.ambient__glow--3 { animation: k-drift-c 38s ease-in-out infinite alternate; }
.page-hidden .ambient__glow, .page-hidden .hero__front .dev, .page-hidden .chip { animation-play-state: paused; }
@keyframes k-drift-a { to { transform: translate(8vmax, 6vmax) scale(1.12); } }
@keyframes k-drift-b { to { transform: translate(-7vmax, 5vmax) scale(0.9); } }
@keyframes k-drift-c { to { transform: translate(-6vmax, -4vmax) scale(1.18); } }
@media (prefers-reduced-data: reduce), (max-width: 699px) { .ambient__glow { animation: none; } }
@supports (animation-timeline: view()) {
.hdr__progress { animation: k-progress linear both; animation-timeline: scroll(root block); }
@keyframes k-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
}
@media (forced-colors: active) {
.lit { color: CanvasText; background: none; }
}
@media (prefers-reduced-motion: no-preference) {
.site-header { transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1); }
.site-header.is-hidden { transform: translateY(calc(-100% - 16px)); }
.site-header.is-hidden:focus-within { transform: none; }
.hdr__link, .hdr .icon-btn, .hdr__brand, .hdr__kbd { transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease; }
.mega__pvshot { transition: opacity 260ms ease, display 260ms allow-discrete; }
@starting-style { .mega__pvshot { opacity: 0; } }
.enhanced [data-words] .mw { overflow: clip; overflow-clip-margin: 0.12em; vertical-align: bottom; padding-block-end: 0.08em; margin-block-end: -0.08em; }
.enhanced [data-words] .mw > span { display: inline-block; transform: translateY(105%); transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1); }
.enhanced [data-words].is-in .mw > span { transform: none; }
.enhanced [data-words].is-in .mw:nth-child(2) > span { transition-delay: 50ms; }
.enhanced [data-words].is-in .mw:nth-child(3) > span { transition-delay: 100ms; }
.enhanced [data-words].is-in .mw:nth-child(4) > span { transition-delay: 150ms; }
.enhanced [data-words].is-in .mw:nth-child(5) > span { transition-delay: 200ms; }
.enhanced [data-words].is-in .mw:nth-child(6) > span { transition-delay: 250ms; }
.enhanced [data-words].is-in .mw:nth-child(7) > span { transition-delay: 300ms; }
.enhanced [data-words].is-in .mw:nth-child(8) > span { transition-delay: 350ms; }
.enhanced [data-words].is-in .mw:nth-child(9) > span { transition-delay: 400ms; }
.enhanced [data-words].is-in .mw:nth-child(n + 10) > span { transition-delay: 450ms; }
@media print { .enhanced [data-words] .mw > span { transform: none; } }
.deep__card, .search-hit, .free-list__item, .footer-store, .footer-status { transition: transform 300ms var(--k-ease), border-color 300ms var(--k-ease), box-shadow 300ms var(--k-ease); }
.palette[open] .palette__box { animation: k-pop 320ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.palette[open]::backdrop { animation: k-fade-plain 240ms ease both; }
@keyframes k-pop { from { opacity: 0; transform: translateY(-12px) scale(0.98); } }
@keyframes k-fade-plain { from { opacity: 0; } }
.cursor__ring > span { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease, border-color 200ms ease, opacity 200ms ease; }
.cursor__dot > span { transition: transform 180ms ease, background-color 180ms ease; }
.cursor { transition: opacity 200ms ease; }
.footer-status__dot { animation: k-pulse 2.8s ease-in-out infinite; }
@keyframes k-pulse { 50% { transform: scale(0.7); opacity: 0.6; } }
.page-hidden .footer-status__dot { animation-play-state: paused; }
@supports (animation-timeline: view()) {
.footer-word { animation: k-word-mask linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
@keyframes k-word-mask { from { transform: translateY(40%); opacity: 0; clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
}
}
@media (prefers-reduced-motion: no-preference) {
:root { --e-out: cubic-bezier(0.16, 1, 0.3, 1); --e-io: cubic-bezier(0.65, 0, 0.35, 1); }
.aurora i { transition: --au-1 1400ms ease, --au-2 1400ms ease, --au-3 1400ms ease; will-change: transform; }
.aurora__a { animation: k-au-a 34s ease-in-out infinite alternate; }
.aurora__b { animation: k-au-b 41s ease-in-out infinite alternate; }
.aurora__c { animation: k-au-c 47s ease-in-out infinite alternate; }
@keyframes k-au-a { to { transform: translate(-9vmax, 7vmax) scale(1.14) rotate(8deg); } }
@keyframes k-au-b { to { transform: translate(10vmax, 5vmax) scale(0.88) rotate(-10deg); } }
@keyframes k-au-c { to { transform: translate(-6vmax, -7vmax) scale(1.2); } }
.page-hidden .aurora i { animation-play-state: paused; }
@media (max-width: 699px) { .aurora i { animation: none; transition: none; } }
.is-idle :is(.radar i, .nowifi, .asm__part > .cp, .sat > .cp, .hero__halo, .footer-status__dot, .ambient__glow),
.is-idle .hero__mouse::after,
.tier.is-idle, .tier.is-idle :is(.tier__bg i, .tier__ring i, .tiermark__suffix),
.tiermark--pro.is-idle .tiermark__suffix { animation-play-state: paused; }
html.rv-on .rv:not(.rv--stage, .rv--stagger) { opacity: 0; transform: translateY(56px) scale(0.98); transition: opacity 900ms var(--e-out), transform 1200ms var(--e-out); }
html.rv-on .rv.is-in:not(.rv--stage, .rv--stagger) { opacity: 1; transform: none; }
html.rv-on .rv--stagger > * { opacity: 0; transform: translateY(64px) scale(0.96); transition: opacity 900ms var(--e-out), transform 1300ms var(--e-out); }
html.rv-on .rv--stagger.is-in > * { opacity: 1; transform: none; }
html.rv-on .rv--stagger.is-in > :nth-child(2) { transition-delay: 70ms; }
html.rv-on .rv--stagger.is-in > :nth-child(3) { transition-delay: 140ms; }
html.rv-on .rv--stagger.is-in > :nth-child(4) { transition-delay: 210ms; }
html.rv-on .rv--stagger.is-in > :nth-child(5) { transition-delay: 280ms; }
html.rv-on .rv--stagger.is-in > :nth-child(6) { transition-delay: 350ms; }
html.rv-on .rv--stagger.is-in > :nth-child(7) { transition-delay: 420ms; }
html.rv-on .rv--stagger.is-in > :nth-child(n + 8) { transition-delay: 490ms; }
html.rv-on .rv--devices:not(.is-in) .showcase__slot--web { transform: translateY(120px) scale(0.86); opacity: 0; }
html.rv-on .rv--devices:not(.is-in) .showcase__slot--iphone { transform: translateX(-160px) rotate(-14deg); opacity: 0; }
html.rv-on .rv--devices:not(.is-in) .showcase__slot--android { transform: translateX(160px) rotate(14deg); opacity: 0; }
html.rv-on .rv--devices:not(.is-in) .showcase__slot--applewatch { transform: translate(-200px, 80px) rotate(-22deg); opacity: 0; }
html.rv-on .rv--devices:not(.is-in) .showcase__slot--wearos { transform: translate(200px, 80px) rotate(22deg); opacity: 0; }
html.rv-on .rv--devices .showcase__slot { transition: opacity 900ms var(--e-out), transform 1400ms var(--e-out); }
html.rv-on .rv--devices .showcase__slot:nth-child(2) { transition-delay: 90ms; }
html.rv-on .rv--devices .showcase__slot:nth-child(3) { transition-delay: 180ms; }
html.rv-on .rv--devices .showcase__slot:nth-child(4) { transition-delay: 270ms; }
html.rv-on .rv--devices .showcase__slot:nth-child(5) { transition-delay: 360ms; }
@media (min-width: 900px) and (min-height: 640px) {
.stack-card { position: sticky; inset-block-start: calc(120px + var(--i, 0) * 22px); }
.stack-card:nth-child(2) { --i: 1; }
.stack-card:nth-child(3) { --i: 2; }
.stack-card:nth-child(4) { --i: 3; }
}
.enhanced [data-words] .mw > span { transform: translateY(112%) rotate(7deg); transform-origin: 0 100%; transition-duration: 1150ms; transition-timing-function: var(--e-out); }
[dir='rtl'].enhanced [data-words] .mw > span { transform-origin: 100% 100%; transform: translateY(112%) rotate(-7deg); }
.enhanced [data-words].is-in .mw > span { transform: none; }
.hero__title .w { animation: k-word 1000ms var(--e-out) both; }
.hero__title .w:nth-child(2) { animation-delay: 70ms; }
.hero__title .w:nth-child(3) { animation-delay: 140ms; }
.hero__title .w:nth-child(4) { animation-delay: 210ms; }
.hero__title .w:nth-child(5) { animation-delay: 280ms; }
.hero__title .w:nth-child(6) { animation-delay: 350ms; }
.hero__title .w:nth-child(7) { animation-delay: 420ms; }
.hero__title .w:nth-child(n + 8) { animation-delay: 490ms; }
@keyframes k-word { from { opacity: 0.01; transform: translateY(0.5em) rotate(3deg); } }
.rise { animation: k-rise 1000ms var(--e-out) 360ms both; }
.hero__note.rise { animation-delay: 560ms; }
@keyframes k-rise { from { opacity: 0.01; transform: translateY(22px); } }
.hero__stage { animation: k-stage-in 1500ms var(--e-out) 120ms both; }
@keyframes k-stage-in { from { transform: translateY(60px) scale(0.9) rotateX(10deg); } }
.asm, .veil { display: block; }
.hero__halo { animation: k-spin 80s linear infinite; }
@keyframes k-spin { to { rotate: 360deg; } }
.hero__mouse::after { animation: k-wheel 2.2s ease-in-out infinite; }
@keyframes k-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
.page-hidden .hero__halo, .page-hidden .hero__mouse::after { animation-play-state: paused; }
.asm__part > .cp, .sat > .cp { animation: k-bob 7s ease-in-out infinite; }
.asm__part:nth-child(even) > .cp, .sat--b > .cp { animation-duration: 8.5s; animation-direction: reverse; }
.sat--c > .cp { animation-duration: 9.5s; }
@keyframes k-bob { 50% { transform: translateY(-10px); } }
.page-hidden :is(.asm__part, .sat) > .cp { animation-play-state: paused; }
.asm__part--home-map { --fx: translate3d(-10%, 4%, 60px) rotate(-3deg) scale(0.96); }
.asm__part--home-place { --fx: translate3d(-16%, -46%, 140px) rotate(-3deg) scale(1.08); }
.asm__part--home-headline { --fx: translate3d(-28%, 120%, 110px) rotate(2deg) scale(1.04); }
.asm__part--home-sos { --fx: translate3d(-70%, 40%, 180px) rotate(-6deg) scale(1.1); }
.asm__part--home-family { --fx: translate3d(18%, 90%, 120px) rotate(3deg) scale(1.06); }
.asm__part--home-tools { --fx: translate3d(120%, 20%, 150px) rotate(6deg) scale(1.1); }
.sat--a { --fx: translate3d(-18%, 26%, 60px) rotate(-6deg); }
.sat--b { --fx: translate3d(-30%, -30%, -80px) rotate(-10deg); }
.sat--c { --fx: translate3d(30%, -18%, 40px) rotate(8deg); }
@media (max-width: 899px), (max-height: 559px) {
.asm__part { animation: k-asm-load 1700ms var(--e-io) both; }
.asm__part[data-i='1'] { animation-delay: 650ms; }
.asm__part[data-i='0'] { animation-delay: 600ms; }
.asm__part[data-i='2'] { animation-delay: 700ms; }
.asm__part[data-i='3'] { animation-delay: 750ms; }
.asm__part[data-i='4'] { animation-delay: 800ms; }
.asm__part[data-i='5'] { animation-delay: 850ms; }
@keyframes k-asm-load { 0% { transform: var(--fx); } 80% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
.asm__part > .cp { animation: none; }
.veil { animation: k-veil-load 2600ms linear both; }
@keyframes k-veil-load { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
.hero__phone { animation: k-phone-load 2400ms var(--e-out) 200ms both; }
@keyframes k-phone-load { from { transform: rotateY(-20deg) rotateX(10deg) scale(0.9); } }
.sat { animation: k-sat-load 1600ms var(--e-out) both; }
.sat--a { animation-delay: 900ms; }
.sat--b { animation-delay: 1050ms; }
.sat--c { animation-delay: 1200ms; }
@keyframes k-sat-load { from { transform: var(--fx) scale(0.8); opacity: 0; } }
html.rv-on .rv--stage .part { transition: transform 1300ms var(--e-out), opacity 800ms var(--e-out); }
html.rv-on .rv--stage:not(.is-in) .part { transform: var(--fx); opacity: 0; }
html.rv-on .rv--stage.is-in .part:nth-child(2) { transition-delay: 120ms; }
html.rv-on .rv--stage.is-in .part:nth-child(3) { transition-delay: 240ms; }
html.rv-on .rv--stage.is-in .part:nth-child(4) { transition-delay: 360ms; }
html.rv-on .rv--stage.is-in .part:nth-child(5) { transition-delay: 480ms; }
html.rv-on .rv--stage.is-in .part:nth-child(6) { transition-delay: 600ms; }
}
.stage--before .part--plan-summary { --fx: translate(-40%, -70%) rotate(-14deg) scale(0.8); }
.stage--before .part--kit-summary { --fx: translate(70%, -20%) rotate(12deg) scale(0.86); }
.stage--before .part--kit-item { --fx: translate(-80%, 120%) rotate(-10deg); }
.stage--before .part--home-tools { --fx: translate(160%, 120%) rotate(12deg); }
.stage--during .part--map-area { --fx: scale(0.6) rotateX(40deg) translateY(30%); }
.stage--during .part--map-top { --fx: translateY(-260%) scale(0.9); }
.stage--during .part--status-quake { --fx: translate(110%, 10%) rotate(10deg); }
.stage--during .part--alertcard-card { --fx: translate(-110%, 20%) rotate(-10deg); }
.stage--during .part--home-sos { --fx: translateY(260%) scale(0.92); }
.stage--offline .part--notes-note { --fx: perspective(900px) rotateY(-80deg) translateX(30%); }
.stage--offline .part--guide-during { --fx: perspective(900px) rotateY(76deg) translateX(-30%); }
.stage--offline .part--learn-step { --fx: perspective(900px) rotateX(-70deg) translateY(60%); }
.stage--family .part--family-tasks { --fx: translate(50%, -40%) rotate(10deg) scale(0.9); }
.stage--family .part--family-members { --fx: translateY(80%) scale(0.86) rotate(-4deg); }
.stage--offline .part { transform-origin: 50% 50%; }
.radar i:not(:first-child) { animation: k-radar 4.6s var(--e-out) infinite; }
.radar i:nth-child(3) { animation-delay: 2.3s; }
@keyframes k-radar { from { transform: scale(0.3); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
.nowifi { animation: k-blink 3.4s ease-in-out infinite; }
@keyframes k-blink { 50% { transform: scale(0.94); } }
.page-hidden :is(.radar i, .nowifi) { animation-play-state: paused; }
@media (min-width: 900px) and (min-height: 560px) {
html:is(.sdt, .sdt-js) .sc--pin { block-size: var(--len, 260svh); }
html:is(.sdt, .sdt-js) .sc--pin > .sc__pin { position: sticky; inset-block-start: 0; block-size: 100svh; min-block-size: 0; display: grid; align-items: center; overflow: clip; padding-block: 76px 24px; }
html:is(.sdt, .sdt-js) .sc--hero { --len: 210svh; }
html:is(.sdt, .sdt-js) .ch--before { --len: 290svh; }
html:is(.sdt, .sdt-js) .ch--during { --len: 330svh; }
html:is(.sdt, .sdt-js) .ch--offline { --len: 270svh; }
html:is(.sdt, .sdt-js) .ch--family { --len: 270svh; }
html:is(.sdt, .sdt-js) .ch__stage { inline-size: min(100%, 600px, 74svh); }
html:is(.sdt, .sdt-js) .hero__stage { inline-size: min(100%, 640px, 82svh); }
@supports (animation-timeline: view()) {
html.sdt [data-scene] { view-timeline-name: --sc; view-timeline-axis: block; }
html.sdt [data-scene] .sx { animation-duration: auto; animation-timeline: --sc; animation-range: contain 0% contain 100%; }
html.sdt [data-scene='cover'] .sx { animation-range: cover 0% cover 100%; }
}
html.sdt-js [data-scene] .sx { animation-duration: 1s; animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s); }
html:is(.sdt, .sdt-js) .sx { animation-timing-function: linear; animation-fill-mode: both; }
html:is(.sdt, .sdt-js) .x-phone { animation-name: k-x-phone; }
@keyframes k-x-phone { 0% { transform: rotateY(-24deg) rotateX(12deg) rotateZ(3deg) scale(0.9); } 62% { transform: none; } 100% { transform: translateY(-4%) scale(0.94); } }
html:is(.sdt, .sdt-js) .x-asm { animation-name: k-x-asm; }
@keyframes k-x-asm { 0%, 6% { transform: var(--fx); opacity: 1; } 62% { transform: none; opacity: 1; } 74%, 100% { transform: none; opacity: 0; } }
html:is(.sdt, .sdt-js) .x-veil { animation-name: k-x-veil; }
@keyframes k-x-veil { 0%, 50% { opacity: 1; } 64%, 100% { opacity: 0; } }
html:is(.sdt, .sdt-js) .x-sat { animation-name: k-x-sat; }
@keyframes k-x-sat { 0%, 8% { transform: none; opacity: 1; } 56%, 100% { transform: var(--fx) scale(0.7); opacity: 0; } }
html:is(.sdt, .sdt-js) .x-halo { animation-name: k-x-halo; }
@keyframes k-x-halo { from { transform: scale(0.8); opacity: 0.6; } to { transform: scale(1.35); opacity: 1; } }
html:is(.sdt, .sdt-js) .sc--hero .hero__copy { animation: k-x-copy linear both; }
html.sdt .sc--hero .hero__copy { animation-timeline: --sc; animation-range: contain 0% contain 100%; }
html.sdt-js .sc--hero .hero__copy { animation-duration: 1s; animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s); }
@keyframes k-x-copy { 0%, 62% { transform: none; } 100% { transform: translateY(-16%) scale(0.97); } }
html:is(.sdt, .sdt-js) .x-w1 { animation-name: k-w1; }
html:is(.sdt, .sdt-js) .x-w2 { animation-name: k-w2; }
html:is(.sdt, .sdt-js) .x-w3 { animation-name: k-w3; }
html:is(.sdt, .sdt-js) .x-w4 { animation-name: k-w4; }
html:is(.sdt, .sdt-js) .x-w5 { animation-name: k-w5; }
@keyframes k-w1 { 0%, 4% { transform: var(--fx); opacity: 0; } 26%, 100% { transform: none; opacity: 1; } }
@keyframes k-w2 { 0%, 18% { transform: var(--fx); opacity: 0; } 40%, 100% { transform: none; opacity: 1; } }
@keyframes k-w3 { 0%, 32% { transform: var(--fx); opacity: 0; } 54%, 100% { transform: none; opacity: 1; } }
@keyframes k-w4 { 0%, 46% { transform: var(--fx); opacity: 0; } 68%, 100% { transform: none; opacity: 1; } }
@keyframes k-w5 { 0%, 58% { transform: var(--fx); opacity: 0; } 80%, 100% { transform: none; opacity: 1; } }
html:is(.sdt, .sdt-js) .x-drift { animation-name: k-drift; }
@keyframes k-drift { from { transform: translateY(5%) scale(0.97); } to { transform: translateY(-5%) scale(1.02); } }
html:is(.sdt, .sdt-js) .x-num { animation-name: k-num; }
@keyframes k-num { 0% { transform: translateY(40%) scale(0.7); opacity: 0; } 22% { opacity: 1; } 100% { transform: translateY(-40%) scale(1.15); opacity: 0.6; } }
html:is(.sdt, .sdt-js) .x-inkglow { animation-name: k-inkglow; }
@keyframes k-inkglow { from { transform: scale(0.5) translate(10%, -10%); opacity: 0.2; } 60% { opacity: 1; } to { transform: scale(1.3) translate(-20%, 20%); opacity: 0.8; } }
html:is(.sdt, .sdt-js) .x-orbit { animation-name: k-orbit; }
html:is(.sdt, .sdt-js) .x-orbit2 { animation-name: k-orbit2; }
@keyframes k-orbit { from { transform: rotate(-30deg) scale(0.8); } to { transform: rotate(150deg) scale(1.05); } }
@keyframes k-orbit2 { from { transform: rotate(40deg) scale(0.7); } to { transform: rotate(-120deg) scale(1); } }
html:is(.sdt, .sdt-js) .x-bloom { animation-name: k-bloom; }
@keyframes k-bloom { 0%, 30% { transform: scale(0.4); opacity: 0; } 80%, 100% { transform: scale(1.25); opacity: 1; } }
html:is(.sdt, .sdt-js) .ch__ink { animation: k-ink-open linear both; }
html.sdt .ch__ink { animation-timeline: --sc; animation-range: contain 0% contain 100%; }
html.sdt-js .ch__ink { animation-duration: 1s; animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s); }
@keyframes k-ink-open { 0% { clip-path: inset(10% 5% round 56px); } 14%, 88% { clip-path: inset(0 0 round 0); } 100% { clip-path: inset(0 3% 6% round 44px); } }
html:is(.sdt, .sdt-js) .x-lit {
color: transparent;
background-image: linear-gradient(var(--s-text), var(--s-text)), linear-gradient(var(--s-text-3), var(--s-text-3));
background-repeat: no-repeat;
background-size: 0% 100%, 100% 100%;
-webkit-background-clip: text;
background-clip: text;
animation-name: k-lit;
}
@keyframes k-lit { 0%, 24% { background-size: 0% 100%, 100% 100%; } 64%, 100% { background-size: 100% 100%, 100% 100%; } }
html:is(.sdt, .sdt-js) .x-mglow { animation-name: k-mglow; }
@keyframes k-mglow { from { transform: scale(0.6) translateY(20%); opacity: 0; } 50% { opacity: 1; } to { transform: scale(1.4) translateY(-20%); opacity: 0.2; } }
html:is(.sdt, .sdt-js) .x-tlfill { animation-name: k-tl; }
@keyframes k-tl { 0%, 18% { transform: scaleY(0); } 74%, 100% { transform: scaleY(1); } }
html:is(.sdt, .sdt-js) .x-panel { animation-name: k-panel; }
@keyframes k-panel { 0% { transform: scale(0.84) translateY(10%); clip-path: inset(6% 10% round 64px); } 42%, 100% { transform: none; clip-path: inset(0 round 32px); } }
html:is(.sdt, .sdt-js) .x-dla { animation-name: k-dla; }
html:is(.sdt, .sdt-js) .x-dlb { animation-name: k-dlb; }
@keyframes k-dla { 0%, 14% { transform: translate(30%, 40%) rotate(10deg); opacity: 0; } 48%, 100% { transform: none; opacity: 1; } }
@keyframes k-dlb { 0%, 24% { transform: translateY(120%) rotate(-6deg); opacity: 0; } 56%, 100% { transform: none; opacity: 1; } }
html:is(.sdt, .sdt-js) .x-close { animation-name: k-close; }
@keyframes k-close { 0% { transform: scale(0.7) translateY(30%); opacity: 0; } 46%, 100% { transform: none; opacity: 1; } }
}
@media (max-width: 899px), (max-height: 559px) {
html.rv-on .tl__fill { transform: scaleY(0); transition: transform 1600ms var(--e-io); }
html.rv-on .tl__body.is-in .tl__fill { transform: none; }
}
}
@media (prefers-reduced-motion: no-preference) {
html.rv-on .feat__art.rv:not(.is-in) { opacity: 0; transform: perspective(1200px) rotateY(-28deg) rotateX(6deg) translateY(70px) scale(0.9); }
html.rv-on .feat:nth-child(even) .feat__art.rv:not(.is-in) { transform: perspective(1200px) rotateY(28deg) rotateX(6deg) translateY(70px) scale(0.9); }
html.rv-on .feat__art.rv { transition: opacity 900ms var(--e-out), transform 1500ms var(--e-out); }
html.rv-on :is(.guide-tile, .step, .gloss__item, .free-list__item, .hazard-card, .tier, .source):nth-child(even).rv { transition-delay: 90ms; }
}
html { background: var(--s-bg); }
body {
background: var(--s-bg);
color: var(--s-text);
font-size: 1.0625rem;
overflow-x: clip;
}
a { color: var(--s-brand-ink); }
::selection { background: var(--s-brand); color: var(--s-on-brand); }
:focus-visible { outline-color: var(--s-brand); }
main { display: block; outline: none; }
.site-header { view-transition-name: site-header; }
.container { inline-size: 100%; max-inline-size: var(--k-container); margin-inline: auto; padding-inline: var(--k-gutter); }
.container--wide { max-inline-size: 1320px; }
.container--narrow { max-inline-size: 820px; }
.section { position: relative; padding-block: clamp(72px, 11vw, 152px); }
.section--tight { padding-block: clamp(40px, 6vw, 80px); }
.section--layer { background: var(--s-bg-2); }
.cv { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
.stack > * + * { margin-block-start: var(--k-space-16); }
.stack-lg > * + * { margin-block-start: var(--k-space-24); }
.display {
font-size: clamp(2.4rem, 1.2rem + 4.2vw, 4.9rem);
line-height: 1.02;
letter-spacing: -0.04em;
font-weight: 700;
}
.h2 {
font-size: clamp(2rem, 1.05rem + 3.4vw, 3.9rem);
line-height: 1.05;
letter-spacing: -0.035em;
}
.h3 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); letter-spacing: -0.02em; }
.lead { font-size: clamp(1.125rem, 1rem + 0.45vw, 1.35rem); color: var(--s-text-2); line-height: 1.55; }
.muted { color: var(--s-text-2); }
.fine-print { font-size: 0.875rem; color: var(--s-text-3); }
.grad {
background: linear-gradient(100deg, var(--s-grad-a) 0%, var(--s-grad-b) 45%, var(--s-grad-c) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
@media (forced-colors: active) { .grad { color: CanvasText; background: none; } }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-block-end: var(--k-space-16);
padding: 6px 14px 6px 10px;
border: 1px solid var(--s-line-2);
border-radius: var(--k-radius-full);
background: var(--s-glass);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--s-text-2);
}
.eyebrow::before {
content: '';
inline-size: 8px;
block-size: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--s-grad-a), var(--s-grad-c));
box-shadow: 0 0 0 4px var(--s-glow-blue);
}
.section-head { max-inline-size: 760px; margin-block-end: clamp(40px, 6vw, 72px); }
.section-head .lead { margin-block-start: var(--k-space-20); }
.section-head--center { margin-inline: auto; text-align: center; }
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--k-radius-full);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.5;
white-space: nowrap;
color: var(--s-brand-ink);
background: var(--s-brand-soft);
border: 1px solid color-mix(in srgb, var(--s-brand) 30%, transparent);
vertical-align: middle;
}
.badge--planned { color: var(--s-warn); background: var(--s-warn-soft); border-color: color-mix(in srgb, var(--s-warn) 35%, transparent); }
.badge--exp { color: var(--s-text-2); background: var(--s-bg-3); border-color: var(--s-line-2); }
.badge--ink { color: #fff; background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.3); }
.art-note { margin-block-start: var(--k-space-24); font-size: 0.8125rem; color: var(--s-text-3); text-align: center; }
.art-tag { display: inline-block; margin-block-start: 10px; font-size: 0.75rem; color: var(--s-text-3); }
.checklist { list-style: none; display: grid; gap: 12px; margin-block-start: var(--k-space-20); }
.checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--s-text-2); }
.checklist .k-icon { margin-block-start: 3px; color: var(--s-safe); flex: none; }
.card {
position: relative;
padding: clamp(22px, 3vw, 32px);
border: 1px solid var(--s-line);
border-radius: var(--k-shape-card);
background: var(--s-surface);
box-shadow: var(--s-shadow-1);
}
.card h2, .card h3 { margin-block-end: 10px; }
.card p { color: var(--s-text-2); }
.card--link { display: block; color: inherit; text-decoration: none; }
.card--link:hover { border-color: color-mix(in srgb, var(--s-brand) 45%, var(--s-line)); }
.card__more { display: inline-flex; margin-block-start: 14px; color: var(--s-brand-ink); }
.h-card { font-size: 1.1875rem; }
.h-section { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-block-end: 14px; }
.icon-well {
display: grid;
place-items: center;
inline-size: 48px;
block-size: 48px;
margin-block-end: 18px;
border-radius: 16px;
color: #fff;
background: linear-gradient(140deg, #15327a, #1f5eff 60%, #12b5c9);
box-shadow: 0 12px 24px -12px rgb(31 94 255 / 0.7);
}
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.callout {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 20px 22px;
border-radius: var(--k-radius-xl);
border: 1px solid var(--s-line-2);
background: var(--s-surface-2);
}
.callout > .k-icon { color: var(--s-brand-ink); flex: none; margin-block-start: 2px; }
.callout--warning { background: var(--s-warn-soft); border-color: color-mix(in srgb, var(--s-warn) 35%, transparent); }
.callout--warning > .k-icon { color: var(--s-warn); }
.callout h2 { font-size: 1.25rem; margin-block-end: 6px; }
.callout p { color: var(--s-text-2); }
.callout__action { margin-block-start: 14px; }
.notice-strip { border-block-end: 1px solid var(--s-line); background: var(--s-bg-2); }
.notice-strip p { display: flex; gap: 10px; align-items: center; padding-block: 10px; font-size: 0.875rem; color: var(--s-text-2); }
.translation-note { background: var(--s-warn-soft); border-block-end: 1px solid var(--s-line); }
.translation-note p { display: flex; gap: 10px; align-items: center; padding-block: 10px; font-size: 0.9375rem; }
.translation-note p > span { unicode-bidi: plaintext; }
.site-header {
position: sticky;
inset-block-start: 0;
z-index: 50;
padding-block-start: 12px;
padding-inline: var(--k-gutter);
pointer-events: none;
}
.hdr {
position: relative;
display: flex;
align-items: center;
gap: 8px;
max-inline-size: 1240px;
min-block-size: 64px;
margin-inline: auto;
padding-block: 8px;
padding-inline: 18px 8px;
border-radius: 22px;
pointer-events: auto;
}
.hdr::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
border: 1px solid var(--s-glass-line);
background: var(--s-glass);
-webkit-backdrop-filter: saturate(170%) blur(18px);
backdrop-filter: saturate(170%) blur(18px);
box-shadow: var(--s-shadow-1);
}
.is-compact .hdr { max-inline-size: 1180px; min-block-size: 58px; }
.is-compact .hdr__link { padding: 0 12px; }
.is-compact .hdr::before { background: var(--s-glass-strong); box-shadow: var(--s-shadow-2); }
.hdr__brand { display: inline-flex; flex: none; border-radius: 12px; text-decoration: none; margin-inline-end: 8px; }
.hdr__nav { flex: 1; display: flex; align-items: center; min-inline-size: 0; }
.hdr__list { position: relative; display: flex; align-items: center; gap: 2px; list-style: none; }
.hdr__item { position: static; }
.hdr__link {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 4px;
min-block-size: 44px;
padding: 0 14px;
border-radius: 14px;
color: var(--s-text-2);
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
list-style: none;
}
.hdr__link::-webkit-details-marker { display: none; }
.hdr__link:hover, .hdr__link[aria-current='page'], .hdr__link[data-active], details[open] > .hdr__link { color: var(--s-text); }
.hdr__link .k-icon { opacity: 0.7; }
details[open] > .hdr__link .k-icon { transform: rotate(180deg); }
.hdr__biz { margin-inline-start: 6px; padding-inline-start: 8px; border-inline-start: 1px solid var(--s-line-2); }
.hdr__indicator {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: var(--ind-w, 0px);
transform: translateX(var(--ind-x, 0px));
border-radius: 14px;
background: var(--s-brand-soft);
border: 1px solid color-mix(in srgb, var(--s-brand) 22%, transparent);
opacity: var(--ind-o, 0);
pointer-events: none;
}
.hdr__tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; flex: none; }
.hdr__cta { margin-inline-start: 4px; }
.hdr__progress {
position: absolute;
inset-inline: 22px;
inset-block-end: -1px;
block-size: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--s-grad-a), var(--s-grad-b), var(--s-grad-c));
transform: scaleX(var(--progress, 0));
transform-origin: 0 50%;
opacity: 0;
}
[dir='rtl'] .hdr__progress { transform-origin: 100% 50%; }
.is-compact .hdr__progress { opacity: 1; }
.icon-btn {
display: inline-grid;
place-items: center;
min-inline-size: 44px;
block-size: 44px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: 14px;
background: transparent;
color: var(--s-text-2);
font: inherit;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
list-style: none;
}
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn:hover, details[open] > .icon-btn { color: var(--s-text); background: var(--s-bg-3); }
.icon-btn--label { grid-auto-flow: column; gap: 6px; }
.mega { position: static; }
.mega__panel {
position: absolute;
inset-block-start: calc(100% + 14px);
inset-inline-start: 50%;
translate: -50% 0;
inline-size: min(880px, calc(100vw - 2 * var(--k-gutter)));
padding: 14px;
border: 1px solid var(--s-glass-line);
border-radius: 26px;
background: var(--s-glass-strong);
-webkit-backdrop-filter: saturate(170%) blur(22px);
backdrop-filter: saturate(170%) blur(22px);
box-shadow: var(--s-shadow-2);
display: grid;
grid-template-columns: 1fr 260px;
gap: 14px;
}
[dir='rtl'] .mega__panel { translate: 50% 0; }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; list-style: none; }
.mega__link {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 12px;
border-radius: 16px;
color: var(--s-text);
text-decoration: none;
}
.mega__link:hover, .mega__link:focus-visible { background: var(--s-bg-3); }
.mega__link strong { display: block; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; }
.mega__link small { display: block; margin-block-start: 3px; font-size: 0.8125rem; color: var(--s-text-3); line-height: 1.4; }
.mega__ico {
display: grid;
place-items: center;
flex: none;
inline-size: 40px;
block-size: 40px;
border-radius: 12px;
color: var(--s-brand-ink);
background: var(--s-brand-soft);
}
.mega__aside {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
padding: 20px;
border-radius: 20px;
color: var(--s-ink-text);
background: var(--s-ink-panel);
overflow: hidden;
}
.mega__aside p { color: var(--s-ink-text-2); font-size: 0.9375rem; }
.mega__aside strong { font-size: 1.125rem; }
.mega__aside a { color: #fff; font-weight: 500; display: inline-flex; gap: 8px; align-items: center; }
.menu { position: relative; }
.menu__panel {
position: absolute;
inset-block-start: calc(100% + 12px);
inset-inline-end: 0;
z-index: 60;
min-inline-size: 220px;
max-block-size: min(70vh, 520px);
overflow: auto;
padding: 8px;
border: 1px solid var(--s-glass-line);
border-radius: 20px;
background: var(--s-glass-strong);
-webkit-backdrop-filter: blur(22px);
backdrop-filter: blur(22px);
box-shadow: var(--s-shadow-2);
list-style: none;
}
.menu__title { padding: 8px 12px 6px; font-size: 0.75rem; color: var(--s-text-3); }
.menu__item {
display: flex;
align-items: center;
gap: 10px;
inline-size: 100%;
min-block-size: 44px;
padding: 8px 12px;
border: 0;
border-radius: 12px;
background: transparent;
color: var(--s-text);
font: inherit;
font-size: 0.9375rem;
text-align: start;
text-decoration: none;
cursor: pointer;
}
.menu__item small { margin-inline-start: auto; color: var(--s-text-3); font-size: 0.75rem; }
.menu__item:hover, .menu__item:focus-visible { background: var(--s-bg-3); }
.menu__item[aria-current='true'], .menu__item[aria-pressed='true'] { color: var(--s-brand-ink); background: var(--s-brand-soft); }
.theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.theme-seg .menu__item { flex-direction: column; gap: 6px; padding: 12px 8px; font-size: 0.8125rem; text-align: center; justify-content: center; }
.menu-toggle { display: none; }
.burger { position: relative; inline-size: 20px; block-size: 14px; }
.burger span { position: absolute; inset-inline: 0; block-size: 2px; border-radius: 2px; background: currentColor; }
.burger span:nth-child(1) { inset-block-start: 0; }
.burger span:nth-child(2) { inset-block-start: 6px; }
.burger span:nth-child(3) { inset-block-start: 12px; }
[aria-expanded='true'] .burger span:nth-child(1) { inset-block-start: 6px; transform: rotate(45deg); }
[aria-expanded='true'] .burger span:nth-child(2) { opacity: 0; }
[aria-expanded='true'] .burger span:nth-child(3) { inset-block-start: 6px; transform: rotate(-45deg); }
.hdr__mobile { display: none; }
@media (max-width: 1239px) {
.hdr__signin { display: none; }
}
@media (max-width: 1099px) {
.site-header { padding-block-start: 8px; }
.hdr { min-block-size: 58px; padding-block: 6px; padding-inline: 14px 6px; }
.menu-toggle { display: inline-grid; }
.hdr__cta, .hdr__tools .lang-menu, .hdr__tools .theme-menu { display: none; }
.hdr__indicator { display: none; }
.js .hdr__nav {
position: fixed;
inset: 0;
z-index: -2;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 96px var(--k-gutter) 32px;
overflow-y: auto;
background: var(--s-bg);
visibility: hidden;
opacity: 0;
}
.js .hdr__nav[data-open] { visibility: visible; opacity: 1; }
.hdr__list { flex-direction: column; align-items: stretch; gap: 2px; }
.hdr__biz { margin: 8px 0 0; padding: 8px 0 0; border-inline-start: 0; border-block-start: 1px solid var(--s-line-2); }
.hdr__link { inline-size: 100%; min-block-size: 56px; padding: 0 8px; font-size: 1.5rem; color: var(--s-text); justify-content: space-between; letter-spacing: -0.02em; }
.mega__panel { position: static; translate: none; inline-size: auto; grid-template-columns: 1fr; padding: 4px 0 12px; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[dir='rtl'] .mega__panel { translate: none; }
.mega__grid { grid-template-columns: 1fr; }
.mega__aside { display: none; }
.hdr__mobile { display: grid; gap: 12px; margin-block-start: auto; padding-block-start: 24px; }
.hdr__mobile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hdr__mobile .menu__panel { position: static; box-shadow: none; margin-block-start: 8px; }
.hdr__mobile .icon-btn { inline-size: 100%; block-size: 52px; border: 1px solid var(--s-line-2); border-radius: var(--k-radius-full); background: var(--s-glass); font-size: 0.9375rem; color: var(--s-text); }
.hdr__mobile .menu { display: block; }
html.menu-open { overflow: hidden; }
html:not(.js) .hdr { flex-wrap: wrap; }
html:not(.js) .hdr__nav { flex-basis: 100%; }
html:not(.js) .menu-toggle { display: none; }
html:not(.js) .hdr__list { flex-direction: row; flex-wrap: wrap; }
html:not(.js) .hdr__link { font-size: 1rem; inline-size: auto; min-block-size: 44px; }
html:not(.js) .hdr__mobile { display: none; }
}
.site-footer { position: relative; overflow: hidden; padding-block: 72px 32px; border-block-start: 1px solid var(--s-line); background: var(--s-bg-2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer-brand p { margin-block-start: 16px; color: var(--s-text-2); max-inline-size: 300px; }
.footer-col h2 { font-size: 0.8125rem; font-weight: 500; color: var(--s-text-3); margin-block-end: 14px; letter-spacing: 0.02em; }
.footer-col ul { list-style: none; display: grid; gap: 4px; }
.footer-col a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 36px; color: var(--s-text); text-decoration: none; }
.footer-col a:hover { color: var(--s-brand-ink); text-decoration: underline; }
.footer-notice { margin-block-start: 48px; padding: 16px 20px; border-radius: 18px; border: 1px solid var(--s-line-2); background: var(--s-surface); display: flex; gap: 12px; align-items: flex-start; color: var(--s-text-2); font-size: 0.9375rem; }
.footer-notice .k-icon { color: var(--s-warn); flex: none; margin-block-start: 2px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-block-start: 28px; padding-block-start: 24px; border-block-start: 1px solid var(--s-line); font-size: 0.875rem; color: var(--s-text-3); }
.footer-word {
display: block;
margin-block: 56px -0.28em;
font-family: var(--k-font-wordmark);
font-weight: 800;
font-size: clamp(5rem, 23vw, 20rem);
line-height: 1;
letter-spacing: -0.04em;
text-align: center;
color: transparent;
background: linear-gradient(180deg, var(--s-line-2), transparent 85%);
-webkit-background-clip: text;
background-clip: text;
user-select: none;
}
@media (forced-colors: active) { .footer-word { display: none; } }
@media (max-width: 899px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
.lang-band { background: var(--s-brand-soft); border-block-end: 1px solid var(--s-line); }
.lang-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 6px; font-size: 0.9375rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; font-size: 0.875rem; color: var(--s-text-3); }
.crumbs li + li::before { content: '/'; margin-inline-end: 6px; color: var(--s-text-3); }
.crumbs a { color: var(--s-text-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current='page'] { color: var(--s-text); }
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(48px, 8vw, 112px) clamp(40px, 6vw, 72px); }
.page-hero .crumbs { margin-block-end: 28px; }
.page-hero h1 { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.75rem); line-height: 1.04; letter-spacing: -0.04em; max-inline-size: 18ch; }
.page-hero .lead { margin-block-start: 22px; max-inline-size: 720px; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px; }
.ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient__grid {
position: absolute;
inset: -1px;
background-image: linear-gradient(var(--s-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--s-grid-line) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%);
}
.ambient__glow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); }
.ambient__glow--1 { inline-size: 46vmax; block-size: 46vmax; inset-block-start: -20vmax; inset-inline-start: -10vmax; --glow: var(--s-glow-blue); }
.ambient__glow--2 { inline-size: 34vmax; block-size: 34vmax; inset-block-start: -8vmax; inset-inline-end: -12vmax; --glow: var(--s-glow-teal); }
.ambient__glow--3 { inline-size: 26vmax; block-size: 26vmax; inset-block-start: 18vmax; inset-inline-start: 30vw; --glow: var(--s-glow-green); }
@media (prefers-reduced-data: reduce) { .ambient__glow { opacity: 0.5; } }
@media (forced-colors: active) { .ambient { display: none; } }