:root {
color-scheme: light;
--sc-n-0: #ffffff;
--sc-n-50: #f7f8fa;
--sc-n-100: #eff1f5;
--sc-n-200: #e1e5ec;
--sc-n-300: #cbd2dc;
--sc-n-400: #98a2b3;
--sc-n-500: #5c687b;
--sc-n-600: #485467;
--sc-n-700: #354052;
--sc-n-800: #212b3a;
--sc-n-900: #111926;
--sc-n-950: #080d16;
--sc-brand-50: #eef4ff;
--sc-brand-100: #dbe7ff;
--sc-brand-200: #bcd2ff;
--sc-brand-300: #8fb4ff;
--sc-brand-400: #5b8ef8;
--sc-brand-500: #2f6fed;
--sc-brand-600: #1d57d1;
--sc-brand-700: #1946a8;
--sc-brand-800: #173a86;
--sc-brand-900: #142f69;
--sc-red-50: #fef2f2;
--sc-red-100: #fee2e2;
--sc-red-200: #fecaca;
--sc-red-300: #fca5a5;
--sc-red-500: #ef4444;
--sc-red-600: #dc2626;
--sc-red-700: #b91c1c;
--sc-red-800: #991b1b;
--sc-amber-50: #fffbeb;
--sc-amber-100: #fef3c7;
--sc-amber-200: #fde68a;
--sc-amber-500: #d97706;
--sc-amber-600: #b45309;
--sc-amber-800: #92400e;
--sc-amber-900: #78350f;
--sc-emerald-50: #ecfdf5;
--sc-emerald-200: #a7f3d0;
--sc-emerald-600: #059669;
--sc-emerald-700: #047857;
--sc-emerald-800: #065f46;
--sc-pink-50: #fdf2f8;
--sc-pink-900: #831843;
--sc-bg: #f3f5f8;
--sc-surface: var(--sc-n-0);
--sc-surface-2: var(--sc-n-50);
--sc-surface-3: var(--sc-n-100);
--sc-border: var(--sc-n-200);
--sc-border-strong: var(--sc-n-300);
--sc-text: var(--sc-n-900);
--sc-text-2: var(--sc-n-600);
--sc-text-3: var(--sc-n-500);
--sc-link: var(--sc-brand-700);
--sc-accent: #1d57d1;
--sc-accent-hover: #1946a8;
--sc-on-accent: #ffffff;
--sc-focus: #1d57d1;
--sc-scrim: rgb(17 25 38 / 0.45);
--sc-inverse: #111926;
--sc-on-inverse: #ffffff;
--sc-ok-solid: #047857;
--sc-warn-solid: #b45309;
--sc-danger-solid: #b91c1c;
--sc-on-solid: #ffffff;
--sc-elev-1: 0 1px 2px rgb(17 25 38 / 0.08), 0 0 0 1px rgb(17 25 38 / 0.03);
--sc-elev-2: 0 6px 16px -4px rgb(17 25 38 / 0.14), 0 2px 4px rgb(17 25 38 / 0.06);
--sc-elev-3: 0 24px 48px -12px rgb(17 25 38 / 0.28), 0 4px 12px rgb(17 25 38 / 0.08);
--sc-radius-sm: 4px;
--sc-radius-md: 6px;
--sc-radius-lg: 10px;
--sc-radius-xl: 14px;
--sc-font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--sc-font-mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--sc-text-3xs: 0.625rem;
--sc-text-2xs: 0.6875rem;
--sc-text-xs: 0.75rem;
--sc-text-ui: 0.8125rem;
--sc-text-sm: 0.875rem;
--sc-text-md: 1rem;
--sc-text-lg: 1.25rem;
--sc-text-xl: 1.5rem;
--sc-text-2xl: 2rem;
--sc-text-3xl: 2.75rem;
--sc-space: 4px;
--sc-ease: cubic-bezier(0.2, 0, 0, 1);
--sc-dur-fast: 120ms;
--sc-dur: 180ms;
}
:root[data-theme="dark"] {
color-scheme: dark;
--sc-n-0: #151a22;
--sc-n-50: #1a202a;
--sc-n-100: #202733;
--sc-n-200: #2b3442;
--sc-n-300: #3d4859;
--sc-n-400: #6b7689;
--sc-n-500: #939eb0;
--sc-n-600: #aab4c3;
--sc-n-700: #c3cbd7;
--sc-n-800: #dbe0e8;
--sc-n-900: #eef1f5;
--sc-n-950: #f8fafc;
--sc-brand-50: #111f3b;
--sc-brand-100: #172a52;
--sc-brand-200: #1f3a70;
--sc-brand-300: #2a4f99;
--sc-brand-400: #3a6ad0;
--sc-brand-500: #4f86f5;
--sc-brand-600: #7ea8ff;
--sc-brand-700: #a3c1ff;
--sc-brand-800: #c4d7ff;
--sc-brand-900: #e0eaff;
--sc-red-50: #2b1315;
--sc-red-100: #3b181b;
--sc-red-200: #5e2226;
--sc-red-300: #86292f;
--sc-red-500: #f26166;
--sc-red-600: #f87f83;
--sc-red-700: #fca5a5;
--sc-red-800: #fecaca;
--sc-amber-50: #2a1e08;
--sc-amber-100: #3a2a0b;
--sc-amber-200: #5c4310;
--sc-amber-500: #f5a524;
--sc-amber-600: #fbbf24;
--sc-amber-800: #fcd34d;
--sc-amber-900: #fde68a;
--sc-emerald-50: #0b2a20;
--sc-emerald-200: #145239;
--sc-emerald-600: #34d399;
--sc-emerald-700: #6ee7b7;
--sc-emerald-800: #a7f3d0;
--sc-pink-50: #2e1022;
--sc-pink-900: #fbcfe8;
--sc-bg: #0d1117;
--sc-accent: #2b68e4;
--sc-accent-hover: #2259cf;
--sc-on-accent: #ffffff;
--sc-focus: #7ea8ff;
--sc-scrim: rgb(3 6 12 / 0.66);
--sc-inverse: #eef1f5;
--sc-on-inverse: #111926;
--sc-elev-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.04);
--sc-elev-2: 0 8px 20px -4px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.06);
--sc-elev-3: 0 24px 56px -12px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.07);
}
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--sc-bg); color: var(--sc-text); font-family: var(--sc-font-sans); font-size: var(--sc-text-md); line-height: 1.6; font-feature-settings: "cv11", "ss03", "calt"; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--sc-link); text-underline-offset: 3px; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 3px; border-radius: var(--sc-radius-sm); }
.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: .5rem .9rem; border-radius: var(--sc-radius-md); background: var(--sc-accent); color: var(--sc-on-accent); font-weight: 600; text-decoration: none; }
.skip:focus { top: 1rem; }
.top { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--sc-border); background: color-mix(in srgb, var(--sc-surface) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.top .wrap { display: flex; align-items: center; gap: 1rem; height: 4rem; }
.logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--sc-text); font-size: 1.2rem; font-weight: 650; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.logo svg { width: 1.9rem; height: 1.9rem; flex: none; }
.logo b { font-weight: 500; letter-spacing: .08em; color: var(--sc-brand-600); }
.nav { display: none; gap: 1.5rem; margin-left: 1.5rem; }
.nav a { color: var(--sc-text-2); font-size: var(--sc-text-sm); font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--sc-text); }
.top .spacer { flex: 1; }
.tools { display: flex; align-items: center; gap: .25rem; }
.ghost { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem; border: 0; border-radius: var(--sc-radius-md); background: transparent; color: var(--sc-text-2); font: inherit; font-size: var(--sc-text-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color var(--sc-dur-fast) var(--sc-ease), color var(--sc-dur-fast) var(--sc-ease); }
.ghost:hover { background: var(--sc-surface-3); color: var(--sc-text); }
.ghost svg { width: 1.1rem; height: 1.1rem; }
#theme-toggle .moon, :root[data-theme="dark"] #theme-toggle .sun { display: none; }
:root[data-theme="dark"] #theme-toggle .moon { display: block; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.75rem; padding: 0 1.15rem; border: 1px solid transparent; border-radius: var(--sc-radius-md); font-size: var(--sc-text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--sc-dur-fast) var(--sc-ease), border-color var(--sc-dur-fast) var(--sc-ease), transform var(--sc-dur-fast) var(--sc-ease); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--sc-accent); color: var(--sc-on-accent); box-shadow: var(--sc-elev-1); }
.btn.primary:hover { background: var(--sc-accent-hover); }
.btn.outline { border-color: var(--sc-border-strong); background: var(--sc-surface); color: var(--sc-text); }
.btn.outline:hover { background: var(--sc-surface-3); }
.btn.small { height: 2.5rem; padding: 0 .9rem; }
.btn svg { width: 1rem; height: 1rem; }
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--sc-border); background-color: var(--sc-bg);
background-image: linear-gradient(var(--sc-border) 1px, transparent 1px), linear-gradient(90deg, var(--sc-border) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--sc-border) 45%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--sc-border) 45%, transparent) 1px, transparent 1px);
background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -1px -1px; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 70% at 30% 40%, transparent 30%, var(--sc-bg) 100%); }
.hero .wrap { position: relative; z-index: 1; display: grid; gap: 2.5rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--sc-link); font-size: var(--sc-text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: .5rem; height: .5rem; border-radius: 2px; background: var(--sc-brand-500); }
h1 { margin-top: 1rem; font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.lead { margin-top: 1.25rem; max-width: 36rem; color: var(--sc-text-2); font-size: 1.0625rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.note { margin-top: .9rem; color: var(--sc-text-3); font-size: var(--sc-text-sm); }
.shot { border: 1px solid var(--sc-border); border-radius: var(--sc-radius-xl); background: var(--sc-surface); box-shadow: var(--sc-elev-3); overflow: hidden; }
.shot svg { display: block; width: 100%; height: auto; }
figcaption { padding: .7rem 1rem; border-top: 1px solid var(--sc-border); background: var(--sc-surface-2); color: var(--sc-text-2); font-size: var(--sc-text-sm); }
.ill text { font-family: var(--sc-font-sans); fill: var(--sc-text); }
.ill .muted { fill: var(--sc-text-3); }
.ill .bar { fill: var(--sc-surface-2); }
.ill .rule { stroke: var(--sc-border); }
.ill .node { fill: var(--sc-surface); stroke: var(--sc-border-strong); }
.ill .node.dead { opacity: .55; }
.ill .node.bad { stroke: var(--sc-red-500); stroke-width: 2; }
.ill .group { fill: var(--sc-surface-2); stroke: var(--sc-border-strong); stroke-dasharray: 5 4; }
.ill .a { stroke: #2563eb; } .ill .b { stroke: #ea580c; } .ill .off { stroke: var(--sc-n-400); stroke-dasharray: 5 4; }
.ill .wire { fill: none; stroke-width: 2; }
.ill .dot-ok { fill: #16a34a; } .ill .dot-bad { fill: var(--sc-red-500); } .ill .dot-off { fill: var(--sc-n-400); }
.ill .chip { fill: var(--sc-emerald-50); stroke: var(--sc-emerald-200); } .ill .chip-t { fill: var(--sc-emerald-700); font-weight: 600; }
.ill .tag { fill: var(--sc-red-50); stroke: var(--sc-red-200); } .ill .tag-t { fill: var(--sc-red-700); font-weight: 600; }
.ill .sel { fill: var(--sc-surface); stroke: var(--sc-border-strong); }
.ill .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; }
section { padding: 4rem 0; }
section.alt { border-top: 1px solid var(--sc-border); border-bottom: 1px solid var(--sc-border); background: var(--sc-surface); }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.sub { margin-top: .6rem; color: var(--sc-text-2); }
.grid { display: grid; gap: 1rem; margin-top: 2rem; }
.card { padding: 1.35rem; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); background: var(--sc-surface); transition: border-color var(--sc-dur) var(--sc-ease), box-shadow var(--sc-dur) var(--sc-ease); }
.card:hover { border-color: var(--sc-border-strong); box-shadow: var(--sc-elev-2); }
section.alt .card { background: var(--sc-surface-2); }
.card .ico { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--sc-brand-100); border-radius: var(--sc-radius-lg); background: var(--sc-brand-50); color: var(--sc-brand-600); }
.card .ico svg { width: 1.25rem; height: 1.25rem; }
h3 { margin-top: 1rem; font-size: 1.0625rem; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
.card p { margin-top: .45rem; color: var(--sc-text-2); font-size: .9375rem; line-height: 1.6; }
.steps { counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 1.35rem 1.35rem 1.35rem 4.25rem; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); background: var(--sc-surface-2); }
.steps li::before { content: counter(step); position: absolute; left: 1.35rem; top: 1.35rem; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sc-accent); color: var(--sc-on-accent); font-size: var(--sc-text-sm); font-weight: 700; }
.steps h3 { margin-top: .15rem; }
.steps p { margin-top: .35rem; color: var(--sc-text-2); font-size: .9375rem; }
.honest { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid var(--sc-amber-200); border-left-width: 4px; border-radius: var(--sc-radius-lg); background: var(--sc-amber-50); }
.honest h2 { font-size: 1.25rem; color: var(--sc-amber-900); }
.honest p { color: var(--sc-amber-900); font-size: .9375rem; }
.cta { text-align: center; }
.cta p { margin-top: .5rem; color: var(--sc-text-2); }
.cta .btn { margin-top: 1.5rem; }
footer { border-top: 1px solid var(--sc-border); background: var(--sc-surface); padding: 2rem 0; color: var(--sc-text-2); font-size: var(--sc-text-sm); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
footer .logo { font-size: 1rem; }
footer .logo svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 40rem) { .grid.two, .grid.three, .grid.four { grid-template-columns: repeat(2, 1fr); } .honest { padding: 2rem; } }
@media (min-width: 60rem) {
.nav { display: flex; }
.hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 3.5rem; padding-top: 5.5rem; padding-bottom: 5.5rem; }
section { padding: 5.5rem 0; }
.grid.three { grid-template-columns: repeat(3, 1fr); } .grid.four { grid-template-columns: repeat(4, 1fr); }
.steps li { padding: 4.25rem 1.35rem 1.35rem; }
}
@media (max-width: 26rem) { .logo span { font-size: 1.05rem; } .tools .lang-long { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }
@media print { .top, .actions, .cta, #theme-toggle { display: none; } body { background: #fff; } }