/* SPDX-License-Identifier: Apache-2.0 */
:root {
  color-scheme:dark;
  --bg:#101211;
  --surface:#181b19;
  --surface-2:#1e221f;
  --text:#f1f4ee;
  --muted:#a3aba5;
  --line:#323833;
  --accent:#d3fa6a;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:Inter,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
}

a,button {
  -webkit-tap-highlight-color:transparent;
}

button,a {
  touch-action:manipulation;
}

button {
  cursor:pointer;
}

button:focus-visible,a:focus-visible,[tabindex="0"]:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px;
}

::selection {
  background:var(--accent);
  color:var(--bg);
}

.wrap {
  width:min(1240px,calc(100% - 6rem));
  margin-inline:auto;
}

.hero > *,
.workflow-layout > *,
.install-layout > *,
.open-source > * {
  min-width:0;
}

.header {
  min-height:100px;
  padding-block:1rem;
  flex-wrap:wrap;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:1.5rem;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:1.75rem;
  line-height:1;
  font-weight:750;
  letter-spacing:-.06em;
  white-space:nowrap;
}

.brand-symbol {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.9rem;
  height:1.9rem;
  background:var(--accent);
  color:var(--bg);
  font-family:var(--mono);
  font-weight:500;
  font-size:1.5rem;
  letter-spacing:-.15em;
  padding-right:.2rem;
  margin-right:.15rem;
  border-radius:4px;
}

.brand-label {
  font-family:var(--mono);
  font-size:.8rem;
  letter-spacing:.04em;
  font-weight:400;
  color:var(--muted);
  border:1px solid var(--line);
  padding:.3rem .4rem;
  margin-left:.35rem;
}

.header nav,.footer nav {
  display:flex;
  align-items:center;
  gap:2rem;
  font-size:.875rem;
}

.header nav a:hover,.footer nav a:hover {
  color:var(--accent);
}

.github-link {
  border:1px solid #515a52;
  padding:.5rem .9rem;
  border-radius:5px;
}

.github-link span {
  margin-left:.8rem;
}

.hero {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:4.5rem;
  align-items:center;
  padding-top:6rem;
  padding-bottom:6rem;
}

.release {
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--muted);
}

.release>span:first-child {
  color:var(--accent);
  padding-right:.75rem;
  border-right:1px solid var(--line);
  letter-spacing:.06em;
}

.release:hover {
  color:var(--text);
}

h1 {
  font-size:clamp(3.7rem,6.2vw,5.8rem);
  line-height:1.04;
  font-weight:550;
  letter-spacing:-.065em;
  margin:1.9rem 0 1.7rem;
}

h1 em {
  font-style:normal;
  color:var(--accent);
}

.hero-description {
  font-size:1.125rem;
  line-height:1.7;
  color:var(--muted);
  max-width:26rem;
  margin:0 0 2.1rem;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2rem;
  min-height:52px;
  padding:.75rem 1.4rem;
  font-size:.9375rem;
  font-weight:650;
  border-radius:5px;
  transition:background .15s,transform .15s;
}

.button:hover {
  transform:translateY(-2px);
}

.primary {
  background:var(--accent);
  color:var(--bg);
}

.primary:hover {
  background:#e2ff97;
}

.platform-note {
  font-size:.8rem;
  color:var(--muted);
  margin:1rem 0 0;
  font-family:var(--mono);
}

.terminal {
  border:1px solid #46513f;
  border-radius:10px;
  background:linear-gradient(135deg,#1b201a,#141815);
  box-shadow:0 24px 70px #0003;
  transform:rotate(-1.2deg);
  overflow:hidden;
}

.terminal-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1.15rem 1.35rem;
  border-bottom:1px solid #384032;
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--muted);
}

.terminal-title {
  font-size:.8125rem;
  color:var(--text);
}

.terminal-title>span {
  color:var(--accent);
  margin-right:.5rem;
}

.terminal-body {
  padding:2rem 1.25rem 2.2rem;
  overflow-x:auto;
}

.terminal-line {
  display:flex;
  gap:1.25rem;
  white-space:nowrap;
  min-height:1.8rem;
  font-size:.8125rem;
  line-height:1.8rem;
  font-family:var(--mono);
}

.line-number {
  width:1rem;
  flex-shrink:0;
  color:#77816f;
  font-size:.75rem;
  user-select:none;
}

.comment {
  color:#a5ae9d;
}

.prompt {
  color:var(--accent);
  margin-right:.4rem;
}

.flag {
  color:#c0d6ae;
}

.cursor {
  display:inline-block;
  width:.5rem;
  height:.95rem;
  vertical-align:middle;
  background:var(--accent);
  animation:blink 1.4s step-end infinite;
}

.terminal-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.85rem 1.35rem;
  background:#232b1e;
  color:#bdd2a7;
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.07em;
}

.terminal-footer>span:last-child {
  font-size:1rem;
}

.principles {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:1.5rem;
  font-size:.8125rem;
  color:var(--muted);
  font-family:var(--mono);
}

.principles a:hover {
  color:var(--accent);
}

.section {
  padding-block:6.5rem;
}

.section-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:4.5rem;
  align-items:end;
  margin-bottom:3rem;
}

.eyebrow {
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.1em;
  color:var(--muted);
  margin:0 0 1.3rem;
}

.section-heading>.eyebrow {
  grid-column:1/-1;
}

h2 {
  font-size:clamp(2.25rem,3.6vw,3.4rem);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.05em;
  margin:0;
}

h3 {
  font-size:1.25rem;
  line-height:1.35;
  font-weight:550;
  margin:0;
}

.section-heading>p:last-child {
  color:var(--muted);
  max-width:24rem;
  margin:0 0 .3rem;
}

.workflow-layout {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}

.workflow-tabs {
  background:#131614;
  padding:1.25rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.workflow-tab {
  display:flex;
  align-items:start;
  gap:1rem;
  text-align:left;
  width:100%;
  padding:1.5rem 1.1rem;
  background:none;
  border:1px solid transparent;
  border-radius:5px;
  color:var(--text);
  min-height:110px;
}

.tab-number {
  font-family:var(--mono);
  font-size:.75rem;
  line-height:1.75rem;
  color:var(--muted);
}

.workflow-tab strong {
  display:block;
  font-size:1.0625rem;
  font-weight:550;
  line-height:1.65;
  margin-bottom:.4rem;
}

.workflow-tab>span:nth-child(2) {
  flex:1;
}

.workflow-tab>span:nth-child(2)>span {
  display:block;
  font-size:.875rem;
  color:var(--muted);
  line-height:1.6;
}

.tab-arrow {
  font-size:1.25rem;
  color:var(--muted);
}

.workflow-tab[aria-selected="true"] {
  border-color:#4c593c;
  background:#252e1e;
}

.workflow-tab[aria-selected="true"] .tab-number,.workflow-tab[aria-selected="true"] .tab-arrow {
  color:var(--accent);
}

.workflow-tab:hover {
  background:var(--surface-2);
}

.workflow-panels {
  background:var(--surface);
  border-left:1px solid var(--line);
}

.workflow-panel {
  padding:2.5rem;
  min-height:510px;
}

.workflow-panel[hidden] {
  display:none;
}

.panel-label {
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--accent);
  letter-spacing:.07em;
  margin:0 0 1rem;
}

.workflow-panel h3 {
  font-size:2rem;
  line-height:1.15;
  letter-spacing:-.035em;
  margin-bottom:1.25rem;
}

.workflow-panel>p:not(.panel-label) {
  color:var(--muted);
}

pre {
  border:1px solid var(--line);
  border-radius:4px;
  padding:1.1rem 1.25rem;
  background:#0f1210;
  overflow-x:auto;
  font-size:.8125rem;
  line-height:1.9;
  margin:1.5rem 0;
}

code {
  font-family:var(--mono);
}

.fineprint {
  font-size:.875rem;
  line-height:1.65;
  color:var(--muted);
}

.workflow-panel .fineprint {
  margin-bottom:1.2rem;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  font-size:.875rem;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-color:#5d665c;
}

.text-link:hover {
  color:var(--accent);
  text-decoration-color:var(--accent);
}

.install-section {
  padding:5rem 0;
  background:var(--accent);
  color:var(--bg);
}

.install-layout {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:5rem;
  align-items:start;
}

.install-section .eyebrow {
  color:#3d5126;
}

.install-section h2 {
  margin-bottom:1.5rem;
}

.install-section .fineprint {
  color:#3c4f2b;
  font-size:.8125rem;
  margin-top:1.25rem;
}

.install-section .text-link {
  margin-top:.8rem;
  text-decoration-color:#718d49;
}

.install-section .text-link:hover {
  color:#405c14;
}

.install-section a:focus-visible {
  outline-color:var(--bg);
}

.install-steps {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}

.step-heading {
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:.7rem;
}

.step-heading>span:first-child {
  font-size:.75rem;
  font-family:var(--mono);
  color:#41592a;
}

.step-heading h3 {
  font-size:1rem;
  font-weight:600;
}

.step-meta {
  margin-left:auto;
  font-family:var(--mono);
  font-size:.75rem;
}

.command {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:var(--bg);
  color:var(--text);
  border-radius:4px;
  padding:1.1rem 1rem 1.1rem 1.2rem;
}

.command code {
  font-size:.8125rem;
  line-height:1.7;
  overflow-wrap:anywhere;
  min-width:0;
}

.copy-button {
  background:transparent;
  color:var(--muted);
  border:1px solid #4f594f;
  border-radius:4px;
  padding:.35rem .6rem;
  min-width:58px;
  min-height:36px;
  font-size:.75rem;
  flex-shrink:0;
}

.copy-button:hover {
  color:var(--accent);
  border-color:var(--accent);
}

.open-source {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:5rem;
  align-items:center;
}

.open-source p:not(.eyebrow) {
  max-width:36rem;
  color:var(--muted);
}

.open-source h2 {
  margin-bottom:1.5rem;
}

.source-actions {
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:1.5rem;
  justify-self:end;
}

.secondary {
  border:1px solid #626c60;
  background:transparent;
  color:var(--text);
}

.secondary:hover {
  background:var(--surface-2);
}

.footer {
  padding-block:2rem;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.footer .brand {
  font-size:1.35rem;
}

.footer .brand-symbol {
  width:1.55rem;
  height:1.55rem;
  font-size:1.2rem;
}

.footer .brand-label {
  font-size:.75rem;
}

.footer-note {
  font-size:.8125rem;
  color:var(--muted);
}

.footer nav {
  font-size:.8125rem;
  gap:1.25rem;
  color:var(--muted);
}

.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;
}

.skip-link {
  position:fixed;
  left:1rem;
  top:-5rem;
  padding:.7rem 1rem;
  background:var(--accent);
  color:var(--bg);
  z-index:10;
}

.skip-link:focus {
  top:1rem;
}

@keyframes blink {
  50% {
    opacity:0;
  }
}

@media(min-width:1440px) {
  .hero {
    padding-block:7rem;
  }
  .terminal-line {
    font-size:.875rem;
    line-height:2rem;
    min-height:2rem;
  }
}

@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 4rem);
  }
  .hero {
    gap:2.5rem;
  }
  .terminal-body {
    padding-inline:1rem;
  }
  .terminal-line {
    gap:.85rem;
    font-size:.75rem;
  }
  .install-layout {
    gap:2.5rem;
  }
  .workflow-panel {
    padding:2rem;
  }
  .footer-note {
    display:none;
  }
}

@media(max-width:800px) {
  .header {
    min-height:82px;
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:4rem;
    gap:3.5rem;
  }
  .hero-copy {
    max-width:36rem;
  }
  h1 {
    font-size:4.7rem;
  }
  .hero-description {
    max-width:30rem;
  }
  .terminal {
    transform:none;
    max-width:100%;
  }
  .terminal-line {
    font-size:.875rem;
    gap:1.5rem;
    line-height:2rem;
    min-height:2rem;
  }
  .terminal-body {
    padding:1.5rem;
  }
  .principles {
    flex-wrap:wrap;
    gap:1rem 2rem;
  }
  .principles>* {
    flex-basis:calc(50% - 1rem);
  }
  .section {
    padding-block:4.5rem;
  }
  .section-heading {
    gap:1.5rem;
    grid-template-columns:1fr;
  }
  .section-heading>.eyebrow {
    margin:0;
  }
  .workflow-layout {
    grid-template-columns:1fr;
  }
  .workflow-tabs {
    padding:1rem;
    gap:.25rem;
  }
  .workflow-tab {
    min-height:auto;
    padding:1rem;
  }
  .workflow-panels {
    border-left:0;
    border-top:1px solid var(--line);
  }
  .workflow-panel {
    min-height:0;
  }
  .install-layout {
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .install-section {
    padding-block:4rem;
  }
  .open-source {
    gap:2.5rem;
    grid-template-columns:1fr;
  }
  .source-actions {
    justify-self:start;
  }
  .footer {
    flex-wrap:wrap;
  }
}

@media(max-width:480px) {
  .wrap {
    width:calc(100% - 2.5rem);
  }
  .header {
    gap:1rem;
  }
  .header .brand {
    font-size:1.45rem;
  }
  .header nav {
    gap:1rem;
    font-size:.8125rem;
  }
  .header nav>a:first-child {
    display:none;
  }
  .github-link {
    padding:0;
    border:0;
  }
  .github-link span {
    margin-left:.15rem;
  }
  .brand-label {
    margin-left:0;
  }
  .hero {
    padding-top:3.3rem;
  }
  h1 {
    font-size:clamp(3rem,13vw,3.9rem);
  }
  .hero-description {
    font-size:1.0625rem;
  }
  .release {
    font-size:.6875rem;
    gap:.55rem;
  }
  .release>span:first-child {
    padding-right:.55rem;
  }
  .terminal-body {
    padding:1.25rem .9rem;
  }
  .terminal-line {
    font-size:.75rem;
    gap:.7rem;
    min-height:1.7rem;
    line-height:1.7rem;
  }
  .terminal-bar,.terminal-footer {
    padding-inline:1rem;
  }
  .terminal-title {
    font-size:.75rem;
  }
  .terminal-footer {
    font-size:.625rem;
  }
  .principles {
    font-size:.75rem;
    gap:1rem;
  }
  .workflow-panel {
    padding:1.5rem;
  }
  .workflow-tab {
    padding:.9rem .7rem;
    gap:.75rem;
  }
  .workflow-tab strong {
    font-size:1rem;
  }
  .command {
    padding:.9rem;
    gap:.6rem;
  }
  .command code {
    font-size:.75rem;
  }
  .footer {
    gap:1.5rem;
  }
  .footer nav {
    gap:1.3rem;
  }
}

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

/* Keep native language names visible at every viewport size. */
.header nav {
  flex-wrap:wrap;
  gap:1rem 1.5rem;
}
.language-switch {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.2rem;
  border:1px solid var(--line);
  border-radius:5px;
}
.language-switch a {
  padding:.35rem .55rem;
  white-space:nowrap;
  border-radius:3px;
}
.language-switch a[aria-current="page"],
.language-switch a[aria-current="page"]:hover {
  background:var(--accent);
  color:var(--bg);
}
:lang(zh-CN) h1, :lang(zh-CN) h2, :lang(zh-CN) .workflow-panel h3 {
  letter-spacing:-.025em;
  line-height:1.25;
}
:lang(zh-CN) h1 {
  font-size:clamp(2.8rem,5.3vw,5rem);
}
@media(max-width:600px) {
  .header nav {
    width:100%;
    justify-content:space-between;
    gap:.5rem;
  }
}