:root { --base: #0e266a; --base-2: #13318d; --base-3: #1a40b5; --on-base: #dde8ff; --on-base-sub: #95b6ff; --accent: #296ce8; --accent-rgb: 41, 108, 232; --accent-ink: #2563eb; --accent-hover: #2250df; --accent-hover-2: #1a5ad6; --accent-wash: #f0f5ff; --accent-band: #dde8ff; --ink: #0f172a; --ink-2: #3d4b5f; --ink-3: #64748b; --rule: #e2e8f0; --rule-2: #cbd5e1; --paper: #fff; --bg: #f8fafc; --base-deep: #0a173b; --accent-soft-rgb: 41, 108, 232; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: Inter, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; font-size: 18px; line-height: 2; letter-spacing: 0.02em; } h1, h2, h3 { color: var(--ink); line-height: 1.4; letter-spacing: 0.01em; margin: 0; } a { color: var(--accent-ink); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 16px; font-weight: 600; line-height: 1; padding: 16px 26px; border-radius: 10px; text-decoration: none; cursor: pointer; border: 2px solid transparent; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); } .note-browser { margin-top: 24px; font-size: 14px; color: var(--ink-3); } .btn-line { background: #fff; color: var(--base-3); border-color: var(--rule-2); } .btn-line:hover { border-color: var(--accent); } .closing .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .btn-ghost:hover { border-color: #fff; } .link { color: var(--accent-ink); font-weight: 600; text-decoration: none; } .hero-link { color: var(--on-base); align-self: center; padding: 0 8px; } .hero-link:hover { color: #fff; } .link:hover { text-decoration: underline; } header.nav { background: var(--base); color: #fff; } @media (min-width: 761px) { header.nav { position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); } [id] { scroll-margin-top: 88px; } } header.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { color: #fff; text-decoration: none; display: flex; align-items: baseline; gap: 12px; } .brand b { font-size: 20px; letter-spacing: 0.01em; } .brand span { font-size: 13px; color: var(--on-base-sub); } .brand .mark { align-self: center; width: 22px; height: 20px; flex: none; margin-right: -3px; fill: none; stroke: currentColor; stroke-width: 6.5; stroke-linecap: round; } .brand .beta { align-self: center; margin-left: -4px; padding: 1px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.5; } .brand { display: grid; grid-template-columns: auto auto auto; justify-content: start; align-items: center; column-gap: 10px; row-gap: 1px; } .brand .mark { grid-row: 1 / span 2; width: 26px; height: 24px; margin: 0; vertical-align: 0; } .brand b { grid-column: 2; line-height: 1.2; } .brand .beta { grid-column: 3; justify-self: start; margin-left: 0; vertical-align: 0; } .brand span { grid-column: 2 / span 2; margin-left: 0; font-size: 11.5px; line-height: 1.3; letter-spacing: .05em; } nav ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; font-size: 14px; } nav a { color: var(--on-base); text-decoration: none; } nav a:hover { color: #fff; } nav ul { align-items: center; } nav a.nav-cta { padding: 7px 16px; background: var(--accent); color: #fff; font-weight: 700; border-radius: 999px; } nav a.nav-cta:hover { background: var(--accent-hover-2); color: #fff; } .hero { background: var(--base); color: #fff; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; opacity: 0.5; background: repeating-linear-gradient( -36deg, rgba(var(--accent-rgb), 0) 0 50px, rgba(var(--accent-rgb), 0.35) 50px 51px ); } .hero .wrap { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; padding-top: 72px; padding-bottom: 88px; align-items: center; } .hero h1 { color: #fff; font-size: 46px; line-height: 1.35; font-weight: 700; } .hero .sub { color: var(--on-base); font-size: 18px; line-height: 1.95; margin: 22px 0 32px; max-width: 30em; } .hero .cta { display: flex; gap: 14px; flex-wrap: wrap; } .hero .meta { margin-top: 26px; font-size: 13px; color: var(--on-base-sub); line-height: 1.8; } .facts { border-bottom: 1px solid var(--rule); } .facts .wrap { display: grid; grid-template-columns: repeat(4, 1fr); } .fact { padding: 34px 22px 30px; border-left: 1px solid var(--rule); } .fact:first-child { border-left: 0; padding-left: 0; } .fact .v { font-size: 38px; font-weight: 700; color: var(--ink); line-height: 1.15; letter-spacing: -0.01em; } .fact .v small { font-size: 16px; font-weight: 600; margin-left: 2px; } .fact .v { white-space: nowrap; } @media (min-width: 901px) { .fact .k span { display: block; } } .fact .k.kw { white-space: nowrap; } .fact .v small.pre { margin: 0 2px 0 0; font-size: 0.55em; } .fact .k { font-size: 14px; color: var(--ink-2); line-height: 1.7; margin-top: 8px; } .fact .s { font-size: 12px; color: var(--ink-3); line-height: 1.6; margin-top: 6px; } section.block { padding: 112px 0; } section.block.tint { background: var(--bg); } .block h2 { font-size: 34px; } .block .lead { font-size: 18px; color: var(--ink-2); margin: 18px 0 0; max-width: 40em; } .features { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; margin-top: 48px; } .feature { padding: 30px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 44px 1fr; gap: 18px; } .feature .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-wash); display: grid; place-items: center; } .feature .ico svg { width: 24px; height: 24px; stroke: var(--base-3); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .feature h3 { font-size: 19px; } .feature p { margin: 8px 0 0; font-size: 16px; line-height: 1.9; } .feature .src { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; margin-top: 8px; } .faq { margin-top: 40px; border-top: 1px solid var(--rule); } .faq details { border-bottom: 1px solid var(--rule); } .faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font-weight: 600; color: var(--ink); font-size: 17px; line-height: 1.6; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 8px; top: 30px; width: 10px; height: 10px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform 0.2s; } .faq details[open] summary::after { transform: rotate(-135deg); top: 34px; } .faq .a { padding: 0 0 24px; font-size: 16px; line-height: 1.95; max-width: 46em; } .closing { background: var(--base); color: #fff; text-align: center; padding: 96px 0; } .closing h2 { color: #fff; font-size: 32px; } .closing p { color: var(--on-base); margin: 14px 0 32px; } footer.foot { padding: 28px 0; font-size: 12px; color: var(--ink-3); } footer.foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } footer.foot a { color: var(--ink-3); text-decoration: none; } .contact { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .contact > div:first-child { max-width: 680px; } .contact p { margin-top: 12px; } footer.foot .legal { display: flex; flex-wrap: wrap; gap: 6px 20px; } footer.foot a:hover { text-decoration: underline; } .brand .beta { white-space: nowrap; } @media (max-width: 420px) { .brand { column-gap: 8px; } .brand .mark { width: 22px; height: 20px; } } @media (max-width: 380px) { header.nav .wrap { padding-left: 16px; padding-right: 16px; } .brand b { font-size: 18px; } nav a.nav-cta { font-size: 13px; padding: 6px 10px; } } @media (max-width: 340px) { .brand .mark { display: none; } header.nav .wrap { padding-left: 12px; padding-right: 12px; gap: 8px; } } @media (max-width: 860px) { nav ul li:not(.keep) { display: none; } header.nav .wrap { gap: 12px; } nav a.nav-cta { white-space: nowrap; padding: 6px 12px; } } @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero h1 { font-size: 34px; } .facts .wrap { grid-template-columns: 1fr 1fr; } .fact:nth-child(3) { border-left: 0; padding-left: 0; } .features { grid-template-columns: 1fr; } section.block { padding: 72px 0; } } .ph { display: inline-block; } .kw { word-break: keep-all; overflow-wrap: break-word; } .hero h1 { font-size: clamp(28px, 3.3vw, 40px); line-height: 1.45; } .hero .for { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--on-base-sub); } @media (min-width: 901px) { .hero .wrap { grid-template-columns: 1.15fr 1fr; } } .hero .wrap { padding-bottom: 128px; } .facts { border-bottom: 0; position: relative; z-index: 2; margin-top: -72px; } .facts .wrap { display: block; } .facts-panel { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 16px; box-shadow: 0 18px 48px rgba(3,10,40,.16); border: 1px solid var(--rule); padding: 30px 0; } .facts-panel .fact { padding: 0 30px; border-left: 1px solid var(--rule); } .facts-panel .fact:first-child { border-left: 0; padding-left: 30px; } .facts-panel .v { font-size: clamp(30px, 3.2vw, 40px); } .facts-panel .k { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 10px; line-height: 1.6; } .facts-panel .s { font-size: 13px; color: var(--ink-3); margin-top: 4px; line-height: 1.6; } .facts-src { font-size: 12px; color: var(--ink-3); line-height: 1.7; margin: 14px 4px 0; } @media (max-width: 900px) { .facts-panel { grid-template-columns: 1fr 1fr; row-gap: 26px; } .facts-panel .fact:nth-child(3) { border-left: 0; } } .lead, .feature p { word-break: auto-phrase; } h1, h2, h3, summary { word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; } main p, main li, main td, main dd, .fact .k, .fact .s, .a { word-break: auto-phrase; overflow-wrap: break-word; text-wrap: pretty; } .features > *, .feature > *, .issues > *, .steps > * { min-width: 0; } @media (max-width: 600px) { .facts-panel { grid-template-columns: 1fr; row-gap: 0; padding: 8px 0; } .facts-panel .fact, .facts-panel .fact:first-child { border-left: 0; border-top: 1px solid var(--rule); padding: 18px 24px; } .facts-panel .fact:first-child { border-top: 0; } } @media (min-width: 1000px) { #faq .wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; } #faq .faq { margin-top: 0; } } .steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .step { position: relative; } .st-ico { position: relative; width: 64px; height: 64px; border-radius: 16px; background: var(--accent-wash); display: grid; place-items: center; } .st-ico svg { width: 30px; height: 30px; fill: none; stroke: var(--base-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .st-ico .num { position: absolute; top: -8px; left: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--base-2); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; } .step:not(:last-child)::after { content: ""; position: absolute; top: 32px; left: 84px; right: -20px; border-top: 2px dashed var(--accent-band); } .st-txt h3 { font-size: 20px; margin: 20px 0 0; } .st-txt p { font-size: 16px; line-height: 1.9; margin: 10px 0 0; } @media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 0; } .step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding-bottom: 32px; } .step:not(:last-child)::after { top: 72px; bottom: 6px; left: 31px; right: auto; border-top: 0; border-left: 2px dashed var(--accent-band); } .st-txt h3 { margin-top: 16px; } } .kw.kw { word-break: keep-all; } main p.kw.kw, main p, main li, main td, main dd, .a, .src, main .feature p { word-break: normal; text-wrap: wrap; } p .ph { display: inline; } .nw { white-space: nowrap; } .hero p.sub.kw.kw { word-break: keep-all; } .hero p.sub .s2 { display: block; } section.block.dark { background: var(--base); color: var(--on-base); } .block.dark h2, .block.dark h3 { color: #fff; } .block.dark .lead { color: var(--on-base); } .block.dark a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .block.dark a:hover { color: #fff; } .pipe { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.2fr) 44px minmax(0, 1fr); align-items: stretch; margin-top: 48px; } .pipe-node { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px; padding: 22px 24px; background: var(--base-2); } .pipe-node.is-core { border-color: var(--on-base-sub); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.28), var(--base-2)); } .pipe-node .t { display: block; color: #fff; font-weight: 700; font-size: 17px; line-height: 1.5; } .pipe-node p { margin: 8px 0 0; font-size: 15px; line-height: 1.8; color: var(--on-base); } .pipe-arrow { display: flex; align-items: center; justify-content: center; color: var(--on-base-sub); font-size: 20px; } table.spec-table { width: 100%; max-width: 920px; border-collapse: collapse; margin-top: 44px; font-size: 15px; line-height: 1.8; } .spec-table th, .spec-table td { text-align: left; vertical-align: top; padding: 16px 18px 16px 0; border-top: 1px solid var(--rule); } .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 1px solid var(--rule); } .spec-table th { width: 11em; color: var(--ink); font-weight: 600; word-break: keep-all; } .spec-table code { font-size: 13.5px; background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 6px; white-space: nowrap; } .block.dark .spec-table th, .block.dark .spec-table td { border-color: rgba(255, 255, 255, 0.16); } .block.dark .spec-table th { color: #fff; } .block.dark .spec-table code { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.16); color: #fff; } .limits { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; max-width: 880px; } .limits li { padding: 16px 20px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; font-size: 16px; line-height: 1.8; } .limits b { color: var(--ink); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; } .split > div { border: 1px solid var(--rule); border-radius: 14px; padding: 26px 28px; background: #fff; } .split h3 { font-size: 18px; } .split ul { margin: 12px 0 0; padding-left: 1.2em; font-size: 16px; line-height: 1.9; } .split + .note { margin: 16px 0 0; font-size: 14px; color: var(--ink-3); } .record { display: flex; align-items: baseline; gap: 20px; margin-top: 24px; padding: 24px 28px; border: 1px solid var(--rule); border-radius: 14px; background: #fff; } .block .lead + .record, h2 + .record { margin-top: 40px; } .record .d { flex: none; font-size: 14px; font-weight: 700; color: var(--base-3); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } .record p { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.7; } .record p.t { margin-top: 8px; color: var(--ink-2); font-weight: 400; font-size: 16px; line-height: 1.9; } .docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; } .doc { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 14px; padding: 24px; background: #fff; color: inherit; text-decoration: none; } .doc:hover { border-color: var(--accent); } .doc h3 { font-size: 18px; } .doc p { margin: 8px 0 0; font-size: 15px; line-height: 1.8; flex: 1; } .doc .go { margin-top: 14px; color: var(--accent-ink); font-weight: 600; font-size: 15px; } @media (max-width: 900px) { .pipe { grid-template-columns: 1fr; } .pipe-arrow { height: 36px; transform: rotate(90deg); } .split, .docs { grid-template-columns: 1fr; } .record { flex-direction: column; gap: 6px; } } @media (max-width: 600px) { .spec-table th, .spec-table td { display: block; width: auto; padding: 0; border: 0; } .spec-table tr { display: block; padding: 14px 0; border-top: 1px solid var(--rule); } .spec-table tr:last-child { border-bottom: 1px solid var(--rule); } .spec-table th { margin-bottom: 4px; } .block.dark .spec-table tr { border-color: rgba(255, 255, 255, 0.16); } } .theme-green { --base: #14432f; --base-2: #1b5a3f; --base-3: #1f6b4a; --on-base: #d8f0e3; --on-base-sub: #9fd8b9; --accent: #187a51; --accent-ink: #17784e; --accent-rgb: 24, 122, 81; --accent-hover: #136b46; --accent-hover-2: #105e3d; --accent-wash: #ecf7f1; --accent-band: #cdeedd; --base-deep: #0d251e; --accent-soft-rgb: 156, 196, 74; } .hero-frame { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); background: #fff; box-shadow: 0 24px 60px rgba(3, 10, 40, 0.45); } .hero-frame .bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: var(--base-2); } .hero-frame .bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); } .hero-frame .bar span { margin-left: 8px; font-size: 12px; color: var(--on-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero-frame img { display: block; width: 100%; height: auto; } .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; } .cards > div { border: 1px solid var(--rule); border-radius: 14px; padding: 26px 26px 28px; background: #fff; } .cards .no { display: block; font-size: 13px; font-weight: 700; color: var(--base-3); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; } .cards h3 { margin-top: 6px; font-size: 19px; } .cards p { margin: 10px 0 0; font-size: 16px; line-height: 1.9; } .callout { display: flex; gap: 12px; align-items: baseline; width: fit-content; max-width: 100%; margin: 28px 0 0; padding: 14px 20px; border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: 12px; font-size: 16px; line-height: 1.8; color: var(--on-base); } .callout b { color: #fff; } .pipe-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; } .pipe-steps > div { border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 12px; padding: 16px 20px; font-size: 16px; line-height: 1.8; color: var(--on-base); } .pipe-steps em { display: block; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--on-base-sub); } .ext-link { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--accent-ink); text-decoration: none; } .ext-link:hover { text-decoration: underline; } .ext-link svg { width: 13px; height: 13px; vertical-align: -1px; margin-left: 3px; fill: none; stroke: currentColor; stroke-width: 2; } @media (max-width: 900px) { .cards, .pipe-steps { grid-template-columns: 1fr; } } .brand .mark.lp-mark { stroke-width: 2; stroke-linejoin: round; } .hero-frame .mock { position: relative; aspect-ratio: 4 / 3.3; background: #f1f5f9; overflow: hidden; } .mock-faux { position: absolute; inset: 0; padding: 7% 6%; } .mock-faux b, .mock-faux i { display: block; border-radius: 4px; background: #e2e8f0; } .mock-faux b { width: 34%; height: 12px; margin-bottom: 18px; background: #cbd5e1; } .mock-faux i { width: 40%; height: 8px; margin-bottom: 10px; } .mock-faux i:nth-of-type(2n) { width: 32%; } .mock-faux .card { width: 40%; height: 22%; margin: 18px 0 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; } .mock-panel { position: absolute; right: 6%; bottom: 15%; width: 46%; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.06); } .mock-panel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .mock-launcher { position: absolute; right: 6%; bottom: 3.5%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #64748b; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.3); } .feature-group { margin: 48px 0 0; font-size: 18px; color: var(--base-3); } .feature-group + .features { margin-top: 8px; } .spec-table th small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; font-weight: 400; } .block.dark .spec-table th small { color: var(--on-base-sub); } footer.foot .wrap > span a { margin-left: 16px; } @media (max-width: 900px) { .mock-panel { width: 54%; right: 5%; bottom: 14%; } .mock-launcher { width: 11%; } } .mock.mock-fill img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .external-link-icon { display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.3em; vertical-align: -0.1em; flex-shrink: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .kz-guide { --text-heading: var(--ink); --text-default: var(--ink-2); --text-muted: var(--ink-3); --text-on-accent: #fff; --border-default: var(--rule); --border-strong: var(--rule-2); --bg-surface: var(--paper); --bg-page: var(--paper); --bg-page-alt: var(--bg); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --color-primary-50: var(--accent-wash); --color-primary-100: var(--accent-band); --color-primary-200: #c0d4ff; --color-primary-300: #95b6ff; --color-primary-400: #5b8ff4; --color-primary-500: var(--accent); --color-primary-600: var(--accent-hover); --color-primary-700: var(--base-3); --color-primary-800: var(--base-2); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; } .kz-guide .gd-tone-primary { --gd-solid: var(--accent); --gd-soft: var(--accent-wash); --gd-badge: var(--accent-band); --gd-badge-ink: var(--base-3); --gd-badge-line: #c0d4ff; --gd-icon: var(--accent-hover); } .kz-guide .gd-tone-emerald { --gd-solid: #059669; --gd-soft: #ecfdf5; --gd-badge: #d1fae5; --gd-badge-ink: #065f46; --gd-badge-line: #a7f3d0; --gd-icon: #047857; } .kz-guide .gd-tone-amber { --gd-solid: #d97706; --gd-soft: #fffbeb; --gd-badge: #fef3c7; --gd-badge-ink: #92400e; --gd-badge-line: #fde68a; --gd-icon: #b45309; } .kz-guide .gd-tone-red { --gd-solid: #dc2626; --gd-soft: #fef2f2; --gd-badge: #fee2e2; --gd-badge-ink: #991b1b; --gd-badge-line: #fecaca; --gd-icon: #dc2626; } .kz-guide .gd-solid { background: var(--gd-solid); color: #fff; } .kz-guide .gd-icon { color: var(--gd-icon); } .kz-guide .gd-badge { background: var(--gd-badge); color: var(--gd-badge-ink); border: 1px solid var(--gd-badge-line); } .kz-guide .gd-mute { background: #f1f5f9; color: #334155; } .kz-guide .gd-mute-bar { background: #e2e8f0; } .kz-guide .gd-bubble-plain { background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); color: #334155; } .kz-guide .gd-skip { position: absolute; left: -9999px; top: 8px; z-index: 60; padding: 8px 14px; background: #fff; color: var(--ink); border-radius: 8px; } .kz-guide .gd-skip:focus { left: 8px; } .kz-guide .gd-crumb { padding-top: 16px; padding-bottom: 0; } .kz-guide .gd-crumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.6; color: var(--ink-3); } .kz-guide .gd-crumb li + li::before { content: "/"; margin: 0 8px; color: var(--rule-2); } .kz-guide .gd-crumb a { color: var(--ink-3); text-decoration: none; } .kz-guide .gd-crumb a:hover { color: var(--accent-ink); text-decoration: underline; } .kz-guide footer.foot { border-top: 1px solid var(--rule); } .kz-guide footer.foot .wrap > span a { margin-left: 0; } .gd-go { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-ink); font-weight: 600; font-size: 16px; text-decoration: none; } .gd-go-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 14px; line-height: 1; transition: background-color 0.15s, color 0.15s, transform 0.15s; } .gd-go:hover .gd-go-arrow { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(2px); } .hero .gd-go, .dark .gd-go { color: var(--on-base); } .hero .gd-go:hover .gd-go-arrow, .dark .gd-go:hover .gd-go-arrow { background: #fff; border-color: #fff; color: var(--base); } .hero .cta .gd-go { align-self: center; padding: 0 8px; } .kz-guide .gd-ext { color: var(--accent-ink); font-weight: 600; font-size: 16px; text-decoration: none; } .kz-guide .gd-ext:hover { text-decoration: underline; } .kz-guide .gd-intro { padding: 48px 0 8px; text-align: center; } .kz-guide .gd-eyebrow { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent-ink); } .kz-guide .gd-intro h1 { margin-top: 8px; font-size: 34px; } .kz-guide .gd-lead { max-width: 40em; margin: 24px auto 0; font-size: 17px; line-height: 2; color: var(--ink-2); text-align: left; } .kz-guide .gd-list { padding: 40px 0 88px; } .kz-guide .gd-nav-title { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); text-align: center; } .kz-guide .gd-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .kz-guide .tag-chip { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--rule); color: var(--ink-2); font-size: 14px; font-weight: 500; line-height: 1.6; text-decoration: none; } .kz-guide .tag-chip:hover, .kz-guide .tag-chip:focus-visible { background: var(--accent-wash); border-color: #c0d4ff; color: var(--base-3); text-decoration: underline; } .kz-guide .gd-groups { display: flex; flex-direction: column; gap: 64px; margin-top: 48px; } .kz-guide .gd-group { scroll-margin-top: 96px; } .kz-guide .gd-group h2 { font-size: 26px; } .kz-guide .gd-subgroup { margin-top: 40px; } .kz-guide .gd-subgroup h3 { font-size: 20px; } .kz-guide .gd-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.8; color: var(--ink-3); } .kz-guide .gd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } @media (min-width: 768px) { .kz-guide .gd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .kz-guide .gd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .kz-guide .card-link-media { position: relative; display: block; overflow: hidden; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .kz-guide .card-link-media:hover { border-color: #95b6ff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); transform: translateY(-1px); } .kz-guide .card-link-media:active { transform: none; } .kz-guide .card-link-media-icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--gd-soft); } .kz-guide .card-link-media-body { padding: 14px 16px 44px; } .kz-guide .card-link-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: calc(16px * 1.5 * 3); margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink); } .kz-guide .card-link-cta { position: absolute; right: 16px; bottom: 12px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--accent-ink); } .kz-guide .card-link-media:hover .card-link-cta { text-decoration: underline; } @media (max-width: 639px) { .kz-guide .card-link-title { min-height: 0; } } .kz-guide .gd-mock { display: flex; flex-direction: column; gap: 5px; align-items: center; width: 90%; max-width: 12.5rem; font-size: 11px; line-height: 1.3; color: var(--ink); } .kz-guide .gd-mock-panel { width: 82%; max-width: 11rem; align-items: stretch; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } .kz-guide .gd-mock-panel-wide { width: 92%; max-width: 12.5rem; } .kz-guide .gd-mock-panel-narrow { width: 62%; max-width: 8rem; align-items: flex-start; } .kz-guide .gd-mock-panel-narrow .gd-mock-title, .kz-guide .gd-mock-panel-narrow .gd-mock-label { padding-left: 0.5rem; } .kz-guide .gd-mock-title { overflow: hidden; font-size: 10px; font-weight: 600; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; } .kz-guide .gd-mock-row { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; } .kz-guide .gd-mock-row-end { justify-content: flex-end; } .kz-guide .gd-mock-row-chat { padding: 0 8%; } .kz-guide .gd-mock-label { overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; } .kz-guide .gd-mock-check { flex-shrink: 0; width: 11px; height: 11px; border: 1.5px solid var(--rule); border-radius: 3px; } .kz-guide .gd-mock-check-on { border-color: transparent; } .kz-guide .gd-mock-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; } .kz-guide .gd-mock-menu { flex-shrink: 0; margin-left: auto; font-size: 10px; letter-spacing: 0.05em; color: var(--ink-3); } .kz-guide .gd-mock-btn { align-self: flex-start; padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 600; white-space: nowrap; } .kz-guide .gd-mock-badge { padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap; } .kz-guide .gd-mock-bar-label { display: block; overflow: hidden; width: 100%; padding: 4px 6px; border-radius: 6px; font-size: 10px; font-weight: 600; text-align: center; white-space: nowrap; text-overflow: ellipsis; } .kz-guide .gd-mock-bar-label.gd-mute { border: 1px solid transparent; } .kz-guide .gd-mock-bubble { min-width: 55%; max-width: 92%; padding: 5px 8px; border-radius: 10px; } .kz-guide .gd-mock-bars { display: flex; align-items: flex-end; gap: 4px; width: 100%; height: 36px; } .kz-guide .gd-mock-bar { flex: 1; height: var(--gd-h, 20%); border-radius: 2px 2px 0 0; } .kz-guide .gd-mock-line { display: block; overflow: visible; width: 100%; height: 32px; } .kz-guide .gd-mock-line-grid { stroke: var(--rule); } .kz-guide .gd-mock-progress-track { overflow: hidden; width: 100%; height: 6px; border-radius: 999px; background: #f1f5f9; } .kz-guide .gd-mock-progress-bar { display: block; width: var(--gd-w, 40%); height: 100%; border-radius: 999px; } .kz-guide .gd-hero-mock { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; gap: 8px; width: 100%; max-width: 21rem; font-size: 16px; line-height: 1.5; color: var(--ink); } .kz-guide .gd-hero-mock.gd-mock-panel { width: 100%; max-width: 21rem; align-items: stretch; padding: 16px 18px; border-radius: 14px; } .kz-guide .gd-hero-mock.gd-mock-panel-wide { max-width: 23rem; } .kz-guide .gd-hero-mock.gd-mock-panel-narrow { width: auto; max-width: 15rem; align-items: flex-start; } .kz-guide .gd-hero-mock .gd-mock-title, .kz-guide .gd-hero-mock .gd-mock-menu { font-size: 15px; } .kz-guide .gd-hero-mock .gd-mock-check { width: 17px; height: 17px; border-width: 2px; border-radius: 5px; } .kz-guide .gd-hero-mock .gd-mock-dot { width: 12px; height: 12px; } .kz-guide .gd-hero-mock .gd-mock-btn { padding: 8px 16px; border-radius: 8px; font-size: 13px; } .kz-guide .gd-hero-mock .gd-mock-badge { padding: 5px 12px; font-size: 13px; } .kz-guide .gd-hero-mock .gd-mock-bar-label { padding: 8px 12px; border-radius: 8px; font-size: 13px; } .kz-guide .gd-hero-mock .gd-mock-bubble { padding: 8px 14px; border-radius: 14px; } .kz-guide .gd-hero-mock .gd-mock-bars { height: 56px; gap: 8px; } .kz-guide .gd-hero-mock .gd-mock-progress-track { height: 10px; } .kz-guide .gd-hero-mock .gd-mock-line { height: 56px; } .kz-guide .gd-article { padding: 24px 0 72px; } .kz-guide .guide-layout { max-width: 48rem; margin: 0 auto; } .kz-guide .guide-layout-hero { padding: 32px; border-radius: 16px; background: var(--gd-soft); } .kz-guide .guide-hero-grid { display: flex; flex-direction: column; gap: 24px; } .kz-guide .guide-hero-text { min-width: 0; } .kz-guide .gd-cat-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.6; } .kz-guide .guide-hero-text h1 { margin-top: 16px; font-size: 30px; line-height: 1.45; } .kz-guide .gd-desc { margin: 16px 0 0; font-size: 16px; line-height: 2; color: var(--ink-2); } .kz-guide .gd-byline { margin-top: 24px; font-size: 14px; line-height: 1.7; color: var(--ink-2); } .kz-guide .gd-byline p { margin: 0; } .kz-guide .gd-byline b { color: var(--ink); font-weight: 600; } .kz-guide .gd-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-3); } @media (min-width: 768px) { .kz-guide .guide-layout-hero { padding: 40px; } .kz-guide .guide-hero-grid { flex-direction: row; align-items: center; gap: 32px; } .kz-guide .guide-hero-text { flex: 1 1 auto; } } @media (max-width: 600px) { .kz-guide .guide-layout-hero { padding: 24px 20px; } .kz-guide .guide-hero-text h1 { font-size: 24px; } } .kz-guide .guide-summary, .kz-guide .guide-layout-body { margin-top: 40px; } .kz-guide .guide-summary { padding: 24px; border-radius: 12px; background: var(--gd-soft); } .kz-guide .guide-summary-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); } .kz-guide .guide-summary ul { margin: 12px 0 0; padding: 0; list-style: none; } .kz-guide .guide-summary li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.8; color: var(--ink-2); } .kz-guide .guide-summary li + li { margin-top: 8px; } .kz-guide .guide-summary li::before { content: ""; position: absolute; left: 4px; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); } .kz-guide .guide-toc { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); } .kz-guide .guide-toc-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); } .kz-guide .guide-toc ol { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: guide-toc; } .kz-guide .guide-toc li { counter-increment: guide-toc; } .kz-guide .guide-toc a { display: flex; gap: 8px; padding: 10px 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); text-decoration: none; } .kz-guide .guide-toc a::before { content: counter(guide-toc) "."; flex-shrink: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; } .kz-guide .guide-toc a:hover { color: var(--accent-ink); } .kz-guide .guide-toc .guide-toc-sub { margin: 0 0 0 1.5rem; padding: 0; list-style: none; counter-reset: none; } .kz-guide .guide-toc .guide-toc-sub li { counter-increment: none; } .kz-guide .guide-toc .guide-toc-sub a { color: var(--ink-3); } .kz-guide .guide-toc .guide-toc-sub a::before { content: none; } @media (min-width: 1024px) { .kz-guide .guide-layout { max-width: 62rem; display: grid; grid-template-columns: 11rem 1fr; grid-template-areas: "hero hero" "toc summary" "toc body"; gap: 40px; } .kz-guide .guide-layout:not(:has(.guide-summary)) { grid-template-areas: "hero hero" "toc body"; } .kz-guide .guide-layout-hero { grid-area: hero; } .kz-guide .guide-hero-text p.gd-desc { max-width: 44rem; } .kz-guide .guide-summary { grid-area: summary; margin-top: 0; } .kz-guide .guide-toc { grid-area: toc; position: sticky; top: 96px; align-self: start; margin-top: 0; padding-top: 0; border-top: none; } .kz-guide .guide-layout-body { grid-area: body; margin-top: 0; } } .kz-guide .insight-body { font-size: 17px; line-height: 2; color: var(--ink-2); } .kz-guide .insight-body > * + * { margin-top: 24px; } .kz-guide .insight-body > :first-child { margin-top: 0; } .kz-guide .insight-body p { margin-bottom: 0; } .kz-guide .insight-body h2 { margin-top: 48px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); font-size: 24px; font-weight: 700; line-height: 1.5; color: var(--ink); scroll-margin-top: 96px; } .kz-guide .insight-body h3 { margin-top: 40px; font-size: 20px; font-weight: 600; line-height: 1.5; color: var(--ink); scroll-margin-top: 96px; } .kz-guide .insight-body h4 { margin-top: 32px; font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--ink); } .kz-guide .insight-body a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; } .kz-guide .insight-body a:hover { color: var(--base-3); } .kz-guide .insight-body ul, .kz-guide .insight-body ol { margin-bottom: 0; padding-left: 1.5rem; } .kz-guide .insight-body li { margin-bottom: 8px; line-height: 1.8; } .kz-guide .insight-body ul li { list-style-type: disc; } .kz-guide .insight-body ol li { list-style-type: decimal; } .kz-guide .insight-body blockquote { margin-left: 0; margin-right: 0; padding: 16px 24px; border-radius: 8px; background: var(--accent-wash); color: var(--ink-2); } .kz-guide .insight-body blockquote > :first-child { margin-top: 0; } .kz-guide .insight-body blockquote > :last-child { margin-bottom: 0; } .kz-guide .insight-body strong { font-weight: 600; color: var(--ink); } .kz-guide .insight-body img { max-width: 100%; height: auto; border-radius: 8px; } .kz-guide .insight-body hr { margin: 40px 0; border: none; border-top: 1px solid var(--rule); } .kz-guide .insight-body .insight-footnote { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.75; color: var(--ink-3); } .kz-guide .insight-body .insight-footnote + .insight-footnote { margin-top: 12px; padding-top: 0; border-top: none; } .kz-guide .insight-body .video-embed { margin: 40px 0; padding: 16px; border: 1px solid var(--rule); border-radius: 12px; } .kz-guide .insight-body .insight-table { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; } .kz-guide .insight-body .insight-table table { width: 100%; margin: 0; border-collapse: collapse; } .kz-guide .insight-body .insight-table th { min-width: calc(3em + 1rem); padding: 12px 16px; border-bottom: 1px solid #e2e8f0; background: #f9fafb; font-size: 13px; font-weight: 500; line-height: 1.5; color: #64748b; text-align: left; } .kz-guide .insight-body .insight-table td { padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-size: 15px; line-height: 1.7; color: #0f172a; overflow-wrap: anywhere; vertical-align: top; } .kz-guide .insight-body .insight-table tbody tr:last-child td { border-bottom: none; } @media (min-width: 640px) { .kz-guide .insight-body .insight-table th { white-space: nowrap; } } @media (max-width: 639px) { .kz-guide .insight-body .insight-table th, .kz-guide .insight-body .insight-table td { padding: 10px 8px; } } .kz-guide .gd-related { padding: 64px 0; background: var(--bg); } .kz-guide .gd-related h2 { font-size: 24px; } .kz-guide .gd-more { margin: 32px 0 0; text-align: center; } .kz-guide .gd-author { padding: 56px 0 64px; text-align: center; } .kz-guide .gd-author h2 { font-size: 22px; } .kz-guide .gd-author p { margin: 12px 0 0; font-size: 16px; } .kz-guide .hero .fw-points { display: grid; gap: 12px; align-content: center; } .kz-guide .hero .fw-points .callout { display: block; width: auto; margin: 0; } .kz-guide .fw-contacts { margin: 24px 0 0; padding-left: 1.2em; font-size: 17px; line-height: 2; color: var(--ink-2); } .kz-guide .fw-contacts b { color: var(--ink); font-weight: 600; } .kz-guide .block .lead a, .kz-guide .fw-contacts a { color: var(--accent-ink); } .kz-guide .closing p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .kz-guide .gd-legal { padding: 8px 0 72px; } .kz-guide .gd-legal .wrap { max-width: 48rem; } .kz-guide .gd-legal ol { margin: 0; padding-left: 1.5rem; font-size: 16px; line-height: 1.9; color: var(--ink-2); } .kz-guide .gd-legal ol > li + li { margin-top: 12px; } .kz-guide .gd-legal ul { margin: 8px 0 0; padding-left: 1.4rem; } .kz-guide .gd-legal a { color: var(--accent-ink); } .kz-guide .gd-legal hr { margin: 32px 0; border: none; border-top: 1px solid var(--rule); } .kz-guide .gd-legal h2 { font-size: 16px; } .kz-guide .gd-legal div { font-size: 14px; color: var(--ink-3); } .theme-terracotta { --base: #4a1d12; --base-2: #63291a; --base-3: #8a3a22; --on-base: #f7e6dd; --on-base-sub: #ecbfa9; --accent: #b0442a; --accent-ink: #a03c24; --accent-rgb: 176, 68, 42; --accent-hover: #963820; --accent-hover-2: #83301b; --accent-wash: #fcf1ec; --accent-band: #f4d8cb; } .theme-terracotta.kz-guide { --color-primary-200: #eec0ad; --color-primary-300: #e3a088; --color-primary-400: #c9674a; } .theme-terracotta .gd-tone-primary { --gd-badge-line: #eec0ad; } .kz-guide .fw-tel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; } .kz-guide .fw-tel > div { border: 1.5px solid #a9b4c2; border-radius: 14px; padding: 20px 22px; background: #fff; } .kz-guide .fw-tel .n { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); } .kz-guide .fw-tel a.num { display: inline-block; margin-top: 6px; font-size: 24px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent-ink); text-decoration: none; font-variant-numeric: tabular-nums; } .kz-guide .fw-tel a.num:hover { text-decoration: underline; } .kz-guide .fw-tel .s { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-3); } .kz-guide .fw-more { margin: 24px 0 0; font-size: 15px; line-height: 1.9; color: var(--ink-2); } .kz-guide .fw-more a { color: var(--accent-ink); } .kz-guide .block .gd-grid { margin-top: 32px; } .kz-guide .block .gd-more { margin-top: 28px; text-align: left; } @media (max-width: 900px) { .kz-guide .fw-tel { grid-template-columns: 1fr; } } .kz-guide .hero .fw-formal { margin: 10px 0 0; font-size: 18px; font-weight: 600; letter-spacing: 0.02em; color: var(--on-base-sub); } .theme-terracotta header.nav .brand b, .theme-terracotta header.nav .brand span, .theme-terracotta header.nav nav a { white-space: nowrap; } @media (max-width: 420px) { .theme-terracotta header.nav .brand { column-gap: 8px; } .theme-terracotta header.nav .brand b { font-size: 15px; } .theme-terracotta header.nav .brand span { font-size: 10px; letter-spacing: 0; } .theme-terracotta header.nav nav a { font-size: 12px; } } .kz-guide .fw-tel .tag { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-ink); font-size: 12px; font-weight: 700; line-height: 1.6; vertical-align: 1px; }