:root {
  --paper: #efede7;
  --paper-deep: #e4e0d7;
  --ink: #141716;
  --muted: #6e716d;
  --line: rgba(20, 23, 22, 0.16);
  --blue: #315cf5;
  --blue-soft: #9db1ff;
  --acid: #c7ef51;
  --night: #0c100f;
  --night-soft: #161b19;
  --white: #f8f7f3;
  --max-width: 1440px;
  --page-pad: clamp(20px, 4vw, 72px);
  color-scheme: light;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 7%, rgba(49, 92, 245, 0.12), transparent 29rem),
    var(--paper);
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  content: "";
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}

::selection {
  color: var(--white);
  background: var(--blue);
}

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

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

button {
  font: inherit;
}

svg {
  display: block;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  color: white;
  background: var(--blue);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: min(100%, var(--max-width));
  height: 84px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
  border-bottom: 1px solid var(--line);
}

.brand,
.footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--ink);
  place-items: center;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-name {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.025em;
}

.brand-version {
  padding-left: 10px;
  color: var(--muted);
  border-left: 1px solid var(--line);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.site-nav {
  display: flex;
  gap: 34px;
  font-size: 13px;
  font-weight: 600;
}

.site-nav a,
.footer-links a {
  transition: color 180ms ease;
}

.site-nav a:hover,
.footer-links a:hover {
  color: var(--blue);
}

.header-action {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
}

.header-action svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.header-action:hover svg {
  transform: translateX(4px);
}

.hero {
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(560px, 1.22fr);
  align-items: center;
  width: min(100%, var(--max-width));
  min-height: calc(100svh - 84px);
  margin: 0 auto;
  padding: clamp(52px, 7vh, 94px) 0 clamp(68px, 9vh, 120px) var(--page-pad);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding-right: clamp(24px, 4vw, 68px);
}

.eyebrow,
.section-code {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(49, 92, 245, 0.12);
}

.hero h1,
.section-intro h2,
.inside-heading h2,
.download-heading h2,
.faq-heading h2 {
  margin: 0;
  font-weight: 720;
  letter-spacing: -0.075em;
}

.hero h1 {
  margin-top: 26px;
  font-size: clamp(54px, 5.9vw, 88px);
  line-height: 0.91;
}

.hero h1 span {
  color: var(--blue);
}

.hero-lede {
  max-width: 560px;
  margin: 34px 0 0;
  color: var(--ink);
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 650;
  line-height: 1.65;
  letter-spacing: -0.018em;
}

.hero-disclaimer {
  display: flex;
  max-width: 560px;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.hero-disclaimer > span {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 11px;
  font-style: italic;
  place-items: center;
}

.github-proof {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  width: min(100%, 560px);
  align-items: center;
  gap: 13px;
  margin-top: 22px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.28);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.github-proof:hover {
  border-color: rgba(49, 92, 245, 0.5);
  background: rgba(255, 255, 255, 0.56);
  transform: translateY(-2px);
}

.github-proof > svg {
  width: 25px;
  fill: currentColor;
}

.github-repository {
  min-width: 0;
}

.github-repository small,
.github-repository strong {
  display: block;
}

.github-repository small {
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
  letter-spacing: 0.12em;
}

.github-repository strong {
  overflow: hidden;
  margin-top: 4px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.github-stars {
  display: flex;
  min-width: 57px;
  height: 31px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: white;
  border-radius: 8px;
  background: var(--ink);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
}

.github-stars > span {
  color: var(--acid);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font-size: 14px;
  font-weight: 700;
}

.button-primary {
  min-width: 210px;
  padding: 0 20px 0 24px;
  color: white;
  border: 1px solid var(--blue);
  border-radius: 12px;
  background: var(--blue);
  box-shadow: 0 12px 30px rgba(49, 92, 245, 0.24);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.button-primary svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-primary:hover {
  box-shadow: 0 16px 38px rgba(49, 92, 245, 0.32);
  transform: translateY(-2px);
}

.button-text {
  min-height: auto;
  padding: 8px 0;
  border-bottom: 1px solid var(--ink);
}

.button-text span {
  color: var(--blue);
}

.hero-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 32px;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.03em;
}

.hero-notes span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-notes span::before {
  width: 3px;
  height: 3px;
  content: "";
  border-radius: 50%;
  background: currentColor;
}

.product-stage {
  --stage-x: 0px;
  --stage-y: 0px;
  position: relative;
  min-width: 0;
  height: clamp(560px, 68vw, 740px);
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: rgba(228, 224, 215, 0.5);
}

.stage-grid {
  position: absolute;
  inset: 0;
  opacity: 0.48;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to right, transparent, black 18%, black 82%, transparent);
}

.stage-label {
  position: absolute;
  z-index: 3;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.stage-label-top {
  top: 4.5%;
  left: 9%;
  padding: 7px 10px;
  color: white;
  background: var(--ink);
}

.stage-label-side {
  top: 50%;
  right: 3.5%;
  color: var(--muted);
  writing-mode: vertical-rl;
}

.app-window {
  position: absolute;
  top: 12%;
  left: 8%;
  width: min(820px, 89%);
  height: min(568px, 76%);
  min-height: 470px;
  overflow: hidden;
  color: #d9dedb;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: var(--night);
  box-shadow: 0 40px 90px rgba(20, 23, 22, 0.34), 0 8px 20px rgba(20, 23, 22, 0.2);
  transform: translate(var(--stage-x), var(--stage-y));
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.window-bar {
  position: relative;
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #161a19;
}

.traffic-lights {
  display: flex;
  gap: 7px;
}

.traffic-lights span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4a504d;
}

.traffic-lights span:first-child { background: #ff635b; }
.traffic-lights span:nth-child(2) { background: #ffc043; }
.traffic-lights span:last-child { background: #34c958; }

.window-title {
  position: absolute;
  left: 50%;
  color: rgba(255, 255, 255, 0.54);
  font-size: 10px;
  font-weight: 600;
  transform: translateX(-50%);
}

.local-state {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.52);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.local-state span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 10px rgba(199, 239, 81, 0.7);
}

.app-shell {
  display: grid;
  grid-template-columns: 178px 1fr;
  height: calc(100% - 42px);
}

.mock-sidebar {
  position: relative;
  padding: 15px 11px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  background: #121615;
}

.mock-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 7px 13px;
  font-size: 10px;
}

.mock-logo,
.agent-orb {
  display: grid;
  width: 22px;
  height: 22px;
  color: white;
  border-radius: 6px;
  background: var(--blue);
  font-size: 9px;
  font-weight: 800;
  place-items: center;
}

.new-task {
  display: flex;
  width: 100%;
  height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  color: #dfe3e0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 9px;
  text-align: left;
}

.new-task kbd {
  margin-left: auto;
  color: #747c78;
  font-family: inherit;
  font-size: 7px;
}

.side-caption {
  margin: 17px 8px 7px;
  color: #59615d;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
  letter-spacing: 0.1em;
}

.task-row {
  display: flex;
  height: 30px;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  color: #949c98;
  border-radius: 6px;
  font-size: 8px;
}

.task-row.active {
  color: white;
  background: rgba(255, 255, 255, 0.07);
}

.task-row.muted { opacity: 0.52; }

.task-icon {
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.sidebar-footer {
  position: absolute;
  right: 11px;
  bottom: 13px;
  left: 11px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 9px 6px 0;
  color: #747b77;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 7px;
}

.avatar {
  display: grid;
  width: 23px;
  height: 23px;
  color: var(--night);
  border-radius: 50%;
  background: var(--acid);
  font-weight: 800;
  place-items: center;
}

.sidebar-footer strong,
.sidebar-footer small {
  display: block;
}

.sidebar-footer strong { color: #aeb5b1; }
.sidebar-footer small { margin-top: 2px; color: #555d59; }

.mock-workspace {
  position: relative;
  min-width: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(49, 92, 245, 0.08), transparent 17rem),
    #0d1110;
}

.workspace-head {
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.workspace-head strong,
.workspace-head span { display: block; }
.workspace-head strong { font-size: 9px; }
.workspace-head span { margin-top: 2px; color: #5d6561; font-size: 7px; }
.workspace-head button { color: #6c746f; border: 0; background: none; }

.conversation {
  width: min(100%, 510px);
  margin: 0 auto;
  padding: 32px 28px 100px;
}

.message {
  font-size: 9px;
  line-height: 1.55;
}

.user-message {
  width: fit-content;
  max-width: 75%;
  margin-left: auto;
  padding: 11px 13px;
  color: #d9dedb;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px 10px 2px 10px;
  background: #1b211f;
}

.agent-message {
  margin-top: 25px;
  color: #9da5a1;
}

.agent-line {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #e9ebe9;
}

.agent-message p {
  margin: 12px 0;
}

.check-list {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
}

.check-list > div {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 33px;
  padding: 0 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.check-list > div:last-child { border: 0; }
.check-list small { color: #59615d; font-size: 7px; }
.check-list > div:last-child small { color: var(--blue-soft); }

.check {
  display: grid;
  width: 14px;
  height: 14px;
  border: 1px solid #47504b;
  border-radius: 50%;
  font-size: 7px;
  place-items: center;
}

.check.done {
  color: #121615;
  border-color: var(--acid);
  background: var(--acid);
}

.check.running {
  border-color: var(--blue);
  border-right-color: transparent;
  animation: mock-spin 1.2s linear infinite;
}

.composer {
  position: absolute;
  right: 24px;
  bottom: 17px;
  left: 24px;
  min-height: 76px;
  padding: 13px 14px 10px;
  color: #5d6561;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: #171c1a;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  font-size: 8px;
}

.composer > div {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
}

.composer button {
  display: grid;
  width: 20px;
  height: 20px;
  padding: 0;
  color: #858d89;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 5px;
  background: transparent;
  place-items: center;
}

.composer .model-name { font-size: 7px; }
.composer .send { margin-left: auto; color: white; border: 0; background: var(--blue); }

.local-chip,
.runtime-chip {
  position: absolute;
  z-index: 4;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 16, 15, 0.94);
  box-shadow: 0 14px 38px rgba(20, 23, 22, 0.25);
  backdrop-filter: blur(10px);
}

.local-chip {
  right: 4.5%;
  bottom: 8%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 158px;
  padding: 12px 15px;
}

.pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 6px rgba(199, 239, 81, 0.12);
}

.local-chip small,
.local-chip strong { display: block; }
.local-chip small { color: #707a75; font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; letter-spacing: 0.12em; }
.local-chip strong { margin-top: 4px; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; }

.runtime-chip {
  bottom: 13%;
  left: 3.5%;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 11px 13px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
  letter-spacing: 0.09em;
}

.runtime-chip strong { color: var(--acid); }

.app-window.hero-client-window {
  top: 18%;
  left: 5%;
  width: 118%;
  height: auto;
  min-height: 0;
  aspect-ratio: 3840 / 2013;
  border-color: rgba(20, 23, 22, 0.35);
  border-radius: 18px;
  background: #111312;
  box-shadow: 0 40px 90px rgba(20, 23, 22, 0.36), 0 8px 20px rgba(20, 23, 22, 0.2);
}

.hero-client-screenshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: screenshot-drift 12s ease-in-out infinite alternate;
}

.screenshot-sheen {
  position: absolute;
  inset: -60% auto -60% -35%;
  width: 22%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  transform: rotate(12deg);
  animation: screenshot-sheen 8s ease-in-out 1.4s infinite;
}

.client-capture-status {
  position: absolute;
  z-index: 4;
  top: 4.5%;
  right: 8%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.client-capture-status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 5px rgba(199, 239, 81, 0.14);
}

.client-capture-status strong {
  font-weight: 700;
}

.client-view-controls {
  position: absolute;
  z-index: 7;
  bottom: 2.8%;
  left: 50%;
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  background: rgba(12, 16, 15, 0.92);
  box-shadow: 0 12px 34px rgba(20, 23, 22, 0.28);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}

.client-view-controls button {
  display: flex;
  min-width: 68px;
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  color: #8a928e;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.client-view-controls button:hover {
  color: white;
  transform: translateY(-1px);
}

.client-view-controls button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--acid);
}

.client-view-controls button:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

.client-view-controls button span {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
}

.client-overlay {
  position: absolute;
  z-index: 5;
  color: #e7e9e8;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(17, 19, 18, 0.97);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.985);
  transition: opacity 260ms ease, transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-client-window[data-client-view="trace"] [data-client-panel="trace"],
.hero-client-window[data-client-view="files"] [data-client-panel="files"],
.hero-client-window[data-client-view="terminal"] [data-client-panel="terminal"],
.hero-client-window[data-client-view="new"] [data-client-panel="new"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.overlay-head {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.overlay-head strong { font-size: 11px; }
.overlay-head span { color: #717976; font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; }

.client-overlay-trace {
  top: 4%;
  right: 22.5%;
  bottom: 22.5%;
  left: 14.7%;
  padding: 0 5% 5%;
  border-radius: 0;
  background:
    radial-gradient(circle at 60% 0%, rgba(49, 92, 245, 0.14), transparent 52%),
    rgba(17, 19, 18, 0.98);
}

.trace-steps {
  display: grid;
  gap: 9px;
  width: min(100%, 420px);
  margin: 7% auto 0;
  padding: 0;
  list-style: none;
}

.trace-steps li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 10px 13px;
  color: #808884;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.trace-steps li > span {
  display: grid;
  width: 24px;
  height: 24px;
  border: 1px solid #4b5350;
  border-radius: 50%;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
  place-items: center;
}

.trace-steps strong,
.trace-steps small { display: block; }
.trace-steps strong { color: #e7e9e8; font-size: 9px; }
.trace-steps small { margin-top: 4px; font-size: 7px; }
.trace-steps .done > span { color: var(--ink); border-color: var(--acid); background: var(--acid); }
.trace-steps .active { border-color: rgba(49, 92, 245, 0.7); }
.trace-steps .active > span { color: white; border-color: var(--blue); background: var(--blue); animation: demo-pulse 1.6s ease-in-out infinite; }

.client-overlay-files {
  top: 3.5%;
  right: 0;
  bottom: 0;
  width: 22.5%;
  border-radius: 0;
}

.demo-file-row {
  display: flex;
  width: 100%;
  height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  color: #dce0de;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  cursor: pointer;
  font-size: 9px;
  text-align: left;
}

.demo-file-row:hover { background: rgba(255, 255, 255, 0.06); }
.demo-file-row span { color: var(--blue-soft); font-family: monospace; }
.demo-file-tree { display: grid; gap: 10px; padding: 12px 18px 16px 29px; color: #8c9490; font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; }
.demo-file-row[aria-expanded="false"] + .demo-file-tree { display: none; }

.client-overlay-terminal {
  right: 22.5%;
  bottom: 0;
  left: 14.7%;
  min-height: 25%;
  padding: 15px 17px 13px;
  border-radius: 0;
  font-family: "SFMono-Regular", Consolas, monospace;
}

.terminal-output { display: grid; gap: 5px; min-height: 38px; color: #a7aeaa; font-size: 7px; }
.terminal-success { color: var(--acid); }
.terminal-prompt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; }
.terminal-prompt label { color: var(--blue-soft); font-size: 9px; }
.terminal-prompt input { min-width: 0; padding: 5px 7px; color: white; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; outline: none; background: rgba(255, 255, 255, 0.04); font: inherit; font-size: 8px; }
.terminal-prompt input:focus { border-color: var(--blue); }
.terminal-prompt button { padding: 5px 8px; color: var(--ink); border: 0; border-radius: 4px; background: var(--acid); cursor: pointer; font-size: 7px; font-weight: 800; }

.client-overlay-new {
  top: 3.5%;
  right: 22.5%;
  bottom: 22.5%;
  left: 14.7%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 6%;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(49, 92, 245, 0.16), transparent 38%),
    rgba(17, 19, 18, 0.98);
  text-align: center;
}

.new-session-mark { display: grid; width: 34px; height: 34px; margin-bottom: 12px; color: var(--ink); border-radius: 10px; background: var(--acid); font-size: 18px; place-items: center; }
.client-overlay-new > strong { font-size: 14px; }
.client-overlay-new > p { margin: 6px 0 0; color: #737b77; font-size: 8px; }
.demo-message-form { width: min(100%, 390px); margin-top: 20px; text-align: left; }
.demo-message-form > label { display: block; margin: 0 0 7px 2px; color: #7d8581; font-size: 7px; }
.demo-message-form > div { display: grid; grid-template-columns: 1fr 28px; gap: 7px; padding: 6px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 9px; background: #232624; }
.demo-message-form input { min-width: 0; padding: 0 7px; color: white; border: 0; outline: none; background: transparent; font: inherit; font-size: 8px; }
.demo-message-form button { display: grid; width: 28px; height: 28px; padding: 0; color: white; border: 0; border-radius: 7px; background: var(--blue); cursor: pointer; place-items: center; }
.demo-message-result { min-height: 14px; color: var(--acid) !important; font-family: "SFMono-Regular", Consolas, monospace; }

.app-window.dsh-app-demo {
  top: 11%;
  left: 3%;
  width: 96%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1000 / 650;
  color: #d9dedb;
  border-color: rgba(20, 23, 22, 0.42);
  border-radius: 17px;
  background: #111312;
  box-shadow: 0 40px 90px rgba(20, 23, 22, 0.36), 0 8px 20px rgba(20, 23, 22, 0.2);
}

.dsh-app-demo button,
.dsh-app-demo input {
  font: inherit;
}

.dsh-app-demo button {
  color: inherit;
  border: 0;
  cursor: pointer;
}

.dsh-window-chrome {
  position: relative;
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: #686f6c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #181b1a;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
}

.dsh-window-chrome > span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.dsh-window-chrome > button {
  padding: 3px 6px;
  color: #6f7773;
  background: transparent;
  letter-spacing: 0.14em;
}

.dsh-demo-shell {
  position: relative;
  display: grid;
  grid-template-columns: 18% 58% 24%;
  grid-template-rows: 76% 24%;
  height: calc(100% - 34px);
  overflow: hidden;
  background: #121413;
}

.dsh-demo-sidebar {
  position: relative;
  grid-row: 1 / 3;
  padding: 22px 10px 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: #1a1c1b;
}

.dsh-demo-brand {
  display: flex;
  height: 34px;
  align-items: center;
  gap: 6px;
  padding: 0 5px;
  color: white;
}

.dsh-demo-brand > span { font-size: 16px; transform: rotate(-18deg); }
.dsh-demo-brand strong { font-size: 14px; letter-spacing: -0.04em; }
.dsh-demo-brand small { margin-left: 2px; padding: 2px 4px; color: #252827; border-radius: 3px; background: #e5e7e6; font-size: 6px; font-weight: 850; }

.dsh-new-chat {
  display: flex;
  width: 100%;
  height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 15px;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px;
  background: #454846;
  font-size: 9px !important;
  font-weight: 700 !important;
  transition: background 160ms ease, transform 160ms ease;
}

.dsh-new-chat:hover { background: #555957; transform: translateY(-1px); }
.dsh-new-chat > span { font-size: 14px; }

.dsh-sidebar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 4px;
  color: #8a918e;
  font-size: 8px;
}

.dsh-workspace-row {
  display: flex;
  width: 100%;
  height: 35px;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  padding: 0 5px;
  background: transparent;
  font-size: 8px !important;
  text-align: left;
}

.dsh-workspace-row > span { color: #747c78; }
.dsh-workspace-row strong { color: #dce0de; font-weight: 650; }
.dsh-workspace-row[aria-expanded="false"] + .dsh-session-list { display: none; }

.dsh-session-list { display: grid; gap: 3px; }
.dsh-session-list button { display: flex; height: 34px; align-items: center; justify-content: space-between; padding: 0 9px 0 22px; border-radius: 6px; background: transparent; color: #8b928f; font-size: 8px !important; text-align: left; }
.dsh-session-list button:hover { color: white; background: rgba(255, 255, 255, 0.05); }
.dsh-session-list button.active { color: white; background: #303331; }
.dsh-session-list small { color: #737a76; font-size: 6px; }

.dsh-settings {
  position: absolute;
  right: 10px;
  bottom: 12px;
  left: 10px;
  display: flex;
  height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0 5px;
  color: #d2d6d4 !important;
  background: transparent;
  font-size: 8px !important;
  text-align: left;
}

.dsh-settings:hover { color: white !important; }

.dsh-demo-main {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  background: #121413;
}

.dsh-main-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: 42px;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.dsh-main-toolbar > strong { font-size: 9px; }
.dsh-session-log { justify-self: end; padding: 6px 9px; color: #a3aaa6 !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 6px; background: transparent; font-size: 7px !important; }
.dsh-session-log:hover { color: white !important; border-color: rgba(255, 255, 255, 0.22) !important; }

.dsh-main-tabs { display: flex; align-self: stretch; gap: 18px; }
.dsh-main-tabs button { position: relative; padding: 0 2px; color: #858d89; background: transparent; font-size: 8px !important; font-weight: 700 !important; }
.dsh-main-tabs button:hover { color: white; }
.dsh-main-tabs button[aria-selected="true"] { color: #7da1ff; }
.dsh-main-tabs button[aria-selected="true"]::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; content: ""; border-radius: 2px; background: #6f96ff; }

.dsh-main-view {
  position: absolute;
  top: 42px;
  right: 0;
  bottom: 79px;
  left: 0;
  overflow: hidden;
}

.dsh-main-view > section { display: none; height: 100%; }
.dsh-app-demo[data-demo-view="chat"] [data-demo-panel="chat"],
.dsh-app-demo[data-demo-view="trace"] [data-demo-panel="trace"],
.dsh-app-demo[data-demo-view="new"] [data-demo-panel="new"] { display: block; }

.dsh-chat-view { overflow: auto; padding: 18px 12% 20px; scrollbar-width: none; }
.dsh-user-bubble { width: fit-content; max-width: 70%; margin-left: auto; padding: 8px 11px; border-radius: 10px; background: #292c2a; font-size: 8px; }
.dsh-context-line { display: flex; align-items: center; gap: 7px; margin-top: 13px; color: #858c89; font-size: 7px; }
.dsh-context-line > span { display: grid; width: 14px; height: 14px; border: 1px solid #747c78; border-radius: 4px; place-items: center; }
.dsh-assistant-answer { margin-top: 18px; font-size: 8px; line-height: 1.65; }
.dsh-assistant-answer small { color: #8a918e; }
.dsh-assistant-answer p { margin: 14px 0; color: #f0f1f0; font-size: 10px; }
.dsh-assistant-answer > strong { display: block; margin-bottom: 8px; }
.dsh-assistant-answer ul { display: grid; gap: 6px; margin: 0; padding-left: 17px; color: #c5cac7; }
.dsh-assistant-answer b { color: white; }

.dsh-trace-view { overflow: auto; padding: 20px 13%; scrollbar-width: none; }
.dsh-trace-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.dsh-trace-head strong { font-size: 10px; }
.dsh-trace-head span { color: #707874; font-family: "SFMono-Regular", Consolas, monospace; font-size: 6px; }
.dsh-trace-view ol { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.dsh-trace-view li { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 9px; min-height: 48px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; background: rgba(255, 255, 255, 0.02); }
.dsh-trace-view li > span { display: grid; width: 22px; height: 22px; color: #89918d; border: 1px solid #4c5350; border-radius: 50%; font-family: monospace; font-size: 6px; place-items: center; }
.dsh-trace-view li strong { display: block; font-size: 8px; }
.dsh-trace-view li small { display: block; margin-top: 3px; color: #737b77; font-size: 6px; }
.dsh-trace-view li.done > span { color: #151816; border-color: var(--acid); background: var(--acid); }
.dsh-trace-view li.active { border-color: rgba(49, 92, 245, 0.65); }
.dsh-trace-view li.active > span { color: white; border-color: var(--blue); background: var(--blue); animation: demo-pulse 1.6s ease-in-out infinite; }

.dsh-new-view { align-content: center; justify-items: center; text-align: center; background: radial-gradient(circle at 50% 50%, rgba(49, 92, 245, 0.13), transparent 38%); }
.dsh-app-demo[data-demo-view="new"] .dsh-new-view { display: grid; }
.dsh-new-view > span { display: grid; width: 36px; height: 36px; margin-bottom: 10px; color: #161817; border-radius: 10px; background: var(--acid); font-size: 18px; place-items: center; }
.dsh-new-view strong { font-size: 12px; }
.dsh-new-view p { margin: 6px 0 0; color: #737b77; font-size: 7px; }

.dsh-composer {
  position: absolute;
  right: 8%;
  bottom: 10px;
  left: 8%;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 62px;
  padding: 10px 11px 7px;
  color: #777f7b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #292c2a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.dsh-composer label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.dsh-composer > input { min-width: 0; padding: 0 3px 7px; color: white; border: 0; outline: 0; background: transparent; font-size: 8px; }
.dsh-composer > div { display: flex; align-items: center; gap: 7px; font-size: 7px; }
.dsh-composer button { display: grid; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: #363a38; place-items: center; }
.dsh-composer button[type="submit"] { color: white; background: #46659f; }
.dsh-demo-model { margin-left: auto; color: #c7cbc9; }

.dsh-demo-explorer {
  grid-column: 3;
  grid-row: 1 / 3;
  min-width: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: #121413;
}

.dsh-demo-explorer > header { display: flex; height: 34px; align-items: center; justify-content: space-between; padding: 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: #292b2a; font-size: 8px; }
.dsh-demo-explorer > header button { padding: 4px; color: #b7bcb9; background: transparent; }
.dsh-explorer-label { display: block; padding: 12px 10px 8px; color: #c5cac7; font-size: 8px; }
.dsh-file-folder { display: flex; width: 100%; height: 34px; align-items: center; gap: 5px; padding: 0 12px; background: transparent; font-size: 8px !important; text-align: left; }
.dsh-file-folder:hover { background: rgba(255, 255, 255, 0.04); }
.dsh-file-folder[aria-expanded="false"] + .dsh-file-tree { display: none; }
.dsh-file-tree { display: grid; padding-left: 13px; }
.dsh-file-tree button { height: 31px; padding: 0 12px; color: #d6dad8; background: transparent; font-size: 8px !important; text-align: left; }
.dsh-file-tree button:hover { color: white; background: rgba(255, 255, 255, 0.05); }

.dsh-demo-terminal {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding: 0 11px 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: #121413;
  font-family: "SFMono-Regular", Consolas, monospace;
}

.dsh-demo-terminal > header { display: flex; height: 30px; align-items: center; gap: 12px; color: #b8bdbb; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 7px; }
.dsh-demo-terminal .terminal-output { min-height: 29px; padding-top: 7px; font-size: 6px; }
.dsh-demo-terminal .terminal-prompt { gap: 5px; }
.dsh-demo-terminal .terminal-prompt input { padding: 3px 5px; font-size: 6px; }
.dsh-demo-terminal .terminal-prompt button { padding: 4px 6px; font-size: 6px; }

.dsh-demo-toast {
  position: absolute;
  z-index: 12;
  right: 14px;
  bottom: 12px;
  max-width: 210px;
  padding: 8px 10px;
  color: #141716;
  border-radius: 7px;
  background: var(--acid);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  font-size: 7px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateY(7px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.dsh-demo-toast.visible { opacity: 1; transform: translateY(0); }

/* The hero demo mirrors the desktop client's 1920×1006 logical window.
   Every measurement below is expressed against that real window width so
   the 280px app sidebar, 1208px conversation area and 432px workbench keep
   the same proportions at any landing-page size. */
.app-window.dsh-app-demo {
  --dsh-bg: #151517;
  --dsh-sidebar: #1b1b1c;
  --dsh-layer-1: #232324;
  --dsh-layer-2: #2c2c2e;
  --dsh-layer-3: #353638;
  --dsh-label: #f9fafb;
  --dsh-secondary: #cfd3d6;
  --dsh-tertiary: #adb2b8;
  --dsh-muted: #81858c;
  --dsh-blue: #679efe;
  --dsh-line: rgba(255, 255, 255, 0.12);
  --dsh-line-thin: rgba(255, 255, 255, 0.06);
  --dsh-hover: rgba(255, 255, 255, 0.08);
  top: 12%;
  left: 2%;
  width: 98%;
  aspect-ratio: 3840 / 2013;
  overflow: hidden;
  color: var(--dsh-label);
  border-color: rgba(255, 255, 255, 0.22);
  border-radius: 1.05cqw;
  background: var(--dsh-bg);
  box-shadow: 0 3.6cqw 8cqw rgba(15, 17, 21, 0.36), 0 0.6cqw 1.8cqw rgba(15, 17, 21, 0.25);
  container-type: inline-size;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

.dsh-app-demo svg {
  width: 0.84cqw;
  height: 0.84cqw;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dsh-traffic-lights {
  position: absolute;
  z-index: 30;
  top: 1.47cqw;
  left: 1.68cqw;
  display: flex;
  gap: 0.51cqw;
  pointer-events: none;
}

.dsh-traffic-lights span {
  width: 0.73cqw;
  height: 0.73cqw;
  border-radius: 50%;
  background: #34c759;
  box-shadow: inset 0 0 0 0.06cqw rgba(0, 0, 0, 0.12);
}

.dsh-traffic-lights span:first-child { background: #ff5f57; }
.dsh-traffic-lights span:nth-child(2) { background: #ffbd2e; }

.dsh-demo-shell {
  --dsh-sidebar-width: 14.583%;
  --dsh-explorer-width: 22.526%;
  --dsh-terminal-height: 22.25%;
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: var(--dsh-sidebar-width) minmax(0, 1fr) var(--dsh-explorer-width);
  grid-template-rows: minmax(0, 1fr) var(--dsh-terminal-height);
  overflow: hidden;
  background: var(--dsh-bg);
  transition: grid-template-columns 240ms ease, grid-template-rows 240ms ease;
}

.dsh-app-demo[data-sidebar-collapsed="true"] .dsh-demo-shell { --dsh-sidebar-width: 3.75%; }
.dsh-app-demo[data-explorer-collapsed="true"] .dsh-demo-shell { --dsh-explorer-width: 0%; }
.dsh-app-demo[data-terminal-collapsed="true"] .dsh-demo-shell { --dsh-terminal-height: 0%; }

.dsh-demo-sidebar {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  min-width: 0;
  padding: 0.31cqw 0.625cqw;
  overflow: hidden;
  border-right: 1px solid var(--dsh-line-thin);
  background: var(--dsh-sidebar);
  font-size: 0.73cqw;
}

.dsh-demo-brand-row {
  display: flex;
  height: 3.125cqw;
  align-items: center;
  gap: 0.42cqw;
  margin-top: 2.6cqw;
  margin-bottom: 0.42cqw;
  padding: 0.42cqw 0 0.42cqw 0.21cqw;
  box-sizing: border-box;
}

.dsh-demo-brand {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 0.35cqw;
  overflow: hidden;
  white-space: nowrap;
}

.dsh-demo-brand img {
  width: 1.25cqw;
  height: 1.25cqw;
  filter: drop-shadow(0 0 0.35cqw rgba(88, 166, 255, 0.32));
}

.dsh-demo-brand strong {
  color: var(--dsh-label);
  font-size: 1.2cqw;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
}

.dsh-demo-brand small {
  padding: 0.15cqw 0.25cqw;
  color: #1b1b1c;
  border-radius: 0.12cqw;
  background: #f4f5f6;
  font-size: 0.42cqw;
  font-weight: 850;
  letter-spacing: 0.05em;
}

.dsh-icon-button {
  display: inline-grid;
  width: 1.46cqw;
  height: 1.46cqw;
  padding: 0;
  flex: none;
  color: var(--dsh-secondary) !important;
  border-radius: 50%;
  background: transparent;
  place-items: center;
}

.dsh-icon-button:hover { color: var(--dsh-label) !important; background: var(--dsh-hover); }
.dsh-icon-button svg { width: 0.84cqw; height: 0.84cqw; }

.dsh-new-chat {
  display: flex;
  width: calc(100% - 0.21cqw);
  height: 1.98cqw;
  align-items: center;
  justify-content: center;
  gap: 0.31cqw;
  margin: 0 0.1cqw 0.42cqw;
  padding: 0.42cqw 0.83cqw;
  color: var(--dsh-label) !important;
  border: 1px solid var(--dsh-line) !important;
  border-radius: 0.625cqw;
  background: #43454a;
  font-size: 0.73cqw !important;
  font-weight: 500 !important;
}

.dsh-new-chat:hover { background: #53555b; transform: none; }
.dsh-new-chat svg { width: 0.73cqw; height: 0.73cqw; }

.dsh-sidebar-heading {
  display: flex;
  height: 1.75cqw;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0 0.2cqw;
  color: var(--dsh-tertiary);
  font-size: 0.73cqw;
}

.dsh-sidebar-heading > div { display: flex; gap: 0.08cqw; }
.dsh-sidebar-heading .dsh-icon-button { width: 1.46cqw; height: 1.46cqw; }

.dsh-sidebar-search {
  display: none;
  height: 1.66cqw;
  align-items: center;
  gap: 0.3cqw;
  margin: 0.12cqw 0 0.2cqw;
  padding: 0 0.46cqw;
  border: 1px solid var(--dsh-line);
  border-radius: 0.42cqw;
  background: var(--dsh-layer-1);
}

.dsh-sidebar-search.visible { display: flex; }
.dsh-sidebar-search input { min-width: 0; width: 100%; color: var(--dsh-label); border: 0; outline: 0; background: transparent; font-size: 0.66cqw; }

.dsh-workspace-row {
  display: flex;
  width: 100%;
  height: 1.78cqw;
  align-items: center;
  gap: 0.32cqw;
  margin: 0.1cqw 0 0;
  padding: 0 0.42cqw;
  color: var(--dsh-secondary) !important;
  border-radius: 0.42cqw;
  background: transparent;
  font-size: 0.73cqw !important;
  text-align: left;
}

.dsh-workspace-row:hover { background: var(--dsh-hover); }
.dsh-workspace-row strong { overflow: hidden; font-weight: 500; text-overflow: ellipsis; }
.dsh-folder-icon { color: var(--dsh-blue); }
.dsh-chevron { width: 0.62cqw !important; height: 0.62cqw !important; color: var(--dsh-muted); transition: transform 160ms ease; }
[data-demo-folder][aria-expanded="true"] > .dsh-chevron { transform: rotate(90deg); }
.dsh-workspace-row[aria-expanded="false"] + .dsh-session-list { display: none; }

.dsh-session-list { display: grid; gap: 0.1cqw; }
.dsh-session-list button {
  display: flex;
  height: 1.68cqw;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.42cqw 0 2.05cqw;
  color: var(--dsh-tertiary);
  border-radius: 0.42cqw;
  background: transparent;
  font-size: 0.73cqw !important;
  text-align: left;
}

.dsh-session-list button:hover { color: var(--dsh-label); background: var(--dsh-hover); }
.dsh-session-list button.active { color: var(--dsh-label); background: rgba(255, 255, 255, 0.14); }
.dsh-session-list small { color: var(--dsh-muted); font-size: 0.62cqw; }

.dsh-settings {
  position: absolute;
  right: 0.42cqw;
  bottom: 0.42cqw;
  left: 0.42cqw;
  display: flex;
  height: 1.78cqw;
  align-items: center;
  gap: 0.42cqw;
  padding: 0.31cqw 0.1cqw 0.31cqw 0.52cqw;
  color: var(--dsh-label) !important;
  border-radius: 0.42cqw;
  background: transparent;
  font-size: 0.73cqw !important;
  text-align: left;
}

.dsh-settings:hover { background: var(--dsh-hover); }

.dsh-app-demo[data-sidebar-collapsed="true"] .dsh-demo-sidebar { padding: 0.31cqw 0.36cqw; }
.dsh-app-demo[data-sidebar-collapsed="true"] .dsh-demo-brand,
.dsh-app-demo[data-sidebar-collapsed="true"] .dsh-sidebar-heading > span,
.dsh-app-demo[data-sidebar-collapsed="true"] .dsh-sidebar-heading > div,
.dsh-app-demo[data-sidebar-collapsed="true"] .dsh-workspace-row,
.dsh-app-demo[data-sidebar-collapsed="true"] .dsh-session-list,
.dsh-app-demo[data-sidebar-collapsed="true"] .dsh-settings span,
.dsh-app-demo[data-sidebar-collapsed="true"] .dsh-sidebar-search { display: none; }
.dsh-app-demo[data-sidebar-collapsed="true"] .dsh-demo-brand-row { justify-content: center; padding: 0; }
.dsh-app-demo[data-sidebar-collapsed="true"] .dsh-new-chat { width: 1.88cqw; height: 1.88cqw; margin: 0 auto; padding: 0; border-color: transparent !important; border-radius: 50%; background: transparent; }
.dsh-app-demo[data-sidebar-collapsed="true"] .dsh-new-chat span { display: none; }
.dsh-app-demo[data-sidebar-collapsed="true"] .dsh-settings { justify-content: center; padding: 0; }

.dsh-demo-main {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--dsh-bg);
}

.dsh-main-toolbar {
  position: relative;
  display: flex;
  height: 2.76cqw;
  align-items: flex-start;
  padding: 0 1.46cqw;
  border-bottom: 0;
  box-sizing: border-box;
}

.dsh-session-identity {
  display: flex;
  height: 2.18cqw;
  align-items: center;
  gap: 1.62cqw;
}

.dsh-session-identity > strong { max-width: 13cqw; overflow: hidden; font-size: 0.84cqw; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dsh-session-identity > button { display: flex; align-items: center; gap: 0.34cqw; padding: 0; color: var(--dsh-secondary); background: transparent; font-size: 0.73cqw; }
.dsh-session-identity > button svg { width: 0.84cqw; height: 0.84cqw; }

.dsh-main-tabs {
  position: absolute;
  top: 0;
  left: 16.65cqw;
  display: flex;
  height: 2.22cqw;
  align-self: auto;
  gap: 2.7cqw;
}

.dsh-main-tabs button {
  position: relative;
  padding: 0 0.1cqw;
  color: var(--dsh-muted);
  background: transparent;
  font-size: 0.73cqw !important;
  font-weight: 500 !important;
}

.dsh-main-tabs button:hover { color: var(--dsh-label); }
.dsh-main-tabs button[aria-selected="true"] { color: var(--dsh-blue); }
.dsh-main-tabs button[aria-selected="true"]::after { right: 0; bottom: 0; left: 0; height: 0.13cqw; background: var(--dsh-blue); }

.dsh-session-log {
  position: absolute;
  top: 0.625cqw;
  right: 1.46cqw;
  display: inline-flex;
  height: 1.66cqw;
  align-items: center;
  gap: 0.31cqw;
  padding: 0 0.68cqw;
  color: var(--dsh-label) !important;
  border: 1px solid var(--dsh-line) !important;
  border-radius: 0.94cqw;
  background: transparent;
  font-size: 0.68cqw !important;
}

.dsh-session-log:hover { color: white !important; border-color: rgba(255,255,255,.24) !important; background: var(--dsh-hover); }
.dsh-session-log svg { width: 0.63cqw; height: 0.63cqw; }

.dsh-main-view {
  position: absolute;
  top: 2.76cqw;
  right: 0;
  bottom: 6.77cqw;
  left: 0;
  min-height: 0;
  overflow: hidden;
}

.dsh-main-view > section { display: none; width: 100%; height: 100%; box-sizing: border-box; }
.dsh-app-demo[data-demo-view="chat"] [data-demo-panel="chat"],
.dsh-app-demo[data-demo-view="trace"] [data-demo-panel="trace"],
.dsh-app-demo[data-demo-view="new"] [data-demo-panel="new"],
.dsh-app-demo[data-demo-view="settings"] [data-demo-panel="settings"] { display: block; }

.dsh-chat-view {
  position: relative;
  overflow: auto;
  padding: 0.55cqw 12.7% 1cqw;
  scrollbar-width: none;
}

.dsh-user-bubble {
  width: fit-content;
  max-width: 70%;
  margin: 0 1.55cqw 0.65cqw auto;
  padding: 0.58cqw 0.82cqw;
  border-radius: 1.2cqw;
  background: var(--dsh-layer-2);
  font-size: 0.84cqw;
}

.dsh-message-copy { display: flex; width: 1.46cqw; height: 1.46cqw; align-items: center; justify-content: center; margin: 0 1.55cqw 1.05cqw auto; color: var(--dsh-tertiary); }
.dsh-message-copy svg { width: 0.78cqw; height: 0.78cqw; }

.dsh-context-line {
  display: flex;
  align-items: center;
  gap: 0.46cqw;
  margin: 0 0 1.03cqw;
  color: var(--dsh-tertiary);
  font-size: 0.73cqw;
}
.dsh-context-line svg { width: 0.84cqw; height: 0.84cqw; }

.dsh-context-line > .dsh-context-label {
  display: inline;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  white-space: nowrap;
}

.dsh-assistant-answer { margin: 1.38cqw 0 0; color: var(--dsh-secondary); font-size: 0.77cqw; line-height: 1.58; }
.dsh-assistant-answer small { display: block; max-width: 94%; overflow: hidden; color: var(--dsh-tertiary); font-size: 0.7cqw; text-overflow: ellipsis; white-space: nowrap; }
.dsh-think-icon { color: var(--dsh-tertiary); font-size: 0.94cqw; }
.dsh-assistant-answer p { margin: 1.0cqw 0; color: var(--dsh-label); font-size: 0.88cqw; }
.dsh-assistant-answer p + p { margin-bottom: 0.65cqw; }
.dsh-assistant-answer ul { display: grid; gap: 0.62cqw; margin: 0; padding-left: 1.2cqw; color: var(--dsh-secondary); }
.dsh-assistant-answer b { color: var(--dsh-label); }
.dsh-message-actions { display: flex; gap: 0.84cqw; margin-top: 1.05cqw; color: var(--dsh-tertiary); font-size: 0.9cqw; }

.dsh-trace-view { overflow: auto; padding: 1.1cqw 13%; scrollbar-width: none; }
.dsh-trace-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.7cqw; border-bottom: 1px solid var(--dsh-line-thin); }
.dsh-trace-head strong { font-size: 0.84cqw; }
.dsh-trace-head span { color: var(--dsh-muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.62cqw; }
.dsh-trace-view ol { display: grid; gap: 0.45cqw; margin: 0.75cqw 0 0; padding: 0; list-style: none; }
.dsh-trace-view li { display: grid; min-height: 2.5cqw; grid-template-columns: 1.25cqw 1fr; align-items: center; gap: 0.46cqw; padding: 0.42cqw 0.55cqw; border: 1px solid var(--dsh-line-thin); border-radius: 0.42cqw; background: rgba(255,255,255,.02); }
.dsh-trace-view li > span { display: grid; width: 1.15cqw; height: 1.15cqw; color: var(--dsh-tertiary); border: 1px solid var(--dsh-line); border-radius: 50%; font-family: monospace; font-size: 0.5cqw; place-items: center; }
.dsh-trace-view li strong { display: block; font-size: 0.72cqw; }
.dsh-trace-view li small { display: block; margin-top: 0.16cqw; color: var(--dsh-muted); font-size: 0.58cqw; }
.dsh-trace-view li.done > span { color: var(--dsh-bg); border-color: var(--dsh-blue); background: var(--dsh-blue); }
.dsh-trace-view li.active { border-color: rgba(103,158,254,.65); }
.dsh-trace-view li.active > span { color: white; border-color: var(--dsh-blue); background: var(--dsh-blue); }

.dsh-new-view { align-content: center; justify-items: center; text-align: center; background: radial-gradient(circle at 50% 50%, rgba(103,158,254,.1), transparent 32%); }
.dsh-app-demo[data-demo-view="new"] .dsh-new-view { display: grid; }
.dsh-new-view img { width: 2.7cqw; height: 2.7cqw; margin-bottom: 0.7cqw; filter: invert(1); }
.dsh-new-view strong { font-size: 1.55cqw; font-weight: 600; }
.dsh-new-view p { margin: 0.45cqw 0 0; color: var(--dsh-muted); font-size: 0.75cqw; }

.dsh-settings-view { padding: 1.5cqw 14%; }
.dsh-settings-card { overflow: hidden; border: 1px solid var(--dsh-line); border-radius: 0.7cqw; background: var(--dsh-layer-1); }
.dsh-settings-card > div { display: flex; align-items: baseline; justify-content: space-between; padding: 0.8cqw 1cqw; border-bottom: 1px solid var(--dsh-line-thin); }
.dsh-settings-card > div strong { font-size: 0.92cqw; }
.dsh-settings-card small { color: var(--dsh-muted); font-size: 0.62cqw; }
.dsh-settings-card label { display: flex; align-items: center; justify-content: space-between; padding: 0.65cqw 1cqw; color: var(--dsh-secondary); border-bottom: 1px solid var(--dsh-line-thin); font-size: 0.72cqw; }
.dsh-settings-card label:last-child { border-bottom: 0; }
.dsh-settings-card label span,
.dsh-settings-card label button { padding: 0.26cqw 0.5cqw; color: var(--dsh-label); border-radius: 0.35cqw; background: var(--dsh-layer-3); font-size: 0.65cqw; }

.dsh-composer {
  position: absolute;
  right: 10.7%;
  bottom: 1.78cqw;
  left: 10.7%;
  display: block;
  min-height: 4.88cqw;
  padding: 0.72cqw 0.84cqw 0.48cqw;
  color: var(--dsh-muted);
  border: 1px solid var(--dsh-line);
  border-radius: 1.15cqw;
  background: var(--dsh-layer-2);
  box-shadow: none;
  box-sizing: border-box;
}

.dsh-composer label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.dsh-composer textarea { display: block; width: 100%; height: 1.7cqw; resize: none; padding: 0; color: var(--dsh-label); border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.83cqw; line-height: 1.5; }
.dsh-composer textarea::placeholder { color: var(--dsh-muted); }
.dsh-composer-controls { display: flex; height: 1.52cqw; align-items: center; gap: 0.58cqw; font-size: 0.7cqw; }
.dsh-composer-controls button { display: grid; width: 1.46cqw; height: 1.46cqw; padding: 0; color: var(--dsh-secondary); border-radius: 50%; background: var(--dsh-layer-3); font-size: 1.25cqw; place-items: center; }
.dsh-composer-controls button[type="submit"] { color: var(--dsh-secondary); background: #4868a0; font-size: 1.15cqw; }
.dsh-permission { display: inline-flex; align-items: center; gap: 0.3cqw; color: var(--dsh-secondary); }
.dsh-permission svg { width: 0.78cqw; height: 0.78cqw; }
.dsh-demo-model { margin-left: auto; color: var(--dsh-secondary); }
.dsh-model-status { width: 0.78cqw; height: 0.78cqw; border: 0.13cqw solid #686b70; border-top-color: var(--dsh-secondary); border-radius: 50%; }

.dsh-session-stats { position: absolute; right: 0; bottom: 0; left: 0; height: 1.66cqw; overflow: hidden; color: var(--dsh-tertiary); font-size: 0.63cqw; line-height: 1.66cqw; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.dsh-demo-explorer {
  position: relative;
  grid-column: 3;
  grid-row: 1 / 3;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--dsh-line-thin);
  background: var(--dsh-bg);
  transition: opacity 160ms ease;
}
.dsh-app-demo[data-explorer-collapsed="true"] .dsh-demo-explorer { opacity: 0; pointer-events: none; }

.dsh-workbench-tabs {
  position: relative;
  display: flex;
  height: 1.82cqw;
  align-items: stretch;
  padding: 0;
  border-bottom: 1px solid var(--dsh-line-thin);
  background: var(--dsh-layer-1);
  font-size: 0.73cqw;
}

.dsh-workbench-tabs > button { display: inline-flex; align-items: center; gap: 0.35cqw; padding: 0 0.75cqw; color: var(--dsh-secondary); border-right: 1px solid var(--dsh-line-thin); background: transparent; }
.dsh-workbench-tabs > button.active { color: var(--dsh-label); background: rgba(255,255,255,.05); }
.dsh-workbench-tabs > button span { margin-left: 0.35cqw; color: var(--dsh-muted); }
.dsh-workbench-tabs .dsh-add-tab { width: 1.82cqw; justify-content: center; padding: 0; font-size: 1.2cqw; }
.dsh-workbench-tabs svg { width: 0.78cqw; height: 0.78cqw; }
.dsh-panel-toggles { position: absolute; z-index: 2; top: 0.17cqw; right: 0.5cqw; display: flex; gap: 0.2cqw; }
.dsh-panel-toggles button { display: grid; width: 1.46cqw; height: 1.46cqw; padding: 0; color: var(--dsh-secondary); border-radius: 50%; background: transparent; place-items: center; }
.dsh-panel-toggles button:hover { color: var(--dsh-label); background: var(--dsh-hover); }

.dsh-explorer-header { display: flex; height: 2.48cqw; align-items: center; justify-content: space-between; padding: 0 0.72cqw; color: var(--dsh-secondary); font-size: 0.73cqw; }
.dsh-explorer-header button { display: grid; width: 1.46cqw; height: 1.46cqw; padding: 0; color: var(--dsh-secondary); border-radius: 50%; background: transparent; place-items: center; }
.dsh-explorer-header button:hover { background: var(--dsh-hover); }

.dsh-file-folder,
.dsh-file-tree button {
  display: flex;
  width: 100%;
  height: 1.8cqw;
  align-items: center;
  gap: 0.35cqw;
  padding: 0 0.72cqw;
  color: var(--dsh-secondary);
  border-radius: 0;
  background: transparent;
  font-size: 0.73cqw !important;
  text-align: left;
}
.dsh-file-folder:hover,
.dsh-file-tree button:hover { color: var(--dsh-label); background: var(--dsh-hover); }
.dsh-file-folder strong { font-weight: 500; }
.dsh-file-folder[aria-expanded="false"] + .dsh-file-tree { display: none; }
.dsh-file-tree { display: grid; padding: 0; }
.dsh-file-tree button { padding-left: 1.42cqw; }
.dsh-file-tree button svg { width: 0.78cqw; height: 0.78cqw; }

.dsh-file-preview { position: absolute; inset: 1.82cqw 0 0; background: var(--dsh-bg); }
.dsh-file-preview > div { display: flex; height: 1.8cqw; align-items: center; justify-content: space-between; padding: 0 0.72cqw; border-bottom: 1px solid var(--dsh-line-thin); background: var(--dsh-layer-1); font-size: 0.68cqw; }
.dsh-file-preview > div button { padding: 0.2cqw; color: var(--dsh-muted); background: transparent; }
.dsh-file-preview pre { margin: 0; padding: 1cqw; color: var(--dsh-secondary); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.62cqw; line-height: 1.65; white-space: pre-wrap; }
.dsh-file-preview pre span { color: var(--dsh-blue); }

.dsh-demo-terminal {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid var(--dsh-line-thin);
  background: var(--dsh-bg);
  font-family: "SFMono-Regular", Consolas, monospace;
  transition: opacity 160ms ease;
}
.dsh-app-demo[data-terminal-collapsed="true"] .dsh-demo-terminal { opacity: 0; pointer-events: none; }

.dsh-demo-terminal > header { position: relative; display: flex; height: 1.82cqw; align-items: stretch; gap: 0; padding: 0; color: var(--dsh-secondary); border-bottom: 1px solid var(--dsh-line-thin); background: var(--dsh-layer-1); font-size: 0.68cqw; }
.dsh-demo-terminal > header button { display: flex; align-items: center; gap: 0.35cqw; padding: 0 0.72cqw; color: var(--dsh-secondary); border-right: 1px solid var(--dsh-line-thin); background: transparent; }
.dsh-demo-terminal > header button.active { color: var(--dsh-label); background: rgba(255,255,255,.04); }
.dsh-demo-terminal > header button > span { margin-left: 0.35cqw; color: var(--dsh-muted); }
.dsh-demo-terminal > header button svg { width: 0.76cqw; height: 0.76cqw; }
.dsh-demo-terminal > header .dsh-terminal-close { position: absolute; right: 0.35cqw; width: 1.46cqw; justify-content: center; padding: 0; border: 0; font-size: 1cqw; }

.dsh-demo-terminal .terminal-output { display: grid; min-height: 2.1cqw; gap: 0.25cqw; padding: 0.7cqw 0.9cqw 0.25cqw; color: var(--dsh-secondary); font-size: 0.67cqw; }
.dsh-demo-terminal .terminal-success { color: #4ed17e; }
.dsh-demo-terminal .terminal-prompt { display: flex; align-items: center; gap: 0.3cqw; padding: 0 0.9cqw; color: var(--dsh-secondary); font-size: 0.67cqw; }
.dsh-demo-terminal .terminal-prompt input { min-width: 0; flex: 1; padding: 0.26cqw 0.35cqw; color: var(--dsh-label); border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.67cqw; }
.dsh-demo-terminal .terminal-prompt button { padding: 0.25cqw 0.48cqw; color: var(--dsh-secondary); border: 1px solid var(--dsh-line); border-radius: 0.3cqw; background: transparent; font-size: 0.58cqw; }

.dsh-demo-toast {
  position: absolute;
  z-index: 40;
  right: 1cqw;
  bottom: 1cqw;
  max-width: 18cqw;
  padding: 0.55cqw 0.72cqw;
  color: var(--dsh-label);
  border: 1px solid var(--dsh-line);
  border-radius: 0.45cqw;
  background: #43454a;
  box-shadow: 0 0.8cqw 2cqw rgba(0,0,0,.3);
  font-size: 0.63cqw;
  font-weight: 500;
}

.dsh-app-demo[data-demo-view="settings"] .dsh-main-view { bottom: 0; }
.dsh-app-demo[data-demo-view="settings"] .dsh-composer,
.dsh-app-demo[data-demo-view="settings"] .dsh-session-stats { display: none; }

.dsh-app-demo[data-explorer-collapsed="true"] .dsh-demo-explorer {
  overflow: visible;
  opacity: 1;
  border: 0;
  background: transparent;
  pointer-events: none;
}
.dsh-app-demo[data-explorer-collapsed="true"] .dsh-workbench-tabs {
  overflow: visible;
  border: 0;
  background: transparent;
}
.dsh-app-demo[data-explorer-collapsed="true"] .dsh-workbench-tabs > button,
.dsh-app-demo[data-explorer-collapsed="true"] .dsh-explorer-header,
.dsh-app-demo[data-explorer-collapsed="true"] .dsh-file-folder,
.dsh-app-demo[data-explorer-collapsed="true"] .dsh-file-tree,
.dsh-app-demo[data-explorer-collapsed="true"] .dsh-file-preview { display: none; }
.dsh-app-demo[data-explorer-collapsed="true"] .dsh-panel-toggles { pointer-events: auto; }

[data-demo-refresh-files].spinning svg { animation: dsh-refresh-spin 480ms ease; }

.dsh-app-demo[data-demo-theme="light"] {
  --dsh-bg: #ffffff;
  --dsh-sidebar: #f9fafb;
  --dsh-layer-1: #f5f6f7;
  --dsh-layer-2: #f1f3f5;
  --dsh-layer-3: #e9ecf2;
  --dsh-label: #0f1115;
  --dsh-secondary: #61666b;
  --dsh-tertiary: #81858c;
  --dsh-muted: #979da6;
  --dsh-line: rgba(0, 0, 0, 0.1);
  --dsh-line-thin: rgba(0, 0, 0, 0.04);
  --dsh-hover: rgba(38, 49, 72, 0.06);
}
.dsh-app-demo[data-demo-theme="light"] .dsh-demo-brand img,
.dsh-app-demo[data-demo-theme="light"] .dsh-new-view img { filter: drop-shadow(0 0 0.3cqw rgba(82, 101, 228, 0.2)); }
.dsh-app-demo[data-demo-theme="light"] .dsh-new-chat { background: #fff; }
.dsh-app-demo[data-demo-theme="light"] .dsh-demo-brand small { color: white; background: #353638; }

@keyframes dsh-refresh-spin { to { transform: rotate(1turn); } }

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(100%, var(--max-width));
  margin: 0 auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proof-strip > div {
  display: flex;
  min-height: 96px;
  align-items: center;
  gap: 18px;
  padding: 0 var(--page-pad);
  border-right: 1px solid var(--line);
}

.proof-strip > div:last-child { border: 0; }
.proof-strip span { color: var(--blue); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; }
.proof-strip strong { font-size: 13px; line-height: 1.45; }

.why-section {
  width: min(100%, var(--max-width));
  margin: 0 auto;
  padding: clamp(110px, 13vw, 190px) var(--page-pad);
}

.section-intro {
  display: grid;
  grid-template-columns: minmax(140px, 0.45fr) minmax(440px, 1.2fr) minmax(240px, 0.55fr);
  align-items: end;
  gap: 48px;
  padding-bottom: 78px;
}

.section-intro h2,
.inside-heading h2,
.download-heading h2,
.faq-heading h2 {
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 1.02;
}

.section-intro h2 em {
  color: var(--blue);
  font-style: normal;
}

.section-intro > p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.feature-ledger {
  border-top: 1px solid var(--ink);
}

.feature-row {
  display: grid;
  grid-template-columns: 0.45fr 1.15fr 0.85fr;
  min-height: 290px;
  align-items: center;
  gap: 48px;
  border-bottom: 1px solid var(--line);
}

.feature-number {
  align-self: start;
  padding-top: 34px;
  color: var(--blue);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
}

.feature-copy h3 {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 46px);
  letter-spacing: -0.055em;
}

.feature-copy p {
  max-width: 520px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

code {
  padding: 0.16em 0.4em;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(20, 23, 22, 0.04);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.86em;
}

.boot-visual {
  padding: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.26);
}

.boot-visual > div {
  display: flex;
  height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
}

.boot-visual > div:last-child { border: 0; }
.boot-visual small { font-size: 8px; }
.boot-visual .ready { color: var(--ink); background: var(--acid); font-weight: 700; }

.orbit-visual {
  position: relative;
  width: 230px;
  height: 190px;
  justify-self: center;
}

.orbit,
.orbit-core,
.orbit-node {
  position: absolute;
  border-radius: 50%;
}

.orbit {
  border: 1px solid var(--line);
}

.orbit-one { inset: 20px 40px; }
.orbit-two { inset: 0 20px; }

.orbit-core {
  top: 50%;
  left: 50%;
  display: grid;
  width: 90px;
  height: 90px;
  color: white;
  background: var(--blue);
  place-content: center;
  text-align: center;
  transform: translate(-50%, -50%);
}

.orbit-core span { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; font-weight: 700; }
.orbit-core small { margin-top: 5px; color: var(--blue-soft); font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; letter-spacing: 0.18em; }
.orbit-node { width: 11px; height: 11px; background: var(--acid); box-shadow: 0 0 0 6px rgba(199, 239, 81, 0.18); }
.node-one { top: 17px; left: 57px; }
.node-two { right: 35px; bottom: 36px; }

.tray-visual {
  position: relative;
  width: 260px;
  height: 170px;
  justify-self: center;
}

.mini-window {
  position: absolute;
  top: 10px;
  left: 0;
  display: flex;
  width: 180px;
  height: 110px;
  gap: 5px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.28);
}

.mini-window span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.tray-line { position: absolute; right: 6px; bottom: 15px; width: 150px; height: 1px; background: var(--ink); }

.tray-menu {
  position: absolute;
  right: 0;
  bottom: 26px;
  display: grid;
  width: 112px;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--blue);
}

.tray-menu > * { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 8px; }
.tray-menu > *:last-child { border: 0; }

.inside-section {
  color: var(--white);
  background:
    radial-gradient(circle at 74% 14%, rgba(49, 92, 245, 0.22), transparent 30rem),
    var(--night);
}

.inside-section > * {
  width: min(100%, var(--max-width));
  margin-right: auto;
  margin-left: auto;
}

.inside-heading {
  display: grid;
  grid-template-columns: 0.45fr 1.55fr;
  gap: 48px;
  padding: clamp(110px, 12vw, 175px) var(--page-pad) 82px;
}

.section-code.light { color: #6f7773; }

.flow-diagram {
  display: grid;
  grid-template-columns: 1fr 88px 1fr 88px 1fr 88px 1fr;
  padding: 0 var(--page-pad);
}

.flow-node {
  min-height: 210px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.025);
}

.flow-node.primary-node {
  color: var(--ink);
  border-color: var(--acid);
  background: var(--acid);
}

.flow-node > span { color: #69716d; font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; }
.primary-node > span { color: rgba(20, 23, 22, 0.55); }
.flow-node strong { display: block; margin-top: 86px; font-size: 20px; letter-spacing: -0.03em; }
.flow-node small { display: block; margin-top: 7px; color: #6f7773; font-size: 10px; }
.primary-node small { color: rgba(20, 23, 22, 0.62); }

.flow-arrow {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
}

.flow-arrow span { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.18); }
.flow-arrow span::after { display: block; width: 6px; height: 6px; margin-top: -3px; margin-left: auto; content: ""; border-top: 1px solid #78807c; border-right: 1px solid #78807c; transform: rotate(45deg); }
.flow-arrow b { color: #626a66; font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; letter-spacing: 0.13em; }

.inside-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 72px var(--page-pad) clamp(110px, 12vw, 175px);
}

.inside-notes p { margin: 0; color: #737b77; font-size: 12px; line-height: 1.7; }
.inside-notes span { display: block; margin-bottom: 8px; color: white; font-size: 13px; font-weight: 700; }

.download-section {
  width: min(100%, var(--max-width));
  margin: 0 auto;
  padding: clamp(110px, 12vw, 175px) var(--page-pad);
}

.download-heading {
  display: grid;
  grid-template-columns: 0.45fr 1.15fr 0.55fr;
  align-items: end;
  gap: 48px;
}

.download-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.download-heading p strong { color: var(--ink); }

.download-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 72px;
}

.download-card {
  position: relative;
  min-height: 390px;
  padding: 28px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.24);
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.download-card:hover,
.download-card.detected {
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.46);
  transform: translateY(-4px);
}

.download-card.featured {
  color: white;
  border-color: var(--blue);
  background: var(--blue);
}

.download-card.featured:hover,
.download-card.featured.detected { background: #244de0; }

.platform-icon {
  display: grid;
  width: 54px;
  height: 54px;
  color: currentColor;
  border: 1px solid currentColor;
  place-items: center;
}

.platform-icon svg { width: 24px; fill: currentColor; }
.recommended { position: absolute; top: 31px; right: 28px; color: var(--blue-soft); font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; letter-spacing: 0.1em; }
.download-card h3 { margin: 86px 0 0; font-size: 34px; letter-spacing: -0.05em; }
.download-card p { margin: 7px 0 0; font-size: 15px; }
.download-card > small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }
.download-card.featured > small { color: var(--blue-soft); }

.card-download {
  position: absolute;
  right: 28px;
  bottom: 26px;
  left: 28px;
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
}

.featured .card-download { border-color: rgba(255, 255, 255, 0.28); }
.card-download svg { width: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.card-download[data-pending="true"] { cursor: help; }

.release-pending {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.release-pending > span {
  display: grid;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: white;
  border-radius: 50%;
  background: var(--ink);
  font-family: Georgia, serif;
  font-size: 10px;
  font-style: italic;
  place-items: center;
}

.faq-section {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 80px;
  width: min(100%, var(--max-width));
  margin: 0 auto;
  padding: 20px var(--page-pad) clamp(110px, 12vw, 175px);
}

.faq-heading .section-code { margin-bottom: 32px; }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }

.faq-list summary {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  min-height: 84px;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--blue); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; }
.faq-list summary b { color: var(--muted); font-size: 20px; font-weight: 400; transition: transform 180ms ease; }
.faq-list details[open] summary b { transform: rotate(45deg); }
.faq-list details p { max-width: 680px; margin: -5px 0 30px 48px; color: var(--muted); font-size: 13px; line-height: 1.85; }

.site-footer {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 0.8fr auto;
  align-items: start;
  gap: 48px;
  width: min(100%, var(--max-width));
  margin: 0 auto;
  padding: 52px var(--page-pad) 42px;
  border-top: 1px solid var(--ink);
}

.footer-brand strong,
.footer-brand span { display: block; }
.footer-brand strong { font-size: 13px; }
.footer-brand span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.site-footer > p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; font-size: 10px; font-weight: 650; }
.copyright { color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; white-space: nowrap; }

.toast {
  position: fixed;
  z-index: 50;
  right: 24px;
  bottom: 24px;
  max-width: min(380px, calc(100vw - 48px));
  padding: 14px 18px;
  color: white;
  border-left: 3px solid var(--acid);
  background: var(--night);
  box-shadow: 0 18px 48px rgba(20, 23, 22, 0.28);
  font-size: 12px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal {
  opacity: 1;
  transform: none;
}

.motion-ready .hero .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.motion-ready .hero .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.hero .reveal:nth-child(2) { transition-delay: 80ms; }
.hero .reveal:nth-child(3) { transition-delay: 160ms; }
.hero .reveal:nth-child(4) { transition-delay: 240ms; }
.hero .reveal:nth-child(5) { transition-delay: 320ms; }
.product-stage.reveal { transition-delay: 160ms; }

@keyframes mock-spin {
  to { transform: rotate(1turn); }
}

@keyframes screenshot-drift {
  from { transform: scale(1); }
  to { transform: scale(1.018); }
}

@keyframes screenshot-sheen {
  0%, 62% { left: -35%; opacity: 0; }
  68% { opacity: 1; }
  86%, 100% { left: 118%; opacity: 0; }
}

@keyframes demo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(49, 92, 245, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(49, 92, 245, 0); }
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    padding-right: var(--page-pad);
  }

  .hero-copy { max-width: 760px; padding: 30px 0 70px; }
  .product-stage { height: min(720px, 78vw); min-height: 560px; border: 1px solid var(--line); }
  .app-window { left: 6%; width: 88%; }
  .app-window.hero-client-window { left: 5%; width: 112%; }
  .app-window.dsh-app-demo { left: 2%; width: 96%; }
  .section-intro,
  .download-heading { grid-template-columns: 0.35fr 1.25fr; }
  .section-intro > p,
  .download-heading > p { grid-column: 2; max-width: 460px; }
  .flow-diagram { grid-template-columns: 1fr 44px 1fr; gap: 0; }
  .flow-diagram .flow-node:nth-of-type(3) { grid-column: 1; }
  .flow-diagram .flow-node:nth-of-type(4) { grid-column: 3; }
  .flow-diagram .flow-arrow:nth-of-type(2) { display: none; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: 1fr auto;
    height: 72px;
  }

  .site-nav,
  .brand-version { display: none; }
  .header-action { font-size: 12px; }
  .hero { min-height: auto; padding-top: 54px; }
  .hero h1 { font-size: clamp(54px, 17vw, 78px); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .button-primary { width: 100%; }
  .product-stage { min-height: 460px; height: 118vw; max-height: 600px; }
  .app-window { top: 13%; left: 7%; width: 106%; height: 74%; min-height: 360px; }
  .app-window.hero-client-window {
    top: 15%;
    left: 4%;
    width: 158%;
    height: auto;
    min-height: 0;
  }
  .app-window.dsh-app-demo {
    top: 13%;
    left: 3%;
    width: 158%;
    height: auto;
    min-height: 0;
  }
  .client-view-controls {
    right: 8px;
    bottom: 3%;
    left: 8px;
    width: auto;
    transform: none;
  }
  .client-view-controls button {
    min-width: 0;
    flex: 1;
    padding: 0 5px;
  }
  .client-view-controls button span { display: none; }
  .client-capture-status,
  .stage-label-side,
  .local-chip,
  .runtime-chip { display: none; }
  .app-shell { grid-template-columns: 116px 1fr; }
  .mock-sidebar { padding: 11px 7px; }
  .mock-brand { padding-right: 4px; padding-left: 4px; }
  .mock-brand strong { font-size: 8px; }
  .new-task { padding: 0 5px; }
  .new-task kbd { display: none; }
  .task-row { padding: 0 4px; }
  .sidebar-footer { right: 7px; left: 7px; grid-template-columns: 20px 1fr; }
  .sidebar-footer > span:last-child { display: none; }
  .avatar { width: 19px; height: 19px; }
  .conversation { padding: 20px 14px 88px; }
  .composer { right: 12px; bottom: 12px; left: 12px; }
  .proof-strip { grid-template-columns: 1fr; }
  .proof-strip > div { min-height: 72px; border-right: 0; border-bottom: 1px solid var(--line); }
  .section-intro,
  .download-heading,
  .inside-heading,
  .faq-section { grid-template-columns: 1fr; gap: 30px; }
  .section-intro > p,
  .download-heading > p { grid-column: 1; }
  .feature-row { grid-template-columns: 42px 1fr; gap: 14px; padding: 34px 0; }
  .feature-number { padding-top: 8px; }
  .feature-row > :last-child { grid-column: 2; width: 100%; margin-top: 24px; }
  .orbit-visual,
  .tray-visual { justify-self: start; }
  .inside-heading { padding-bottom: 56px; }
  .flow-diagram { grid-template-columns: 1fr; gap: 0; }
  .flow-node { min-height: 160px; }
  .flow-node strong { margin-top: 52px; }
  .flow-arrow { min-height: 54px; }
  .flow-arrow span { width: 1px; height: 54px; }
  .flow-arrow span::after { margin-top: auto; margin-bottom: 0; margin-left: -2.5px; transform: rotate(135deg); }
  .flow-diagram .flow-node:nth-of-type(3),
  .flow-diagram .flow-node:nth-of-type(4) { grid-column: 1; }
  .flow-diagram .flow-arrow:nth-of-type(2) { display: grid; }
  .inside-notes { grid-template-columns: 1fr; gap: 24px; padding-top: 56px; }
  .download-grid { grid-template-columns: 1fr; }
  .download-card { min-height: 330px; }
  .download-card h3 { margin-top: 55px; }
  .faq-section { padding-top: 0; }
  .faq-list summary { font-size: 14px; }
  .site-footer { grid-template-columns: 1fr; gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* DeepSeek Harness–inspired landing system.
   The product preview remains our own interactive desktop DOM component. */
:root {
  --paper: #0a0a0a;
  --paper-deep: #0e0f11;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.5);
  --line: rgba(255, 255, 255, 0.08);
  --blue: #6799fe;
  --blue-soft: #9fbdff;
  --acid: #6799fe;
  --night: #0a0a0a;
  --night-soft: #121316;
  --white: #ffffff;
  --max-width: 1280px;
  color-scheme: dark;
  font-family: "DM Sans", "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
  color: var(--ink);
  background: #0a0a0a;
}

body::before {
  z-index: 90;
  opacity: 0.035;
  mix-blend-mode: screen;
}

::selection {
  color: #07101f;
  background: #9fbdff;
}

.site-header {
  position: fixed;
  top: 18px;
  right: max(var(--page-pad), calc((100vw - 1500px) / 2));
  left: max(var(--page-pad), calc((100vw - 1500px) / 2));
  z-index: 80;
  grid-template-columns: minmax(0, 1fr) auto;
  width: auto;
  height: 58px;
  padding: 0;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 18px;
  background: rgba(8, 10, 13, 0.04);
  transform: none;
  transition: top 300ms ease, border-color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.site-header.is-scrolled {
  top: 12px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(20, 22, 27, 0.72);
  box-shadow: 0 12px 42px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(22px) saturate(150%);
}

.brand {
  justify-self: start;
  gap: 8px;
}

.site-header .brand-mark {
  width: 25px;
  height: 25px;
  overflow: hidden;
  border-radius: 7px;
  background: transparent;
}

.site-header .brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-header .brand-name {
  font-size: 15px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.brand-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.brand-repository {
  overflow: hidden;
  max-width: 310px;
  color: rgba(255, 255, 255, 0.52);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-harness {
  padding: 3px 6px;
  color: #0b0c0e;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.site-header .brand-version {
  color: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.12);
  font-size: 8px;
}

.site-nav {
  gap: 8px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  font-size: 11px;
}

.site-nav a {
  padding: 8px 13px;
  color: rgba(255, 255, 255, 0.62);
  border-radius: 999px;
}

.site-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.header-action {
  min-height: 38px;
  padding: 0 6px 0 12px;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  font-size: 11px;
}

.header-action .header-github {
  width: 16px;
  fill: currentColor;
  stroke: none;
}

.header-action:hover .header-github { transform: none; }

.header-stars {
  display: inline-flex;
  height: 28px;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  color: #d8e5ff;
  border-radius: 999px;
  background: rgba(103, 153, 254, 0.2);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
}

.header-stars b { color: #fff; font-weight: 600; }

.header-tools {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
}

.language-menu {
  position: relative;
}

.language-trigger {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.language-trigger:hover,
.language-menu.is-open .language-trigger {
  color: #fff;
  border-color: rgba(159, 189, 255, 0.34);
  background: rgba(255, 255, 255, 0.09);
}

.language-trigger:focus-visible,
.language-popover button:focus-visible {
  outline: 2px solid #9fbdff;
  outline-offset: 2px;
}

.language-globe,
.language-chevron {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.language-chevron {
  width: 11px;
  height: 11px;
  opacity: 0.55;
  transition: transform 180ms ease;
}

.language-menu.is-open .language-chevron { transform: rotate(180deg); }

.language-popover {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  display: grid;
  width: 292px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  background: rgba(16, 20, 27, 0.94);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(24px) saturate(150%);
}

.language-popover[hidden] { display: none; }

.language-popover button {
  display: grid;
  min-height: 46px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  color: rgba(255, 255, 255, 0.68);
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.language-popover button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.language-popover button[aria-checked="true"] {
  color: #fff;
  border-color: rgba(103, 153, 254, 0.24);
  background: rgba(103, 153, 254, 0.14);
}

.language-popover button span { font-size: 11px; font-weight: 650; }
.language-popover button small { color: rgba(255, 255, 255, 0.34); font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; }

.locale-switch {
  display: flex;
  align-items: center;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
}

.locale-switch button {
  min-width: 42px;
  height: 30px;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.48);
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.locale-switch button[aria-pressed="true"] {
  color: #0a0a0a;
  background: #fff;
}

.locale-switch button:focus-visible {
  outline: 2px solid #9fbdff;
  outline-offset: 2px;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(350px, 0.7fr) minmax(620px, 1.3fr);
  width: 100%;
  max-width: none;
  min-height: max(760px, 100svh);
  gap: clamp(30px, 4vw, 72px);
  padding: 122px max(var(--page-pad), calc((100vw - 1500px) / 2)) 74px;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 38%, rgba(64, 112, 170, 0.78) 0, rgba(25, 57, 96, 0.6) 34%, transparent 64%),
    linear-gradient(135deg, #162536 0%, #102d50 48%, #080d15 100%);
}

.hero-fluid,
.hero-symbol-field,
.hero-grid-field,
.hero-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-fluid {
  z-index: -5;
  mask-image: linear-gradient(#000000fc 0%, #000000e8 8.98%, transparent 100%);
}

.hero.is-fluid-fallback .hero-fluid {
  inset: -2.5%;
  width: 105%;
  height: 105%;
  filter: blur(12px);
}

.hero-grid-field {
  z-index: -3;
  background: transparent;
  mask-image: linear-gradient(#000000fc 0%, #000000e8 8.98%, transparent 100%);
}

.hero-symbol-field {
  z-index: -4;
  opacity: 0.88;
  mix-blend-mode: screen;
}

.hero-vignette {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(4, 7, 12, 0.08) 0%, transparent 55%, #0a0a0a 100%),
    radial-gradient(ellipse at center, transparent 40%, rgba(3, 5, 8, 0.46) 100%);
}

.hero-copy {
  z-index: 2;
  max-width: 580px;
  padding: 0;
}

.eyebrow,
.section-code {
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.eyebrow {
  width: max-content;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px);
}

.eyebrow-dot {
  width: 5px;
  height: 5px;
  background: #79a6ff;
  box-shadow: 0 0 14px 4px rgba(103, 153, 254, 0.55);
}

.hero h1 {
  margin-top: 0;
  color: #fff;
  font-size: clamp(50px, 4vw, 72px);
  font-weight: 520;
  line-height: 0.92;
  letter-spacing: -0.072em;
}

.hero h1 span {
  display: inline-block;
  color: #fff;
  text-shadow: 0 0 36px rgba(133, 174, 255, 0.2);
}

.hero-lede {
  max-width: 500px;
  margin-top: 26px;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 450;
  line-height: 1.7;
}

.hero-disclaimer {
  color: rgba(255, 255, 255, 0.43);
}

.hero-disclaimer > span { border-color: rgba(255, 255, 255, 0.32); }

.hero-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.button-download {
  min-width: 184px;
  padding: 0 22px;
  color: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: #fff;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button-download svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: currentColor;
}

.button-download:hover {
  background: #f4f7ff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), 0 0 0 4px rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.hero-legal {
  margin-top: 16px;
  font-size: 10px;
}

.github-proof {
  width: min(100%, 520px);
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(9, 13, 19, 0.34);
  backdrop-filter: blur(18px);
}

.github-proof:hover {
  border-color: rgba(103, 153, 254, 0.58);
  background: rgba(14, 21, 33, 0.58);
}

.github-repository small { color: rgba(255, 255, 255, 0.35); }
.github-stars { color: #dce8ff; background: rgba(103, 153, 254, 0.19); }
.github-stars > span { color: #8db1ff; }

.hero-actions { margin-top: 28px; gap: 14px; }

.button {
  min-height: 50px;
  border-radius: 999px;
  font-size: 12px;
}

.button-primary {
  min-width: 192px;
  color: #0a0a0a;
  border-color: #fff;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25);
}

.button-primary:hover {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), 0 0 0 4px rgba(255, 255, 255, 0.1);
}

.button-text {
  min-height: 50px;
  padding: 0 20px;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.hero-notes {
  margin-top: 25px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 8px;
}

.product-stage {
  z-index: 2;
  height: clamp(520px, calc(100svh - 196px), 720px);
  overflow: visible;
  border: 0;
  background: transparent;
  perspective: 1600px;
}

.product-stage::before {
  position: absolute;
  inset: 6% -8% 4% 7%;
  content: "";
  border-radius: 50%;
  background: rgba(23, 58, 108, 0.32);
  filter: blur(70px);
}

.stage-grid { display: none; }

.stage-label-top {
  top: 2%;
  left: 2%;
  color: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(12px);
}

.stage-label-side { display: none; }

.app-window.dsh-app-demo {
  top: 10%;
  left: 0;
  width: 100%;
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 1.3cqw;
  background: #151517;
  box-shadow: 0 4cqw 9cqw rgba(0, 0, 0, 0.56), 0 0 0 0.45cqw rgba(255, 255, 255, 0.025);
  transform: translate(var(--stage-x), var(--stage-y)) rotateY(-1.5deg) rotateX(0.7deg);
}

.runtime-chip {
  left: auto;
  right: 2%;
  bottom: 4%;
  color: rgba(255, 255, 255, 0.62);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(9, 12, 17, 0.68);
  backdrop-filter: blur(14px);
}

.dsh-demo-brand img,
.dsh-new-view img { filter: drop-shadow(0 0 0.35cqw rgba(88, 166, 255, 0.32)); }

.proof-strip {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 40px), var(--max-width));
  margin-top: -1px;
  border-color: rgba(255, 255, 255, 0.08);
  background: #0a0a0a;
}

.proof-strip > div {
  min-height: 112px;
  padding: 0 clamp(20px, 3vw, 42px);
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.015);
}

.proof-strip span { color: #6799fe; }
.proof-strip strong { color: rgba(255, 255, 255, 0.8); font-size: 12px; font-weight: 500; }

.why-section,
.download-section,
.faq-section {
  color: #fff;
  background: #0a0a0a;
}

.why-section { padding-top: clamp(130px, 15vw, 210px); }

.section-intro {
  grid-template-columns: 0.35fr 1.25fr 0.55fr;
  align-items: start;
  padding-bottom: 76px;
}

.section-intro h2,
.inside-heading h2,
.download-heading h2,
.faq-heading h2 {
  color: #fff;
  font-size: clamp(42px, 5.2vw, 76px);
  font-weight: 510;
  line-height: 1.03;
  letter-spacing: -0.06em;
}

.section-intro h2 em { color: #6799fe; }
.section-intro > p,
.download-heading p,
.faq-list details p { color: rgba(255, 255, 255, 0.44); }

.feature-ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  border: 0;
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 410px;
  align-content: start;
  gap: 0;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 120%, rgba(103, 153, 254, 0.1), transparent 48%),
    rgba(255, 255, 255, 0.018);
}

.feature-row:hover { border-color: rgba(103, 153, 254, 0.24); }
.feature-number { padding: 0; color: #6799fe; }
.feature-copy { margin-top: 72px; }
.feature-copy h3 { font-size: clamp(25px, 2.2vw, 34px); font-weight: 520; }
.feature-copy p { margin-top: 14px; color: rgba(255, 255, 255, 0.42); font-size: 12px; }
.feature-row > :last-child { align-self: end; width: 100%; margin-top: 38px; }

.boot-visual,
.mini-window,
.tray-menu {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.025);
}

.boot-visual > div { color: rgba(255, 255, 255, 0.38); border-color: rgba(255, 255, 255, 0.07); }
.boot-visual .ready { color: #e8f0ff; background: rgba(103, 153, 254, 0.22); }
.orbit-visual { height: 160px; }
.orbit { border-color: rgba(255, 255, 255, 0.1); }
.orbit-core { color: #fff; background: rgba(103, 153, 254, 0.28); box-shadow: 0 0 55px rgba(103, 153, 254, 0.18); }
.orbit-node { background: #8bb0ff; box-shadow: 0 0 0 6px rgba(103, 153, 254, 0.12); }
.tray-visual { height: 150px; }
.tray-line { background: rgba(255, 255, 255, 0.22); }
.tray-menu { color: rgba(255, 255, 255, 0.7); box-shadow: 8px 8px 0 rgba(103, 153, 254, 0.18); }

.inside-section {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at 74% 12%, rgba(48, 91, 165, 0.18), transparent 31rem),
    #0a0a0a;
}

.flow-node {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.022);
}

.flow-node.primary-node {
  color: #fff;
  border-color: rgba(103, 153, 254, 0.4);
  background: rgba(103, 153, 254, 0.18);
}

.primary-node > span,
.flow-node small,
.primary-node small,
.inside-notes p { color: rgba(255, 255, 255, 0.4); }

.download-card,
.download-card.detected {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.022);
}

.download-card:hover,
.download-card.detected { border-color: rgba(103, 153, 254, 0.32); background: rgba(103, 153, 254, 0.055); }

.download-card.featured,
.download-card.featured:hover,
.download-card.featured.detected {
  color: #07101e;
  border-color: #dce8ff;
  background: #dce8ff;
}

.download-card > small { color: rgba(255, 255, 255, 0.4); }
.download-card.featured > small { color: rgba(7, 16, 30, 0.5); }
.recommended { color: rgba(7, 16, 30, 0.52); }
.card-download { border-color: rgba(255, 255, 255, 0.09); }
.featured .card-download { border-color: rgba(7, 16, 30, 0.14); }

code { border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.04); }
.release-pending { color: rgba(255, 255, 255, 0.4); }
.release-pending > span { color: #0a0a0a; background: rgba(255, 255, 255, 0.8); }

.faq-list { border-top-color: rgba(255, 255, 255, 0.18); }
.faq-list details { border-color: rgba(255, 255, 255, 0.08); }
.faq-list summary { color: rgba(255, 255, 255, 0.82); font-weight: 500; }
.faq-list summary b { color: rgba(255, 255, 255, 0.34); }

.site-footer {
  color: #fff;
  border-top-color: rgba(255, 255, 255, 0.08);
  background: #0a0a0a;
}

.site-footer .brand-mark { background: rgba(255, 255, 255, 0.08); }
.site-footer > p,
.footer-brand span,
.copyright { color: rgba(255, 255, 255, 0.36); }

.toast {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid #6799fe;
  border-radius: 12px;
  background: rgba(18, 20, 25, 0.9);
  backdrop-filter: blur(18px);
}

.motion-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.motion-ready .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-right: var(--page-pad);
    padding-left: var(--page-pad);
  }

  .hero-copy { max-width: 760px; padding: 72px 0 24px; }
  .product-stage { width: 100%; height: min(720px, 72vw); min-height: 560px; }
  .app-window.dsh-app-demo { top: 5%; left: 2%; width: 96%; }
}

@media (max-width: 840px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .brand-version { display: none; }
  .feature-ledger { grid-template-columns: 1fr; }
  .feature-row { min-height: 350px; }
}

@media (max-width: 760px) {
  .site-header { top: 10px; right: 10px; left: 10px; width: auto; height: 54px; padding: 0 10px 0 13px; border-color: rgba(255, 255, 255, 0.08); background: rgba(12, 15, 20, 0.58); backdrop-filter: blur(18px); }
  .site-header.is-scrolled { top: 8px; right: 8px; left: 8px; width: auto; }
  .site-header .brand-name { font-size: 14px; }
  .brand-repository { display: none; }
  .header-action { padding-left: 9px; }
  .header-action > :not(.header-github):not(.header-stars) { display: none; }
  .header-stars { padding: 0 8px; }
  .header-tools { gap: 6px; }
  .language-trigger { width: 38px; justify-content: center; padding: 0; }
  .language-trigger [data-active-locale-label],
  .language-chevron { display: none; }
  .language-popover { position: fixed; top: 72px; right: 10px; left: 10px; width: auto; }
  .hero { padding-top: 102px; }
  .hero-grid-field { display: none; }
  .hero-copy { padding-top: 34px; }
  .hero h1 { font-size: clamp(44px, 13vw, 68px); }
  .hero-downloads { flex-direction: column; }
  .button-download { width: min(100%, 280px); }
  .product-stage { min-height: 430px; height: 112vw; }
  .app-window.dsh-app-demo { top: 10%; left: 2%; width: 150%; }
  .proof-strip { width: calc(100% - 24px); }
  .section-intro { grid-template-columns: 1fr; }
  .section-intro > p { grid-column: 1; }
  .feature-row { grid-template-columns: 1fr; padding: 24px; }
  .feature-row > :last-child { grid-column: 1; }
}

@media (max-width: 560px) {
  .site-header .brand-version { display: none; }
  .header-stars { display: none; }
}