:root {
  --blue: #1358e8;
  --blue-2: #0b43c9;
  --blue-soft: #eaf1ff;
  --cyan: #65d5ff;
  --ink: #202936;
  --muted: #596577;
  --line: #dce2ea;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #edf2f8;
  --dark: #0b1830;
  --dark-2: #0e2243;
  --green: #20b879;
  --orange: #ffb547;
  --shadow: 0 24px 70px rgba(25, 53, 93, .13);
  --radius: 22px;
  --shell: min(1180px, calc(100% - 48px));
}

[data-theme="dark"] {
  --ink: #edf3ff;
  --muted: #a8b5c8;
  --line: #263853;
  --surface: #0d192c;
  --surface-2: #101f36;
  --surface-3: #172943;
  --blue-soft: #142d59;
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--surface); font: 16px/1.6 Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
svg { display: block; }
.section-shell { width: var(--shell); margin-inline: auto; }
.section-pad { padding: 120px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 999; padding: 10px 16px; color: #fff; background: var(--blue); border-radius: 8px; }
.skip-link:focus { top: 12px; }

.announcement { min-height: 38px; display: grid; place-items: center; padding: 7px 24px; color: #fff; background: linear-gradient(90deg, #052964, #1358e8 54%, #166ee8); font-size: 13px; letter-spacing: .01em; text-align: center; }
.announcement a { display: inline-flex; align-items: center; gap: 10px; }
.announcement span { padding: 1px 7px; border: 1px solid rgba(255,255,255,.45); border-radius: 99px; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.announcement strong { font-weight: 700; }

.site-header { position: sticky; top: 0; z-index: 100; height: 82px; border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(18px); }
.nav-shell { width: var(--shell); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 42px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 25px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { width: 35px; height: 35px; padding: 4px; fill: #fff; background: var(--blue); border-radius: 9px; }
.primary-nav { display: flex; align-items: center; gap: 30px; flex: 1; }
.primary-nav a, .text-link { position: relative; color: var(--ink); font-size: 14px; font-weight: 650; }
.primary-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--blue); transition: right .25s; }
.primary-nav a:hover::after, .primary-nav a.active::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.theme-toggle { width: 38px; height: 38px; padding: 9px; border: 0; color: var(--ink); background: transparent; border-radius: 9px; cursor: pointer; }
.theme-toggle:hover { background: var(--surface-3); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle .moon, [data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 9px; border: 0; background: transparent; cursor: pointer; }
.menu-toggle > span:not(.sr-only) { display: block; width: 22px; height: 2px; margin: 5px 0; background: var(--ink); transition: .25s; }

.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 10px; padding: 10px 22px; border: 1px solid var(--blue); color: #fff; background: var(--blue); border-radius: 7px; font-size: 15px; font-weight: 750; box-shadow: 0 8px 20px rgba(19,88,232,.18); transition: transform .2s, background .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); background: var(--blue-2); box-shadow: 0 12px 26px rgba(19,88,232,.28); }
.button-small { min-height: 40px; padding: 7px 17px; font-size: 13px; }
.button-large { min-height: 54px; padding: 13px 27px; }
.button-secondary { color: var(--blue); background: transparent; box-shadow: none; }
.button-secondary:hover { color: #fff; }
.button-light { color: var(--blue-2); border-color: #fff; background: #fff; }
.button-light:hover { color: var(--blue-2); background: #eef5ff; }
.button-ghost { color: #fff; border-color: rgba(255,255,255,.38); background: transparent; box-shadow: none; }
.button-ghost:hover { background: rgba(255,255,255,.1); }

.hero { min-height: 690px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 70px; padding-top: 70px; padding-bottom: 90px; }
.eyebrow, .kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.eyebrow i { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 5px rgba(32,184,121,.13); }
.hero h1 { margin: 0 0 27px; font-size: clamp(50px, 5.1vw, 76px); line-height: .99; letter-spacing: -.058em; font-weight: 720; }
.hero h1 span { color: var(--blue); }
.hero-lede { max-width: 620px; margin: 0 0 34px; color: var(--muted); font-size: 19px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 21px; margin-top: 28px; color: var(--muted); font-size: 12px; font-weight: 650; }
.hero-proof span { display: flex; align-items: center; gap: 6px; }
.hero-proof svg { width: 16px; fill: none; stroke: var(--green); stroke-width: 2.4; }

.hero-product { position: relative; min-width: 0; perspective: 1200px; }
.terminal-window { position: relative; z-index: 2; max-width: 620px; margin-left: auto; overflow: visible; color: #dfeaff; background: #0b1830; border: 1px solid #284264; border-radius: 18px; box-shadow: 0 35px 85px rgba(11,34,72,.27); transform: rotateY(-2deg) rotateX(1deg); }
.window-bar { height: 54px; display: flex; align-items: center; padding: 0 19px; border-bottom: 1px solid #203653; color: #8395ae; font-size: 12px; }
.window-dots { display: flex; gap: 7px; }
.window-dots i { width: 9px; height: 9px; border-radius: 50%; background: #fc6b62; }
.window-dots i:nth-child(2) { background: #f6c453; }
.window-dots i:nth-child(3) { background: #35c759; }
.window-title { margin: auto; transform: translateX(25px); }
.window-badge { padding: 3px 8px; color: #7ce1ad; border: 1px solid #235c4a; background: #102f2e; border-radius: 99px; font-size: 10px; font-weight: 800; }
.terminal-tabs { display: flex; padding: 0 20px; border-bottom: 1px solid #203653; }
.terminal-tab { padding: 14px 17px 11px; border: 0; border-bottom: 2px solid transparent; color: #7f93ae; background: transparent; cursor: pointer; font: 600 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.terminal-tab.active { color: #fff; border-bottom-color: #5aa3ff; }
.terminal-body { min-height: 250px; padding: 32px 33px 56px; background: radial-gradient(circle at 80% 15%, rgba(32,102,228,.16), transparent 40%); font: 14px/1.9 ui-monospace, SFMono-Regular, Consolas, monospace; }
.terminal-panel p { margin: 0 0 11px; }
.prompt { color: #65d5ff; }.cmd { color: #fff; }.output { color: #b8c8de; }.meta { margin-top: 32px!important; color: #768aa5; }.meta span { color: #3bd591; }.muted { color: #2e74e5; }.label { margin-top: 14px!important; color: #5b8ed8; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.runtime-card { position: absolute; right: -28px; bottom: -42px; z-index: 5; width: 74%; display: flex; align-items: center; gap: 12px; padding: 17px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); transform: translateZ(30px); }
.runtime-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--blue); border-radius: 9px; font-weight: 850; }
.runtime-card div:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.runtime-card strong { font-size: 13px; }.runtime-card span { color: var(--muted); font-size: 10px; }
.status-pill { padding: 4px 8px; color: var(--green)!important; background: color-mix(in srgb, var(--green) 10%, transparent); border-radius: 99px; font-weight: 800; }
.orbit { position: absolute; z-index: 0; border: 1px solid rgba(19,88,232,.15); border-radius: 50%; }
.orbit-one { width: 430px; height: 430px; right: 0; top: -70px; }
.orbit-two { width: 260px; height: 260px; left: -20px; bottom: -70px; }

.proof-strip { border-block: 1px solid var(--line); background: var(--surface-2); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-grid div { padding: 31px 30px; border-right: 1px solid var(--line); text-align: center; }
.proof-grid div:first-child { border-left: 1px solid var(--line); }
.proof-grid strong, .proof-grid span { display: block; }
.proof-grid strong { color: var(--blue); font-size: 25px; line-height: 1.2; }
.proof-grid span { margin-top: 6px; color: var(--muted); font-size: 12px; }

.platform { background: var(--surface-2); }
.section-heading { max-width: 720px; margin-bottom: 57px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading h2, .split-heading h2, .developer-copy h2, .security-copy h2, .registry-copy h2, .detail-sticky h2, .quickstart h2, .open-source h2 { margin: 0 0 22px; font-size: clamp(38px, 4vw, 56px); line-height: 1.08; letter-spacing: -.045em; }
.section-heading p, .split-heading > p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card { position: relative; min-height: 590px; overflow: hidden; padding: 30px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); box-shadow: 0 10px 35px rgba(35,57,92,.05); transition: transform .25s, box-shadow .25s; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.product-card-primary { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.product-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; }
.product-icon svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.runtime-logo { color: #fff; background: var(--blue); font-weight: 850; }.registry-logo { color: #fff; background: #08a77a; }.future-logo { color: #fff; background: #7c4fe0; }
.availability { padding: 4px 8px; color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); border-radius: 5px; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.availability.draft { color: #8b64dc; background: color-mix(in srgb, #8b64dc 10%, transparent); }
.product-card h3 { margin: 27px 0 12px; font-size: 25px; letter-spacing: -.025em; }
.product-card > p { min-height: 76px; margin: 0; color: var(--muted); font-size: 14px; }
.feature-list { margin: 25px 0 23px; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
.feature-list li { position: relative; margin: 8px 0; padding-left: 20px; }.feature-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 850; }
.product-card > a { color: var(--blue); font-size: 13px; font-weight: 750; }
.product-card > a span { transition: margin .2s; }.product-card > a:hover span { margin-left: 5px; }
.card-visual { position: absolute; left: 30px; right: 30px; bottom: 27px; height: 165px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; }
.runtime-visual { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 17px 23px; }
.layer { display: flex; justify-content: space-between; padding: 6px 11px; border: 1px solid var(--line); background: var(--surface); border-radius: 5px; font-size: 9px; }.layer small { color: var(--muted); }.layer.accent { color: #fff; border-color: var(--blue); background: var(--blue); }.layer.accent small { color: #dbe7ff; }
.package-visual { padding: 13px; }.package-row { display: flex; justify-content: space-between; padding: 8px 11px; margin-bottom: 6px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; font-size: 10px; }.package-row b { color: var(--green); }.package-command { margin-top: 10px; padding: 9px; color: #c7d7ee; background: #0b1830; border-radius: 5px; font: 9px ui-monospace, monospace; }.package-command i { color: var(--cyan); }
.nodes-visual { overflow: visible; background: radial-gradient(circle, color-mix(in srgb, #7c4fe0 14%, transparent), transparent 64%); }.node { position: absolute; z-index: 2; display: grid; place-items: center; width: 54px; height: 31px; color: #7c4fe0; border: 1px solid color-mix(in srgb, #7c4fe0 45%, var(--line)); background: var(--surface); border-radius: 7px; font: 9px ui-monospace, monospace; }.main-node { width: 90px; left: calc(50% - 45px); top: 25px; color: #fff; background: #7c4fe0; }.node-a { left: 18px; bottom: 25px; }.node-b { left: calc(50% - 27px); bottom: 15px; }.node-c { right: 18px; bottom: 25px; }.line { position: absolute; z-index: 1; width: 1px; height: 68px; top: 51px; left: 50%; background: #b9a2eb; transform-origin: top; }.line-a { transform: rotate(51deg); }.line-c { transform: rotate(-51deg); }.line-b { height: 67px; }

.split-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: end; margin-bottom: 55px; }
.split-heading h2 { margin-bottom: 0; }
.capability-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.capability-card { min-height: 360px; padding: 42px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cap-number { color: var(--blue); font: 700 11px ui-monospace, monospace; letter-spacing: .12em; }
.capability-card h3 { margin: 35px 0 10px; font-size: 28px; }.capability-card > p { max-width: 500px; color: var(--muted); }
.chip-cloud { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 30px; }.chip-cloud span { padding: 6px 10px; color: var(--blue); border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line)); background: var(--blue-soft); border-radius: 5px; font: 10px ui-monospace, monospace; }
.meter-list { margin-top: 30px; }.meter-list div { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 13px; margin: 13px 0; color: var(--muted); font-size: 11px; }.meter-list i { height: 6px; overflow: hidden; background: var(--surface-3); border-radius: 99px; }.meter-list b { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.mini-code { margin: 28px 0 0; padding: 19px; overflow: auto; color: #b8c8de; background: #0b1830; border-radius: 9px; font: 11px/1.8 ui-monospace, monospace; }.mini-code span { color: #69d0ff; }
.verification-ring { width: 132px; height: 132px; display: grid; place-content: center; margin-top: 23px; text-align: center; border: 8px solid var(--blue-soft); border-top-color: var(--blue); border-right-color: var(--blue); border-radius: 50%; transform: rotate(12deg); }.verification-ring strong, .verification-ring span { transform: rotate(-12deg); }.verification-ring strong { font-size: 29px; }.verification-ring span { color: var(--muted); font-size: 9px; }

.developer-section { color: #eaf2ff; background: var(--dark); }
.developer-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 85px; align-items: center; }
.kicker.light { color: #75b6ff; }.developer-copy h2, .security-copy h2 { color: #fff; }.developer-copy > p, .security-copy > p { color: #9fb0c8; font-size: 17px; }
.developer-points { margin-top: 35px; }.developer-points div { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid #263c59; }.developer-points b { color: #5ba8ff; font: 700 10px ui-monospace, monospace; }.developer-points span { color: #93a6c0; font-size: 13px; }.developer-points strong { display: block; margin-bottom: 3px; color: #fff; font-size: 14px; }
.code-workbench { overflow: hidden; border: 1px solid #2a4160; background: #091527; border-radius: 15px; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.code-tabs { display: flex; padding: 0 15px; overflow-x: auto; border-bottom: 1px solid #253a57; background: #10203a; }
.code-tab { flex: 0 0 auto; padding: 16px 14px 13px; border: 0; border-bottom: 2px solid transparent; color: #7890ad; background: transparent; font-size: 11px; cursor: pointer; }.code-tab.active { color: #fff; border-color: #5caaff; }
.code-panel { position: relative; min-height: 360px; padding: 30px; }.code-panel pre { margin: 0; overflow: auto; color: #d3def0; font: 12px/2 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }.code-panel .comment { color: #647993; }.code-panel .success, .code-panel .keyword { color: #5cdaa0; }.code-panel .string { color: #f4c37d; }
.copy-button { position: absolute; top: 18px; right: 18px; z-index: 2; padding: 5px 9px; border: 1px solid #304867; color: #91a6c1; background: #11223b; border-radius: 5px; font-size: 10px; cursor: pointer; }.copy-button:hover { color: #fff; }
.workbench-status { display: flex; justify-content: flex-end; gap: 17px; padding: 8px 17px; color: #637995; border-top: 1px solid #253a57; background: #10203a; font-size: 9px; }.workbench-status span:first-child { margin-right: auto; }.workbench-status i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; background: #38ca83; border-radius: 50%; }

.security-section { overflow: hidden; color: #e9f3ff; background: linear-gradient(125deg, #063e9e 0%, #075eea 58%, #1479e7 100%); }
.security-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: center; }
.security-visual { position: relative; min-height: 500px; display: grid; place-items: center; }
.shield { position: relative; z-index: 2; width: 180px; height: 200px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: 45% 45% 50% 50%; backdrop-filter: blur(8px); box-shadow: 0 30px 60px rgba(0,35,110,.27); }.shield svg { width: 95px; fill: rgba(255,255,255,.07); stroke: #fff; stroke-width: 3; }.shield svg path:last-child { fill: none; stroke: #75e7bc; stroke-width: 5; }.pulse { position: absolute; inset: 50%; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; transform: translate(-50%,-50%); }.p1 { width: 330px; height: 330px; }.p2 { width: 480px; height: 480px; }
.cap { position: absolute; z-index: 3; padding: 10px 13px; color: #bfd7ff; border: 1px solid rgba(255,255,255,.25); background: rgba(5,45,120,.65); border-radius: 7px; box-shadow: 0 12px 25px rgba(0,27,87,.18); font: 10px ui-monospace, monospace; backdrop-filter: blur(6px); }.cap b { margin-left: 7px; color: #78e5b8; }.cap-net b { color: #ffb5a8; }.cap-fs { left: 2%; top: 23%; }.cap-env { right: 1%; top: 28%; }.cap-net { left: 4%; bottom: 22%; }.cap-fuel { right: 4%; bottom: 19%; }
.security-copy > p { color: #d3e5ff; }.security-list { margin: 34px 0; padding: 0; list-style: none; }.security-list li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.2); }.security-list li > span { color: #8ec3ff; font: 700 10px ui-monospace, monospace; }.security-list strong { display: block; margin-bottom: 3px; color: #fff; }.security-list p { margin: 0; color: #c0d7f6; font-size: 13px; }

.conformance { background: var(--surface-2); }.scoreboard { display: grid; grid-template-columns: 2.4fr repeat(3, 1fr); border: 1px solid var(--line); background: var(--surface); border-radius: 16px; }.score-main { display: flex; align-items: center; gap: 24px; padding: 30px; }.score-ring { width: 95px; height: 95px; display: grid; grid-template-columns: auto auto; place-content: center; border: 7px solid var(--green); border-left-color: var(--surface-3); border-radius: 50%; }.score-ring strong { font-size: 26px; }.score-ring span { margin-top: 5px; font-size: 11px; }.status-live { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .12em; }.status-live i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; background: var(--green); border-radius: 50%; }.score-main h3 { margin: 5px 0 1px; font-size: 18px; }.score-main p { margin: 0; color: var(--muted); font: 8px ui-monospace, monospace; }.score-stat { display: flex; flex-direction: column; justify-content: center; padding: 30px; border-left: 1px solid var(--line); }.score-stat strong { font-size: 25px; }.score-stat span { color: var(--muted); font-size: 10px; }
.benchmark-grid { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 19px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; }.benchmark-grid div { padding: 22px; border-right: 1px solid var(--line); }.benchmark-grid div:last-child { border: 0; }.benchmark-grid span, .benchmark-grid strong { display: block; }.benchmark-grid span { color: var(--muted); font-size: 10px; }.benchmark-grid strong { margin-top: 9px; font-size: 18px; }.benchmark-grid small { color: var(--muted); font-size: 8px; font-weight: 500; }.benchmark-note { margin: 15px 0 0; color: var(--muted); font-size: 10px; text-align: center; }

.registry-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 80px; align-items: center; }.registry-copy > p { color: var(--muted); font-size: 17px; }.registry-features { margin: 30px 0; }.registry-features div { display: flex; align-items: flex-start; gap: 12px; margin: 15px 0; color: var(--muted); font-size: 13px; }.registry-features svg { width: 19px; flex: 0 0 auto; fill: none; stroke: var(--blue); stroke-width: 2; }.registry-features strong { display: block; color: var(--ink); font-size: 14px; }
.registry-browser { overflow: hidden; border: 1px solid var(--line); background: var(--surface); border-radius: 15px; box-shadow: var(--shadow); }.browser-bar { height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }.browser-bar i { width: 8px; height: 8px; background: #ff6b62; border-radius: 50%; }.browser-bar i:nth-child(2) { background: #f5bf4f; }.browser-bar i:nth-child(3) { background: #32c759; }.browser-bar span { width: 65%; margin-left: 10px; padding: 5px 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; font-size: 8px; }
.registry-ui { padding: 25px; }.package-header { display: flex; align-items: center; gap: 13px; }.cube { width: 47px; height: 47px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 9px; font-weight: 850; }.package-header small { color: var(--muted); font-size: 8px; }.package-header h3 { display: inline; margin: 0 7px 0 0; font-size: 20px; }.package-header div span { color: var(--green); font-size: 8px; }.package-header button { margin-left: auto; padding: 7px 18px; color: #fff; border: 0; background: var(--blue); border-radius: 5px; font-size: 10px; font-weight: 750; }.package-meta { display: flex; gap: 9px; margin: 20px 0; }.package-meta span { padding: 5px 9px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; font-size: 8px; }.package-meta b { color: var(--blue); }
.wit-panel { border: 1px solid var(--line); border-radius: 8px; }.wit-title { display: flex; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 9px; }.wit-title b { color: var(--blue); font: 9px ui-monospace, monospace; }.wit-columns { display: grid; grid-template-columns: 1fr 1fr; }.wit-columns div { padding: 13px; }.wit-columns div:first-child { border-right: 1px solid var(--line); }.wit-columns small { color: var(--muted); font-size: 7px; letter-spacing: .1em; }.wit-columns p { margin: 8px 0; font: 9px ui-monospace, monospace; }.wit-columns i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; background: var(--orange); border-radius: 50%; }.wit-columns div:last-child i { background: var(--green); }
.dependency-map { position: relative; height: 100px; margin-top: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; }.dependency-map svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: color-mix(in srgb, var(--blue) 35%, var(--line)); }.dep { position: absolute; z-index: 2; padding: 5px 8px; color: var(--muted); border: 1px solid var(--line); background: var(--surface); border-radius: 4px; font: 7px ui-monospace, monospace; }.dep.root { left: 50%; top: 9px; color: #fff; border-color: var(--blue); background: var(--blue); transform: translateX(-50%); }.dep.d1 { left: 12%; bottom: 10px; }.dep.d2 { right: 12%; bottom: 10px; }

.ecosystem { background: var(--surface-2); }.roadmap { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.roadmap-item { min-height: 335px; padding: 27px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }.road-status { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .12em; }.road-status i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--muted); border-radius: 50%; }.roadmap-item.done .road-status, .roadmap-item.active .road-status { color: var(--green); }.roadmap-item.done .road-status i, .roadmap-item.active .road-status i { background: var(--green); }.roadmap-item.active:nth-child(2) .road-status, .roadmap-item.active:nth-child(2) small { color: var(--orange); }.roadmap-item.active:nth-child(2) .road-status i { background: var(--orange); }.road-index { display: block; margin-top: 53px; color: var(--blue); font: 700 11px ui-monospace, monospace; }.roadmap-item h3 { margin: 13px 0 10px; font-size: 21px; }.roadmap-item p { color: var(--muted); font-size: 12px; }.roadmap-item small { color: var(--green); font-size: 9px; }.principle-banner { display: grid; grid-template-columns: 110px 1fr; gap: 30px; align-items: center; margin-top: 28px; padding: 35px 42px; color: #dce9ff; background: var(--dark); border-radius: 14px; }.principle-mark { font-size: 80px; line-height: 1; color: #64a8ff; text-align: center; }.principle-banner span { color: #77b5ff; font-size: 9px; font-weight: 800; letter-spacing: .13em; }.principle-banner h3 { margin: 4px 0; color: #fff; font-size: 23px; }.principle-banner p { margin: 0; color: #9fb1ca; font-size: 13px; }

.docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.doc-card { position: relative; min-height: 265px; padding: 31px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s, transform .2s; }.doc-card:hover { z-index: 2; background: var(--surface-2); transform: translateY(-3px); }.doc-card > span { color: var(--muted); font: 9px ui-monospace, monospace; }.doc-card svg { width: 30px; margin-top: 26px; fill: none; stroke: var(--blue); stroke-width: 1.7; }.doc-card h3 { margin: 17px 0 8px; font-size: 20px; }.doc-card p { margin: 0; color: var(--muted); font-size: 12px; }.doc-card b { position: absolute; bottom: 28px; color: var(--blue); font-size: 11px; }

.details-section { background: var(--surface-2); }.detail-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 100px; align-items: start; }.detail-sticky { position: sticky; top: 125px; }.detail-sticky p { color: var(--muted); }.detail-accordions { border-top: 1px solid var(--line); }.detail-accordions details { border-bottom: 1px solid var(--line); }.detail-accordions summary { display: flex; align-items: center; justify-content: space-between; padding: 25px 4px; font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; }.detail-accordions summary::-webkit-details-marker { display: none; }.detail-accordions summary i { position: relative; width: 17px; height: 17px; }.detail-accordions summary i::before, .detail-accordions summary i::after { content: ""; position: absolute; inset: 8px 0 auto; height: 1px; background: var(--ink); }.detail-accordions summary i::after { transform: rotate(90deg); transition: .2s; }.detail-accordions details[open] summary i::after { transform: rotate(0); }.detail-accordions details p { margin: -7px 40px 25px 4px; color: var(--muted); font-size: 14px; }

.quickstart { background: var(--surface); }.quickstart-card { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; padding: 67px; color: #e7f1ff; background: linear-gradient(130deg, #0b337b, #125be2 60%, #1583e8); border-radius: 24px; box-shadow: 0 26px 65px rgba(18,78,180,.2); }.quickstart-copy p { color: #c9dcf7; }.quickstart-terminal { overflow: hidden; background: #091529; border: 1px solid rgba(255,255,255,.2); border-radius: 13px; box-shadow: 0 25px 50px rgba(0,29,88,.27); }.quickstart-terminal .window-bar { justify-content: space-between; height: 45px; }.quickstart-terminal pre { min-height: 240px; margin: 0; padding: 28px; overflow: auto; color: #d3dff0; font: 11px/2 ui-monospace, monospace; }.quickstart-terminal .prompt { color: #65d5ff; }.quickstart-terminal .build { color: #e8b75d; }.quickstart-terminal .done, .quickstart-terminal .hello { color: #5bdaa0; }

.open-source { padding: 110px 0; color: #e8f2ff; background: var(--dark); }.open-source-layout { display: grid; grid-template-columns: .5fr 1.5fr; gap: 90px; align-items: center; }.oss-mark { display: grid; place-items: center; width: 220px; height: 220px; border: 1px solid #2a4263; background: radial-gradient(circle, #173664, #0b1930 70%); border-radius: 50%; }.oss-mark svg { width: 130px; fill: #fff; }.open-source p { max-width: 720px; color: #9fb1c9; font-size: 16px; }.oss-links { display: flex; flex-wrap: wrap; gap: 25px; margin-top: 29px; }.oss-links a { color: #7ab8ff; font-size: 13px; font-weight: 750; }

.site-footer { color: #b0bfd2; background: #071222; }.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 40px; padding-top: 75px; padding-bottom: 65px; }.footer-brand .brand { color: #fff; }.footer-brand p { margin: 17px 0 6px; font-size: 13px; }.footer-version { color: #62758f; font-size: 10px; }.footer-column { display: flex; flex-direction: column; gap: 10px; }.footer-column h3 { margin: 5px 0 12px; color: #fff; font-size: 12px; }.footer-column a { color: #8fa1b8; font-size: 11px; }.footer-column a:hover { color: #fff; }.footer-bottom { display: flex; justify-content: space-between; padding-top: 23px; padding-bottom: 23px; border-top: 1px solid #1d2c42; color: #63758d; font-size: 10px; }.footer-bottom div { display: flex; gap: 20px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .nav-shell { gap: 20px; }.primary-nav { gap: 18px; }.primary-nav a { font-size: 12px; }.text-link { display: none; }
  .hero { grid-template-columns: 1fr 1fr; gap: 35px; }.hero h1 { font-size: 54px; }
  .product-grid { grid-template-columns: 1fr 1fr; }.product-card:last-child { grid-column: span 2; min-height: 500px; }.product-card:last-child .card-visual { left: 50%; top: 65px; bottom: auto; height: 360px; }
  .benchmark-grid { grid-template-columns: repeat(3, 1fr); }.benchmark-grid div:nth-child(3) { border-right: 0; }.benchmark-grid div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .roadmap { grid-template-columns: repeat(2, 1fr); }.security-layout, .developer-layout { gap: 50px; }.registry-layout { gap: 45px; }
}

@media (max-width: 820px) {
  :root { --shell: min(100% - 36px, 680px); }.section-pad { padding: 85px 0; }
  .site-header { height: 68px; }.menu-toggle { display: block; margin-left: auto; }.nav-actions { gap: 8px; }.nav-actions .button { display: none; }
  .primary-nav { position: fixed; inset: 106px 0 auto; max-height: 0; display: flex; overflow: hidden; flex-direction: column; align-items: stretch; gap: 0; padding: 0 24px; border-bottom: 1px solid transparent; background: var(--surface); opacity: 0; transition: max-height .3s, opacity .2s, padding .3s; }.menu-open .primary-nav { max-height: 430px; padding-top: 15px; padding-bottom: 25px; border-color: var(--line); opacity: 1; box-shadow: 0 20px 40px rgba(0,0,0,.12); }.primary-nav a { padding: 13px 0; font-size: 16px; }.primary-nav a::after { display: none; }
  .menu-open .menu-toggle > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }.menu-open .menu-toggle > span:nth-child(2) { opacity: 0; }.menu-open .menu-toggle > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero { min-height: 0; grid-template-columns: 1fr; padding-top: 70px; padding-bottom: 110px; }.hero-copy { text-align: center; }.hero-lede { margin-inline: auto; }.hero-actions, .hero-proof { justify-content: center; }.hero-product { max-width: 620px; margin: 25px auto 0; width: 100%; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }.proof-grid div:nth-child(2) { border-right: 0; }.proof-grid div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .product-grid { grid-template-columns: 1fr; }.product-card:last-child { grid-column: auto; min-height: 590px; }.product-card:last-child .card-visual { left: 30px; top: auto; bottom: 27px; height: 165px; }
  .split-heading, .developer-layout, .security-layout, .registry-layout, .detail-layout, .quickstart-card, .open-source-layout { grid-template-columns: 1fr; gap: 50px; }.split-heading { align-items: start; }.detail-sticky { position: static; }.capability-grid { grid-template-columns: 1fr; }
  .security-visual { order: 2; min-height: 430px; }.scoreboard { grid-template-columns: repeat(3, 1fr); }.score-main { grid-column: 1 / -1; }.score-stat { border-top: 1px solid var(--line); }.score-stat:nth-child(2) { border-left: 0; }
  .docs-grid { grid-template-columns: repeat(2, 1fr); }.quickstart-card { padding: 48px; }.oss-mark { width: 170px; height: 170px; }.footer-grid { grid-template-columns: 2fr repeat(2, 1fr); }.footer-brand { grid-row: span 2; }
}

@media (max-width: 560px) {
  :root { --shell: calc(100% - 28px); }.announcement { min-height: 44px; font-size: 11px; }.announcement span { display: none; }.primary-nav { top: 112px; }
  .brand { font-size: 22px; }.brand-mark { width: 32px; height: 32px; }.nav-actions { margin-left: 0; }
  .hero { padding-top: 55px; }.hero h1 { font-size: 44px; }.hero-lede { font-size: 16px; }.hero-actions .button { width: 100%; }.hero-proof { gap: 12px; }.runtime-card { right: -5px; width: 92%; }.terminal-body { min-height: 230px; padding: 24px 20px 50px; font-size: 11px; }.orbit { display: none; }
  .section-heading h2, .split-heading h2, .developer-copy h2, .security-copy h2, .registry-copy h2, .detail-sticky h2, .quickstart h2, .open-source h2 { font-size: 36px; }.section-heading p, .split-heading > p { font-size: 15px; }
  .proof-grid div { padding: 22px 8px; }.proof-grid strong { font-size: 20px; }
  .product-card { min-height: 620px; padding: 24px; }.product-card > p { min-height: auto; }.card-visual, .product-card:last-child .card-visual { left: 24px; right: 24px; }.capability-card { min-height: 320px; padding: 30px 24px; }
  .code-panel { min-height: 390px; padding: 25px 18px; }.code-panel pre { font-size: 10px; }.copy-button { top: 12px; right: 10px; }
  .security-visual { min-height: 350px; transform: scale(.85); }.scoreboard { grid-template-columns: 1fr; }.score-main { flex-direction: column; text-align: center; }.score-stat { border-left: 0; align-items: center; padding: 18px; }.benchmark-grid { grid-template-columns: repeat(2, 1fr); }.benchmark-grid div { border-bottom: 1px solid var(--line); }.benchmark-grid div:nth-child(2n) { border-right: 0; }.benchmark-grid div:nth-last-child(-n+2) { border-bottom: 0; }
  .registry-ui { padding: 17px; }.wit-columns { grid-template-columns: 1fr; }.wit-columns div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .roadmap { grid-template-columns: 1fr; }.principle-banner { grid-template-columns: 1fr; padding: 30px; }.principle-mark { text-align: left; }
  .docs-grid { grid-template-columns: 1fr; }.quickstart-card { padding: 36px 23px; }.quickstart-terminal pre { padding: 23px 16px; font-size: 9px; }
  .open-source-layout { gap: 35px; }.oss-mark { width: 130px; height: 130px; }.oss-mark svg { width: 80px; }.footer-grid { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: 1 / -1; grid-row: auto; margin-bottom: 15px; }.footer-bottom { flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms!important; transition-duration: .01ms!important; }
  .reveal { opacity: 1; transform: none; }
}