:root {
  color-scheme: dark;
  --bg: #030a15;
  --surface: #091526;
  --surface-raised: #0f1f35;
  --fg: #f1f5fb;
  --muted: #a6b4c8;
  --dim: #71839e;
  --border: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(148, 163, 184, 0.24);
  --blue: #2b4b70;
  --blue-hover: #355f89;
  --blue-fg: #f8fafc;
  --cyan: #38bdf8;
  --orange: #ff6600;
  --green: #34d399;
  --control-surface: #061123;
  --control-hover: #10243d;
  --control-active: #1a2f4d;
  --control-active-fg: #f8fafc;
  --command-surface: #060b13;
  --command-surface-raised: #0b1521;
  --command-border: rgba(148, 163, 184, .4);
  --command-fg: #eef3f8;
  --command-muted: #9baabd;
  --command-shadow: rgba(0, 0, 0, .82);
  --setup-surface: #245989;
  --setup-hover: #2d6ea5;
  --setup-fg: #f7fbff;
  --setup-border: rgba(116, 184, 232, .5);
  --grid-line: rgba(148, 163, 184, .055);
  --sans: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #eaf6ff;
  --surface: #f6fbff;
  --surface-raised: #e2f1fc;
  --fg: #0f172a;
  --muted: #475569;
  --dim: #64748b;
  --border: rgba(15, 23, 42, 0.1);
  --border-strong: rgba(15, 23, 42, 0.18);
  --cyan: #0369a1;
  --blue: #c9e2f8;
  --blue-hover: #b5d7ef;
  --blue-fg: #193452;
  --orange: #c2410c;
  --green: #047857;
  --control-surface: #d9edf9;
  --control-hover: #eaf7ff;
  --control-active: #ffffff;
  --control-active-fg: #0f172a;
  --command-surface: #c4daea;
  --command-surface-raised: #d3e4f1;
  --command-border: rgba(28, 64, 94, .3);
  --command-fg: #17324a;
  --command-muted: #3f5970;
  --command-shadow: rgba(30, 76, 110, .2);
  --setup-surface: #327fbd;
  --setup-hover: #286da6;
  --setup-fg: #ffffff;
  --setup-border: rgba(20, 68, 108, .38);
  --grid-line: rgba(14, 116, 144, .11);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { min-width: 320px; overflow-x: hidden; background: var(--bg); color: var(--fg); font-family: var(--sans); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
.display { letter-spacing: -0.045em; line-height: 1.04; }
.eyebrow { display: block; color: var(--cyan); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

.nav { position: sticky; z-index: 10; top: 0; border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(16px); }
.nav.is-scrolled { border-bottom-color: var(--border); }
.nav-inner { width: min(1200px, calc(100% - 48px)); min-height: 64px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.nav-brand, .nav-right, .nav-stars { display: inline-flex; align-items: center; }
.nav-brand { gap: 9px; font-weight: 700; letter-spacing: -0.02em; }
.nav-brand-img { width: 24px; height: 24px; border-radius: 5px; }
.nav-affiliation-logo { width: 65px; height: 20px; object-fit: contain; }
[data-theme="dark"] .nav-affiliation-logo { filter: brightness(1.7) saturate(.9); }
.nav-right { gap: 4px; }
.nav-link, .nav-theme-btn { padding: 7px 9px; color: var(--muted); font-size: 13px; }
.nav-link:hover, .nav-theme-btn:hover { color: var(--fg); }
.nav-theme-btn { display: grid; place-items: center; border-radius: 6px; }
.nav-theme-btn:hover { background: var(--surface-raised); }
.nav-stars { gap: 7px; margin-left: 7px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 12px; }
.nav-stars:hover { border-color: var(--border-strong); color: var(--fg); }
.nav-stars svg { color: #fbbf24; }

.hero { position: relative; overflow: hidden; padding: 80px 0 64px; text-align: center; }
.hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 70% 55% at 50% 25%, #000 15%, transparent 100%); }
.hero-inner { position: relative; z-index: 1; }
.hero-float { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.hero-float-mark { position: absolute; display: block; will-change: transform; }
.hf-uit { left: 7%; top: 165px; animation: hero-float-uit 9s ease-in-out infinite; }
.hf-codex { right: 7%; top: 138px; animation: hero-float-codex 10s ease-in-out infinite; }
.hf-terminal { left: 6%; top: 438px; animation: hero-float-terminal 11s ease-in-out infinite; }
.hf-uit-logo { right: 6%; top: 420px; animation: hero-float-logo 9.5s ease-in-out infinite; }
.hero-float-card { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--border-strong) 85%, var(--cyan) 15%); border-radius: 15px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 88%, transparent), color-mix(in srgb, var(--surface) 72%, transparent)); box-shadow: 0 20px 38px -24px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .08); color: var(--muted); transform: rotate(-5deg); }
.hf-codex .hero-float-card, .hf-uit-logo .hero-float-card { transform: rotate(6deg); }
.hero-float-card img { width: 27px; height: 27px; object-fit: contain; }
@keyframes hero-float-uit { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); } 26% { transform: translate3d(66px, -44px, 0) rotate(5deg); } 55% { transform: translate3d(26px, 54px, 0) rotate(-6deg); } 78% { transform: translate3d(-42px, 18px, 0) rotate(3deg); } }
@keyframes hero-float-codex { 0%, 100% { transform: translate3d(0, 0, 0) rotate(3deg); } 24% { transform: translate3d(-62px, 48px, 0) rotate(-5deg); } 53% { transform: translate3d(-21px, -58px, 0) rotate(6deg); } 77% { transform: translate3d(46px, -17px, 0) rotate(-3deg); } }
@keyframes hero-float-terminal { 0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); } 29% { transform: translate3d(57px, -54px, 0) rotate(-5deg); } 58% { transform: translate3d(-31px, -23px, 0) rotate(6deg); } 80% { transform: translate3d(-53px, 40px, 0) rotate(-3deg); } }
@keyframes hero-float-logo { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); } 25% { transform: translate3d(-64px, -36px, 0) rotate(5deg); } 57% { transform: translate3d(29px, 52px, 0) rotate(-6deg); } 79% { transform: translate3d(51px, -14px, 0) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .hero-float-mark { animation: none; } .hero-install-box, .hero-install-box:hover, .hero-install-box:focus-within, .cli-capability, .cli-capability:hover, .cli-capability:focus-within, .dl-card, .dl-card:hover, .dl-card:focus-within { animation: none; transform: none; transition: none; } .cli-capabilities:hover .cli-capability:not(:hover), .download-grid:hover .dl-card:not(:hover) { opacity: 1; transform: none; } .sec-cli h2, .sec-download h2 { animation: none; } }
.hero-title { max-width: 900px; margin: 0 auto 24px; color: var(--fg); font-family: var(--display); font-size: clamp(58px, 8vw, 116px); font-weight: 600; letter-spacing: -.075em; line-height: .9; text-shadow: 0 12px 42px rgba(0,0,0,.24); }
.title-char { display: inline-block; transform-origin: 50% 72%; will-change: transform; animation: title-float-a 5.6s ease-in-out infinite; }
.title-char:nth-child(4n + 2) { animation-name: title-float-b; animation-delay: -.9s; }
.title-char:nth-child(4n + 3) { animation-name: title-float-c; animation-delay: -2.1s; }
.title-char:nth-child(4n) { animation-name: title-float-d; animation-delay: -3.2s; }
.title-space { display: inline-block; width: .19em; }
.hero-sub { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 660px; margin: 0 auto; color: var(--muted); font-size: clamp(14px, 1.35vw, 18px); font-weight: 500; letter-spacing: .045em; }
.hero-sub-copy { display: inline-block; white-space: nowrap; }
.subtitle-char { display: inline-block; transform-origin: 50% 70%; will-change: transform; animation: subtitle-float-a 4.8s ease-in-out infinite; }
.subtitle-char:nth-child(3n + 2) { animation-name: subtitle-float-b; animation-delay: -1.35s; }
.subtitle-char:nth-child(3n) { animation-name: subtitle-float-c; animation-delay: -2.7s; }
.subtitle-space { display: inline-block; width: .33em; }
.hero-sub::before, .hero-sub::after { width: 34px; height: 1px; content: ""; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 66%, transparent)); }
.hero-sub::after { transform: scaleX(-1); }
@keyframes title-float-a { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 45% { transform: translate3d(0, -13px, 0) rotate(-2.5deg); } 70% { transform: translate3d(0, 5px, 0) rotate(1deg); } }
@keyframes title-float-b { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 40% { transform: translate3d(0, 10px, 0) rotate(2deg); } 70% { transform: translate3d(0, -7px, 0) rotate(-1deg); } }
@keyframes title-float-c { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 48% { transform: translate3d(0, -8px, 0) rotate(2deg); } 76% { transform: translate3d(0, 11px, 0) rotate(-1.5deg); } }
@keyframes title-float-d { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 35% { transform: translate3d(0, 7px, 0) rotate(-1.5deg); } 67% { transform: translate3d(0, -12px, 0) rotate(2deg); } }
@keyframes subtitle-float-a { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -2px, 0) rotate(-.4deg); } }
@keyframes subtitle-float-b { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, 2px, 0) rotate(.4deg); } }
@keyframes subtitle-float-c { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -1px, 0) rotate(.3deg); } }
@keyframes section-title-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(0, -3px, 0) rotate(-.2deg); } }
@keyframes hero-install-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
.sec-cli h2, .sec-download h2 { transform-origin: left center; animation: section-title-float 8s ease-in-out infinite; }
.sec-download h2 { animation-delay: -3.8s; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 15px; margin: 32px 0 52px; }
.hero-install-box { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 7px 6px 14px; border: 1px solid var(--command-border); border-radius: 9px; background: linear-gradient(135deg, var(--command-surface-raised), var(--command-surface)); text-align: left; transform-origin: center; animation: hero-install-float 4.8s ease-in-out infinite; box-shadow: 0 14px 30px -24px var(--command-shadow), inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .22s ease, box-shadow .3s cubic-bezier(.16, 1, .3, 1); }
.hero-install-box:hover, .hero-install-box:focus-within { animation: none; border-color: color-mix(in srgb, var(--cyan) 58%, var(--command-border)); box-shadow: 0 24px 44px -22px var(--command-shadow), inset 0 1px 0 rgba(255, 255, 255, .12); transform: translateY(-8px) scale(1.05); }
.hero-install-prompt { color: var(--cyan); font-family: var(--mono); font-weight: 700; }
.hero-install-code { overflow-x: auto; color: var(--command-fg); font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.hero-copy-btn { display:grid; width:30px; height:30px; flex:none; place-items:center; padding:0; border:1px solid color-mix(in srgb, var(--command-border) 90%, var(--border)); border-radius:6px; color:var(--command-muted); background:var(--command-surface); opacity:0; pointer-events:none; transition:opacity .16s ease,color .18s,border-color .18s,background .18s; }.hero-install-box:hover .hero-copy-btn,.hero-install-box:focus-within .hero-copy-btn { opacity:1; pointer-events:auto; }.hero-copy-btn:hover { color:var(--command-fg); border-color:var(--border-strong); background:var(--command-surface-raised); }.hero-copy-btn.is-copied { border-color:color-mix(in srgb, var(--green) 60%, transparent); color:var(--green); }
.hero-sub-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 600; transition: background .18s, border-color .18s, transform .18s; }.btn:hover { transform: translateY(-1px); }.btn-primary { color: var(--blue-fg); background: var(--blue); }.btn-primary:hover { background: var(--blue-hover); }.btn-ghost { border-color: var(--border); color: var(--muted); }.btn-ghost:hover { color: var(--fg); border-color: var(--border-strong); }.btn-sm { padding: 8px 11px; font-size: 12px; }
.setup-download-btn { color: var(--setup-fg); border-color: var(--setup-border); background: var(--setup-surface); box-shadow: 0 10px 22px -16px var(--command-shadow), inset 0 1px 0 rgba(255, 255, 255, .16); }
.setup-download-btn:hover, .setup-download-btn:focus-visible { color: var(--setup-fg); border-color: var(--setup-border); background: var(--setup-hover); box-shadow: 0 16px 28px -18px var(--command-shadow), inset 0 1px 0 rgba(255, 255, 255, .2); transform: translateY(-2px); }
.hero-source-link { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }.hero-source-link:hover { color: var(--fg); }

.hero-preview { width: min(1100px, 100%); margin: 0 auto; }
.preview-switcher { position: relative; isolation: isolate; display: inline-grid; grid-template-columns: repeat(2, minmax(128px, 1fr)); gap: 3px; margin-bottom: 18px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.preview-slider { position: absolute; z-index: 0; top: 4px; left: 4px; width: calc(50% - 5.5px); height: calc(100% - 8px); border-radius: 999px; background: var(--blue); pointer-events: none; transform: translateX(0); transition: transform .38s cubic-bezier(.16, 1, .3, 1), background .22s ease; }
.preview-switcher[data-active-preview="agent"] .preview-slider { transform: translateX(calc(100% + 3px)); }
.preview-btn { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 13px; border-radius: 999px; color: var(--muted); font-size: 12px; transition: color .22s ease; }.preview-btn:hover { color: var(--fg); }.preview-btn.active { color: var(--blue-fg); background: transparent; }
.hero-screenshot-frame { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 14px; background: #09090b; box-shadow: 0 28px 70px -34px rgba(0,0,0,.8); }.hero-screenshot-frame[data-preview="workspace"] { aspect-ratio: 2881 / 1691; }.hero-screenshot-frame[data-preview="agent"] { aspect-ratio: 2881 / 1691; }
.product-preview { width: 100%; height: 100%; }.product-preview[hidden] { display: none; }.studio-capture { display: block; object-fit: contain; object-position: center; background: #09090b; }

/* The CLI preview is an intentional static illustration, based on the published npm package. */
.hero-cli-illustration { display: flex; flex-direction: column; color: #e2e8f0; background: #080c14; font-family: var(--mono); text-align: left; }
.cli-mock-titlebar { height: 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; border-bottom: 1px solid rgba(148,163,184,.16); background: rgba(15,23,42,.7); color: #94a3b8; font-size: 10px; }.cli-mock-dots { display: flex; gap: 6px; }.cmd-dot { width: 9px; height: 9px; border-radius: 50%; }.cmd-dot-red { background:#fb7185; }.cmd-dot-yellow { background:#fbbf24; }.cmd-dot-green { background:#34d399; }.cli-mock-title { justify-self: center; }.cli-mock-space { justify-self: end; width: 27px; }
.cli-mock-body { flex: 1; padding: clamp(22px, 3.6vw, 42px); font-size: clamp(10px, 1.2vw, 13px); line-height: 1.55; }.cli-mock-line { display: flex; align-items: center; gap: 9px; font-weight: 600; }.cli-command-line { gap: 8px; }.cli-gap { margin-top: 18px; }.cli-mock-prompt { color:#34d399; }.cli-mock-dir { color:#94a3b8; }.cli-c-id { color:#7dd3fc; }.cli-mock-cmd { color:#f8fafc; }.cli-mock-cursor { width: 7px; height: 14px; background:#38bdf8; animation: cursor 1.1s step-end infinite; }.cli-mock-output { margin: 6px 0 10px 56px; color:#cbd5e1; }.cli-table-head,.cli-out-row { display:grid; grid-template-columns: 52px 90px minmax(0,1fr); gap:12px; align-items:center; }.cli-table-head { padding-bottom: 4px; color:#64748b; font-size:.82em; letter-spacing:.08em; }.cli-out-row { padding: 3px 0; }.cli-c-code { color:#e2e8f0; }.cli-c-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.cli-section-label { margin-bottom: 4px; color:#64748b; font-size:.82em; letter-spacing:.08em; }.cli-content-row,.cli-file-row { padding: 2px 0; }.cli-content-row span { color:#7dd3fc; }.cli-content-row b { color:#cbd5e1; }.cli-file-row { padding-left: 12px; color:#94a3b8; }.cli-file-row em { color:#64748b; font-style:normal; }@keyframes cursor { 50% { opacity:0; } }

.sec-cli { background: color-mix(in srgb, var(--surface) 24%, var(--bg)); }
.cli-section-layout { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: 42px; align-items: center; }
.cli-section-copy { min-width: 0; }
.cli-section-copy h2 { max-width: 520px; margin: 10px 0 14px; font-size: clamp(31px, 3.8vw, 48px); letter-spacing: -.055em; line-height: 1.05; }
.cli-section-copy > p { max-width: 560px; color: var(--muted); font-size: 15px; }
.cli-capabilities { display: grid; gap: 10px; margin-top: 26px; perspective: 800px; }
.cli-capability { position: relative; z-index: 0; display: grid; gap: 5px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 9px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 42%, var(--surface)), color-mix(in srgb, var(--surface) 88%, #000)); transform-origin: center; transition: transform .32s cubic-bezier(.16, 1, .3, 1), border-color .22s ease, box-shadow .32s cubic-bezier(.16, 1, .3, 1), background .22s ease, opacity .22s ease; will-change: transform; }
.cli-capabilities:hover .cli-capability:not(:hover) { opacity: .86; transform: scale(.985); }
.cli-capability:hover, .cli-capability:focus-within { z-index: 1; border-color: color-mix(in srgb, var(--cyan) 48%, var(--border-strong)); background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 72%, var(--surface)), color-mix(in srgb, var(--surface) 92%, #000)); box-shadow: 0 20px 34px -22px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .1); transform: translateY(-7px) scale(1.06); }
.cli-capability code { color: var(--cyan); font-family: var(--mono); font-size: 12px; }
.cli-capability span { color: var(--muted); font-size: 12px; }
.cli-terminal-command { margin: 0 -8px; padding: 0 8px 1px; border: 1px solid transparent; border-radius: 10px; transition: border-color .24s ease, background .24s ease, box-shadow .24s ease, transform .24s ease; }
.cli-terminal-command.is-highlighted { border-color: rgba(148, 163, 184, .28); background: rgba(255, 255, 255, .035); box-shadow: inset 2px 0 0 rgba(56, 189, 248, .55); transform: translateX(2px); }
.cli-terminal-command.is-highlighted .cli-mock-cmd { color: #fff; text-shadow: none; }
.cli-terminal-command.is-highlighted .cli-mock-output { color: #f1f5f9; }
.cli-reference-link { display: inline-flex; gap: 7px; margin-top: 22px; color: var(--fg); font-family: var(--mono); font-size: 12px; }.cli-reference-link:hover { color: var(--cyan); }
.cli-section-terminal { min-width: 0; overflow: hidden; border-color: var(--border-strong); background: #080c14; box-shadow: 0 28px 70px -38px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05); }.cli-section-terminal .hero-cli-illustration { min-height: 420px; }.cli-section-terminal .cli-mock-body { padding: 24px 28px; font-size: clamp(9px, 1vw, 11px); line-height: 1.4; }.cli-section-terminal .cli-mock-output { margin: 4px 0 7px 56px; }.cli-section-terminal .cli-gap { margin-top: 10px; }
.cli-deadline-head, .cli-deadline-row { display: grid; grid-template-columns: 82px 1.15fr 1.35fr 44px; gap: 8px; align-items: center; }.cli-deadline-head { padding-bottom: 3px; color: #64748b; font-size: .82em; letter-spacing: .08em; }.cli-deadline-row { color: #cbd5e1; }.cli-deadline-due { color: #fbbf24; }.cli-deadline-course, .cli-deadline-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.cli-deadline-course { color: #94a3b8; }.cli-deadline-course b { color: #f8fafc; }.cli-download-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 28px; gap: 8px; align-items: center; }.cli-download-row span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.cli-download-action { color: #38bdf8; }.cli-download-row b { color: #34d399; font-weight: 600; }.cli-download-summary { margin-top: 5px; color: #a5b4fc; }

section { padding: 88px 0; border-top: 1px solid var(--border); }
.section-head { max-width: 680px; margin-bottom: 38px; text-align: left; }.section-head h2 { margin: 10px 0 12px; font-size: clamp(31px, 3.8vw, 46px); letter-spacing: -0.04em; line-height:1.08; }.section-head p { color: var(--muted); font-size: 16px; }
.os-tabs { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border:1px solid var(--border); border-radius:8px; background:var(--control-surface); }.os-tab { padding:6px 9px; border-radius:5px; color:var(--muted); font-size:12px; font-weight:600; transition:color .16s,background .16s; }.os-tab:hover { color:var(--fg); background:var(--control-hover); }.os-tab.active { color:var(--control-active-fg); background:var(--control-active); }.os-panel { min-width:0; }.os-panel[hidden] { display:none; }.os-panel-copy { min-height:20px; color:var(--muted); font-size:13px; }.install-methods { display:grid; gap:13px; }.install-choice-label span:last-child { display:none; }
.sec-download .dl-card h3 { font-size:20px; }.sec-download .dl-badge { font-size:10px; }.sec-download .os-tab { font-size:13px; }.sec-download .os-panel-copy { font-size:14px; }.sec-download .install-choice-label { font-size:12px; }.sec-download .dl-snippet { font-size:12px; line-height:1.45; }
.download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; perspective: 1200px; }.tile { border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }.dl-card { position: relative; z-index: 0; display: flex; min-width: 0; flex-direction: column; gap: 20px; padding: 22px; border-color: color-mix(in srgb, var(--border-strong) 80%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 46%, var(--surface)), var(--surface) 55%, color-mix(in srgb, #000 16%, var(--surface))); box-shadow: 0 24px 54px -36px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .045); transform-origin: center; transition: transform .32s cubic-bezier(.16, 1, .3, 1), border-color .22s ease, box-shadow .32s cubic-bezier(.16, 1, .3, 1), opacity .22s ease; will-change: transform; }.download-grid:hover .dl-card:not(:hover) { opacity: .92; transform: scale(.988); }.dl-card:hover, .dl-card:focus-within { z-index: 1; border-color: color-mix(in srgb, var(--cyan) 40%, var(--border-strong)); box-shadow: 0 28px 54px -30px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .09); transform: translateY(-8px) scale(1.04); }.dl-card-head { display:flex; justify-content:space-between; align-items:flex-start; }.dl-platform-icon { width:38px; height:38px; padding:8px; border:1px solid #2b3341; border-radius:10px; background:#10141d; color:#dbe7f5; }.dl-card:nth-child(2) .dl-platform-icon { border-color:#554d2b; color:#f0c967; background:#19160d; }.dl-card:nth-child(3) .dl-platform-icon { border-color:#273d5e; color:#79b5ff; background:#101827; }.dl-badge { padding:3px 7px; border:1px solid var(--border); border-radius:999px; color:var(--dim); font-family:var(--mono); font-size:9px; }.dl-card h3 { margin-bottom:5px; font-size:17px; }.dl-card p { color:var(--muted); font-size:13px; }.dl-card-action { display:flex; flex-direction:column; gap:13px; min-width:0; margin-top:auto; }.dl-card:nth-child(3) .dl-card-action { margin-top:0; }.install-choice { display:grid; min-width:0; gap:6px; }.install-choice-label { display:flex; justify-content:space-between; color:var(--muted); font-family:var(--mono); font-size:10px; }.install-choice-label span:last-child { color:var(--cyan); text-transform:uppercase; }.dl-snippet { position:relative; display:flex; align-items:center; gap:8px; min-width:0; min-height:38px; padding:9px 43px 9px 12px; border:1px solid var(--border-strong); border-radius:7px; color:var(--muted); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #000), color-mix(in srgb, #000 25%, var(--surface))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); font-family:var(--mono); font-size:10px; }.dl-snippet code { min-width:0; flex:1; overflow-wrap:anywhere; white-space:normal; }.dl-copy-btn { position:absolute; top:6px; right:6px; display:grid; width:28px; height:28px; place-items:center; padding:0; border:1px solid var(--border); border-radius:5px; color:var(--dim); background:var(--surface-raised); opacity:.72; pointer-events:auto; transition:opacity .16s ease,color .18s,border-color .18s,background .18s; }.dl-snippet:hover .dl-copy-btn,.dl-snippet:focus-within .dl-copy-btn { opacity:1; pointer-events:auto; }.dl-copy-btn:hover { border-color:var(--border-strong); color:var(--fg); background:var(--surface-raised); }.dl-copy-btn.is-copied { border-color:color-mix(in srgb, var(--green) 60%, transparent); color:var(--green); }
.footer { padding:32px 0; border-top:1px solid var(--border); }.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }.footer-brand,.footer-links { display:flex; align-items:center; gap:10px; color:var(--dim); font-size:12px; }.footer-brand img { width:20px; height:20px; }.footer-links { flex-wrap:wrap; gap:15px; }.footer-links a:hover { color:var(--fg); }

[data-theme="light"] .hero-title { text-shadow: 0 12px 34px rgba(15, 23, 42, .12); }
[data-theme="light"] .hero-float-card { border-color: rgba(15, 23, 42, .16); background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(226, 232, 240, .82)); box-shadow: 0 18px 34px -24px rgba(15, 23, 42, .42), inset 0 1px 0 rgba(255, 255, 255, .9); }
[data-theme="light"] .hero-install-box:hover, [data-theme="light"] .hero-install-box:focus-within { box-shadow: 0 24px 44px -22px rgba(15, 23, 42, .38), inset 0 1px 0 rgba(255, 255, 255, .92); }
[data-theme="light"] .sec-cli { background: #dff1ff; }
[data-theme="light"] .cli-capability { border-color: rgba(15, 23, 42, .14); background: linear-gradient(145deg, #fff, #f1f5f9); box-shadow: 0 10px 24px -24px rgba(15, 23, 42, .42); }
[data-theme="light"] .cli-capability:hover, [data-theme="light"] .cli-capability:focus-within { border-color: color-mix(in srgb, var(--cyan) 48%, var(--border-strong)); background: linear-gradient(145deg, #fff, #f8fafc); box-shadow: 0 18px 30px -22px rgba(15, 23, 42, .6), inset 0 1px 0 rgba(255, 255, 255, .95); }
[data-theme="light"] .cli-terminal-command.is-highlighted { border-color: rgba(3, 105, 161, .42); background: rgba(226, 232, 240, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 12px 26px -22px rgba(3, 105, 161, .4); }
[data-theme="light"] .os-tabs { border-color: rgba(15, 23, 42, .14); }
[data-theme="light"] .os-tab.active { box-shadow: 0 1px 3px rgba(15, 23, 42, .16); }
[data-theme="light"] .dl-card { border-color: rgba(15, 23, 42, .16); background: linear-gradient(145deg, #fff, #f8fafc 58%, #eef2f7); box-shadow: 0 22px 42px -32px rgba(15, 23, 42, .52), inset 0 1px 0 rgba(255, 255, 255, .9); }
[data-theme="light"] .dl-card:hover, [data-theme="light"] .dl-card:focus-within { border-color: color-mix(in srgb, var(--cyan) 40%, var(--border-strong)); box-shadow: 0 24px 46px -30px rgba(15, 23, 42, .58), inset 0 1px 0 rgba(255, 255, 255, .98); }
[data-theme="light"] .dl-snippet { border-color: var(--command-border); background: linear-gradient(180deg, var(--command-surface-raised), var(--command-surface)); box-shadow: 0 10px 22px -20px var(--command-shadow), inset 0 1px 0 rgba(255, 255, 255, .72); }
[data-theme="light"] .dl-copy-btn { border-color: color-mix(in srgb, var(--command-border) 90%, var(--border)); background: var(--command-surface); }

/* Command surfaces use a dedicated contrast pair in both themes. */
.dl-snippet { border-color: var(--command-border); color: var(--command-fg); background: linear-gradient(180deg, var(--command-surface-raised), var(--command-surface)); box-shadow: 0 10px 22px -20px var(--command-shadow), inset 0 1px 0 rgba(255, 255, 255, .08); }
.dl-copy-btn { border-color: color-mix(in srgb, var(--command-border) 90%, var(--border)); color: var(--command-muted); background: var(--command-surface); opacity: 0; pointer-events: none; }
.dl-copy-btn:hover { border-color: var(--border-strong); color: var(--command-fg); background: var(--command-surface-raised); }

@media (prefers-reduced-motion: reduce) { .hero-install-box, .hero-install-box:hover, .hero-install-box:focus-within { animation: none; transform: none; transition: none; } .preview-slider, .preview-btn { transition: none; } }

@media (max-width: 820px) { .container,.nav-inner { width:min(100% - 36px,1200px); }.nav-link { display:none; }.hero { padding:58px 0 44px; }.hero-float { display:none; }.hero-title { font-size:clamp(38px,10vw,54px); }.download-grid { grid-template-columns:1fr; }.footer-inner { align-items:flex-start; flex-direction:column; }.preview-btn { padding:6px 9px; font-size:11px; }.cli-mock-body { padding:18px; font-size:9px; }.cli-table-head,.cli-out-row { grid-template-columns:38px 70px minmax(0,1fr); gap:7px; }.cli-section-layout { grid-template-columns:1fr; gap:34px; }.cli-section-terminal .hero-cli-illustration { min-height:380px; } }
@media (max-width: 470px) { .nav-stars span,.nav-affiliation-logo { display:none; }.nav-inner { min-height:58px; }.hero-install-box { width:100%; }.hero-install-code { font-size:11px; }.preview-switcher { width:100%; justify-content:space-between; }.preview-btn { padding:6px 7px; }.hero-screenshot-frame { border-radius:10px; }.cli-content-row,.cli-file-row { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.cli-section-terminal .cli-mock-output { margin-left:0; } }
