:root {
  color-scheme:light dark;
  --ink:#122d2a;
  --muted:#52645e;
  --paper:#f7f7ef;
  --line:#d5dcd0;
  --panel:#eef1e6;
  --shadow:#e4e9db;
  --focus:#497a26;
  --green:#c1e59b;
  --term:#122d2a;
  --term-bar:#203d36;
  --term-line:#34504a;
  --term-text:#e7eddf;
  --term-dim:#9fb2a6;
  --agent:#f1d38a;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
}

@media (prefers-color-scheme:dark) {
  :root {
    --ink:#e3eadc;
    --muted:#a3b3aa;
    --paper:#0f1f1c;
    --line:#2b413b;
    --panel:#162a26;
    --shadow:#09140f;
    --focus:#c1e59b;
    --term:#0a1714;
    --term-bar:#13292a;
    --term-line:#2b413b;
  }
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
}

a {
  color:inherit;
  text-underline-offset:5px;
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:4px;
}

p,li {
  line-height:1.65;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2 {
  text-wrap:balance;
  font-weight:500;
  letter-spacing:-.05em;
  line-height:1.06;
}

h1 {
  font-size:clamp(3rem,5.4vw,5rem);
}

h2 {
  font-size:clamp(2.1rem,4vw,3.3rem);
}

h3 {
  font-size:1.2rem;
  font-weight:600;
  letter-spacing:-.02em;
}

code,pre {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}

code {
  font-size:.92em;
}

.wrap {
  max-width:1240px;
  padding:0 48px;
  margin:auto;
}

header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:30px 0;
  border-bottom:1px solid var(--line);
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-weight:650;
  font-size:1.35rem;
  letter-spacing:-.04em;
  text-decoration:none;
}

nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px 28px;
  font-size:.95rem;
}

nav a {
  text-decoration:none;
}

nav a:hover,.cta a:hover {
  text-decoration:underline;
}

.cta-link {
  font-weight:600;
}

.cta-link span {
  margin-left:8px;
}

.hero {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:65px;
  align-items:center;
  padding:96px 0 110px;
}

.eyebrow {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.75rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:23px;
}

.lead {
  color:var(--muted);
  font-size:1.12rem;
  max-width:540px;
  margin-top:28px;
}

.hero-links {
  margin-top:32px;
}

.explore {
  display:inline-flex;
  gap:28px;
  font-weight:550;
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:6px;
}

.workspace {
  background:var(--term);
  color:var(--term-text);
  border-radius:12px;
  box-shadow:14px 18px 0 var(--shadow);
  transform:rotate(-2deg);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.83rem;
}

.window-bar,.screen-bar {
  display:flex;
  align-items:center;
  gap:22px;
  border-bottom:1px solid var(--term-line);
  padding:15px 20px;
  color:#bfccc4;
  font-size:.73rem;
}

.window-dots {
  font-size:.6rem;
  letter-spacing:3px;
  color:#8b9e90;
}

.terminal {
  padding:28px 25px 15px;
  line-height:1.8;
}

.prompt,.cursor,.tree>span {
  color:var(--green);
}

.command {
  color:#d8e2d2;
}

.tree {
  margin:24px 0;
  color:#bdcbbb;
  line-height:1.9;
}

.session {
  font-size:.72rem;
  color:#bdcbbb;
  margin-bottom:20px;
}

.access {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px 22px;
  background:var(--term-bar);
  border-radius:0 0 12px 12px;
  padding:18px;
  font-size:.73rem;
}

.details {
  border-top:1px solid var(--line);
  padding:72px 0 80px;
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:70px;
  scroll-margin-top:20px;
}

.section-intro>p:last-child {
  max-width:340px;
  color:var(--muted);
  margin-top:24px;
}

.section-intro.wide>p:last-child {
  max-width:620px;
}

.features {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:42px 35px;
}

.number {
  display:block;
  color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.72rem;
  margin-bottom:16px;
}

.features p,.flow p {
  color:var(--muted);
  font-size:.95rem;
  margin-top:12px;
}

.flow {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:42px 35px;
}

.limits {
  grid-column:2;
  background:var(--panel);
  border-radius:10px;
  padding:26px 28px;
}

.limits ul {
  margin:14px 0 18px;
  padding-left:20px;
  color:var(--muted);
  font-size:.95rem;
}

.limits p {
  color:var(--muted);
  font-size:.92rem;
}

/* Demo: without JavaScript every step is shown as a readable sequence. */
.demo-section {
  border-top:1px solid var(--line);
  padding:72px 0 80px;
  scroll-margin-top:20px;
}

.demo {
  margin-top:42px;
}

.demo-badge {
  display:inline-block;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 14px;
  margin-bottom:24px;
}

.demo-steps {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:34px 30px;
}

.demo-step {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.demo-caption {
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.demo-caption p {
  color:var(--muted);
  font-size:.95rem;
}

.demo-num {
  flex:none;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.8rem;
}

.screen {
  background:var(--term);
  color:var(--term-text);
  border-radius:10px;
  overflow:hidden;
  min-width:0;
}

.screen-bar {
  justify-content:space-between;
  padding:11px 16px;
}

.screen-bar.inner {
  justify-content:flex-start;
  border-top:1px solid var(--term-line);
  color:var(--green);
}

.screen pre {
  margin:0;
  padding:16px 18px 18px;
  font-size:.8rem;
  line-height:1.7;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.screen pre.dim {
  color:var(--term-dim);
}

.ln {
  display:inline;
}

.ln .p {
  color:var(--green);
}

.ln.o {
  color:var(--term-dim);
}

.ln.a {
  color:var(--agent);
}

.screen.phone {
  max-width:300px;
  border-radius:22px;
  border:6px solid var(--term-bar);
  justify-self:start;
}

.keys {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:10px 12px 14px;
  border-top:1px solid var(--term-line);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.66rem;
}

.keys span {
  border:1px solid var(--term-line);
  border-radius:5px;
  padding:3px 7px;
  color:#bfccc4;
}

.demo-controls {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:22px;
}

.demo-controls[hidden] {
  display:none;
}

.demo-controls button {
  font:inherit;
  font-size:.9rem;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--ink);
  border-radius:999px;
  padding:7px 16px;
  cursor:pointer;
}

.demo-dots {
  display:flex;
  gap:8px;
}

.demo-dots button {
  padding:6px 12px;
  border-color:var(--line);
}

.demo-dots button[aria-current="step"] {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}

/* With JavaScript (demo.js adds .is-live): one step at a time, as a replay. */
.demo.is-live .demo-steps {
  display:block;
}

.demo.is-live .demo-step {
  display:none;
  max-width:760px;
}

.demo.is-live .demo-step.is-current {
  display:flex;
}

.demo.is-live .screen {
  min-height:250px;
}

.demo.is-live .screen.phone {
  min-height:0;
}

.demo.is-live .ln.is-pending {
  visibility:hidden;
}

.status {
  border-top:1px solid var(--line);
  padding:72px 0 80px;
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:70px;
  align-items:end;
}

.status p:not(.eyebrow) {
  color:var(--muted);
  margin-top:20px;
  max-width:440px;
}

.cta {
  display:flex;
  flex-wrap:wrap;
  gap:14px 34px;
  align-items:center;
  font-size:1.05rem;
}

.cta a {
  font-weight:600;
}

footer {
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:10px 25px;
  align-items:center;
  padding:28px 0 35px;
  font-size:.78rem;
  color:var(--muted);
}

footer>span:first-child {
  font-weight:650;
  color:var(--ink);
}

.legal {
  display:flex;
  gap:20px;
}

.env-label {
  margin-left:auto;
}

.skip {
  position:fixed;
  top:-100px;
  left:12px;
  background:var(--paper);
  z-index:2;
  padding:12px;
}

.skip:focus {
  top:12px;
}

@media(max-width:900px) {
  .wrap {
    padding:0 28px;
  }
  .hero {
    gap:35px;
    padding:70px 0 85px;
  }
  .details,.status {
    grid-template-columns:1fr;
    gap:45px;
  }
  .limits {
    grid-column:auto;
  }
  .section-intro>p:last-child {
    max-width:560px;
  }
  .workspace {
    font-size:.72rem;
  }
  .terminal {
    padding:24px 18px;
  }
}

@media(max-width:640px) {
  .wrap {
    padding:0 18px;
  }
  header {
    padding:20px 0;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  nav {
    justify-content:flex-start;
    gap:6px 20px;
  }
  .hero {
    grid-template-columns:1fr;
    gap:55px;
    padding:50px 0 70px;
  }
  h1 {
    font-size:clamp(2.6rem,11vw,4.2rem);
  }
  .lead {
    font-size:1rem;
  }
  .workspace {
    max-width:440px;
    width:calc(100% - 12px);
    justify-self:center;
    font-size:.76rem;
    transform:rotate(-1deg);
  }
  .details,.demo-section,.status {
    padding:45px 0;
  }
  .features,.flow,.demo-steps {
    grid-template-columns:1fr;
    gap:30px;
  }
  .number {
    margin-bottom:10px;
  }
  .features p,.flow p {
    margin-top:8px;
  }
  .limits {
    padding:22px 20px;
  }
  .screen pre {
    font-size:.74rem;
    padding:14px;
  }
  .demo.is-live .screen {
    min-height:230px;
  }
  .demo-controls {
    flex-wrap:wrap;
    gap:12px;
  }
  .env-label {
    margin-left:0;
    flex-basis:100%;
  }
}

@media (prefers-reduced-motion:reduce) {
  .workspace {
    transform:none;
  }
}