:root {
  color-scheme: dark;
  --ink: #f0f2ed;
  --muted: #989e98;
  --dim: #6f756f;
  --paper: #0b0d0c;
  --panel: #111412;
  --panel-raised: #171b18;
  --line: rgba(239, 244, 236, .12);
  --green: #a7f07b;
  --green-dark: #4c742f;
  --amber: #f5c96a;
  --blue: #9ac7ff;
  --radius: 22px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; z-index: 20; top: 8px; left: 8px; padding: 10px 14px; background: var(--green); color: #10140d; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.section-shell, .site-header { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.site-header { height: 84px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.brand-mark { width: 36px; aspect-ratio: 1; display: inline-grid; place-items: center; border-radius: 50%; background: var(--green); color: #0c1109; font-family: "DM Mono", monospace; font-weight: 500; }
.nav-links { display: flex; gap: 32px; font-size: 14px; color: var(--muted); }
.nav-links a { padding: 10px 0; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.language-switcher { justify-self: end; display: flex; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.language-switcher button { border: 0; color: var(--dim); background: transparent; border-radius: 999px; padding: 7px 10px; cursor: pointer; font: 500 11px "DM Mono", monospace; }
.language-switcher button.selected { background: var(--panel-raised); color: var(--ink); }

.hero { min-height: 720px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 72px; padding-block: 96px; }
.eyebrow { margin: 0 0 20px; color: var(--green); font: 500 11px/1.4 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .16em; }
.hero h1, .release-hero h1 { max-width: 750px; margin: 0; font-size: clamp(54px, 7vw, 92px); line-height: .98; letter-spacing: -.066em; font-weight: 600; text-wrap: balance; }
.hero-lead { max-width: 590px; margin: 30px 0 0; color: var(--muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.7; }
.hero-actions { display: flex; gap: 12px; margin-top: 38px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; transition: transform .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.button-primary { color: #0d120a; background: var(--green); border-color: var(--green); }
.button-secondary { background: var(--panel); }
.signal-stage { position: relative; min-height: 530px; display: grid; place-items: center; }
.signal-stage::before { content: ""; position: absolute; inset: 8%; background: radial-gradient(circle, rgba(167,240,123,.15), transparent 67%); filter: blur(20px); }
.signal-orbit { position: absolute; border: 1px solid rgba(167,240,123,.16); border-radius: 50%; }
.signal-orbit-one { width: 480px; height: 280px; transform: rotate(22deg); }
.signal-orbit-two { width: 370px; height: 490px; transform: rotate(-29deg); }
.event-card { position: relative; width: min(430px, 94%); padding: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; background: rgba(20,24,21,.88); box-shadow: 0 30px 90px rgba(0,0,0,.45); backdrop-filter: blur(18px); }
.event-card-head, .event-app, .event-card footer { display: flex; align-items: center; }
.event-card-head { justify-content: space-between; }
.event-app { gap: 9px; font-size: 13px; }
.app-dot { width: 27px; aspect-ratio: 1; display: grid; place-items: center; background: #050606; border-radius: 50%; font: 500 11px "DM Mono"; }
.event-pill { padding: 6px 9px; background: rgba(154,199,255,.13); color: var(--blue); border-radius: 999px; font-size: 11px; }
.event-art { height: 130px; margin: 24px 0; padding: 17px; display: flex; align-items: end; justify-content: space-between; border-radius: 17px; background: linear-gradient(135deg, #27372b, #171e19 45%, #504730); color: rgba(255,255,255,.7); font: 400 43px "DM Mono"; letter-spacing: -.08em; }
.event-kicker { margin: 0 0 8px; color: var(--green); font: 10px "DM Mono"; text-transform: uppercase; letter-spacing: .14em; }
.event-card h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; }
.event-card > p:not(.event-kicker) { margin: 12px 0 20px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.event-progress { height: 3px; overflow: hidden; background: rgba(255,255,255,.09); border-radius: 99px; }
.event-progress span { display: block; width: 65%; height: 100%; background: var(--green); }
.event-card footer { gap: 8px; padding-top: 16px; color: var(--muted); font: 10px "DM Mono"; }
.pulse { width: 7px; height: 7px; background: var(--green); box-shadow: 0 0 0 5px rgba(167,240,123,.09); border-radius: 50%; }

.principles { padding: 120px 0; border-block: 1px solid var(--line); background: #0e110f; }
.section-heading { max-width: 660px; }
.section-heading h2 { margin: 0; font-size: clamp(37px, 5vw, 58px); line-height: 1.08; letter-spacing: -.055em; font-weight: 600; text-wrap: balance; }
.section-heading > p:not(.eyebrow) { margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.feature-grid { margin-top: 72px; display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.feature-grid article { min-height: 260px; padding: 34px; border-bottom: 1px solid var(--line); }
.feature-grid article:nth-child(odd) { border-right: 1px solid var(--line); }
.feature-grid article:nth-last-child(-n+2) { border-bottom: 0; }
.feature-index { color: var(--green); font: 11px "DM Mono"; }
.feature-grid h3 { margin: 66px 0 12px; font-size: 22px; letter-spacing: -.035em; }
.feature-grid p { margin: 0; max-width: 440px; color: var(--muted); font-size: 14px; line-height: 1.72; }

.ecosystem { padding-block: 130px; }
.compact-heading { max-width: 780px; }
.connection-board { min-height: 260px; margin-top: 70px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
.connection-group { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.connection-group > span { color: var(--dim); font: 10px "DM Mono"; text-transform: uppercase; letter-spacing: .12em; }
.connection-group div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.connection-group b { padding: 8px 11px; border-radius: 8px; background: var(--panel-raised); font-size: 12px; font-weight: 500; }
.connection-core { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.connection-core .brand-mark { width: 56px; box-shadow: 0 0 60px rgba(167,240,123,.22); }
.connection-core strong { font-size: 12px; }
.align-end { text-align: right; }
.align-end div { justify-content: end; }

.deploy-section { padding-block: 120px; background: var(--green); color: #0a0e08; }
.deploy-section .eyebrow { color: var(--green-dark); }
.deploy-section .section-heading > p:not(.eyebrow) { color: rgba(10,14,8,.68); }
.deploy-section small { display: block; margin-top: 26px; color: rgba(10,14,8,.58); }
.deploy-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 80px; }
.code-panel { margin: 0; padding: 32px; overflow: auto; border-radius: var(--radius); background: #0d100e; color: #e1e8dd; box-shadow: 0 32px 80px rgba(34,60,18,.25); font: 13px/1.8 "DM Mono", monospace; }
.code-comment { color: #6f7a6d; }
.code-string { color: var(--amber); }
.code-panel [data-latest-tag] { color: var(--green); }

.versions { padding-block: 120px; }
.version-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.version-card { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: start; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); transition: background .2s, transform .2s; }
.version-card:hover { background: var(--panel-raised); transform: translateY(-3px); }
.status-dot { width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; }
.status-dot.beta { background: var(--amber); }
.status-dot.release { background: var(--green); }
.version-card small { color: var(--dim); font: 10px "DM Mono"; text-transform: uppercase; }
.version-card h3 { margin: 5px 0 7px; font-size: 21px; }
.version-card p { margin: 0; color: var(--muted); font-size: 13px; }
.version-card > strong { font: 500 12px "DM Mono"; color: var(--green); }
.site-footer { min-height: 120px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.site-footer .brand { color: var(--ink); }
.site-footer p { text-align: center; }

.release-main { min-height: 80vh; padding-block: 100px 140px; }
.release-hero { max-width: 870px; }
.release-hero h1 { font-size: clamp(50px, 7vw, 88px); }
.release-hero > p:not(.eyebrow) { max-width: 680px; margin: 28px 0 0; color: var(--muted); font-size: 18px; line-height: 1.7; }
.release-tabs { position: sticky; z-index: 5; top: 14px; width: fit-content; display: flex; gap: 4px; margin: 68px 0 38px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(11,13,12,.82); backdrop-filter: blur(16px); }
.release-tabs button { padding: 9px 15px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; }
.release-tabs button.selected { color: #0b0e09; background: var(--green); }
.release-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.release-card { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.release-card header { display: flex; align-items: center; justify-content: space-between; }
.release-card header > div { display: flex; gap: 7px; }
.release-channel, .latest-pill, .change-type { display: inline-flex; padding: 5px 8px; border-radius: 999px; font: 500 9px "DM Mono"; text-transform: uppercase; letter-spacing: .06em; }
.channel-beta { color: var(--amber); background: rgba(245,201,106,.1); }
.channel-release { color: var(--green); background: rgba(167,240,123,.1); }
.latest-pill { color: var(--blue); background: rgba(154,199,255,.1); }
.release-card time { color: var(--muted); font: 12px "DM Mono"; }
.release-card h2 { margin: 30px 0 25px; font-size: 24px; line-height: 1.35; letter-spacing: -.035em; }
.change-list { margin: 0; padding: 0; list-style: none; }
.change-list li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); color: #c8cdc6; font-size: 13px; line-height: 1.6; }
.change-type { margin-top: 1px; color: var(--muted); background: rgba(255,255,255,.055); }
.type-feature { color: var(--green); }
.type-fix { color: var(--blue); }
.type-security { color: var(--amber); }
.upgrade-notes { margin-top: 22px; padding: 18px; border-left: 2px solid var(--amber); background: rgba(245,201,106,.055); color: var(--muted); font-size: 12px; }
.upgrade-notes strong { color: var(--amber); }
.upgrade-notes ul { margin: 10px 0 0; padding-left: 17px; }
.release-link { display: inline-flex; gap: 8px; margin-top: 28px; color: var(--green); font-size: 12px; }
.empty-state { grid-column: 1 / -1; padding: 70px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }

@media (max-width: 900px) {
  .section-shell, .site-header { width: min(100% - 32px, 720px); }
  .site-header { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .hero { grid-template-columns: 1fr; padding-block: 80px; }
  .signal-stage { min-height: 500px; }
  .deploy-grid { grid-template-columns: 1fr; }
  .connection-board { grid-template-columns: 1fr; }
  .connection-core { flex-direction: row; justify-content: center; }
  .align-end, .align-end div { text-align: left; justify-content: start; }
  .release-list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .section-shell, .site-header { width: calc(100% - 24px); }
  .site-header { height: 72px; }
  .brand-mark { width: 32px; }
  .hero { min-height: auto; padding-block: 68px; }
  .hero h1, .release-hero h1 { font-size: clamp(46px, 15vw, 64px); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .signal-stage { min-height: 450px; }
  .signal-orbit { display: none; }
  .event-card { width: 100%; }
  .principles, .ecosystem, .deploy-section, .versions { padding-block: 86px; }
  .feature-grid, .version-grid { grid-template-columns: 1fr; }
  .feature-grid article, .feature-grid article:nth-child(odd) { min-height: 230px; border-right: 0; border-bottom: 1px solid var(--line); }
  .feature-grid article:last-child { border-bottom: 0; }
  .feature-grid h3 { margin-top: 45px; }
  .version-card { grid-template-columns: auto 1fr; }
  .version-card > strong { grid-column: 2; }
  .site-footer { padding-block: 30px; grid-template-columns: 1fr auto; }
  .site-footer p { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .release-main { padding-block: 72px 100px; }
  .release-card { padding: 22px; }
}

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