/* The home page. It opens on a photograph: a model rendered by cadcode, large, on
   the renderer's own studio sweep, which the hero repeats so the picture has no
   edges. Below it, open white space, big type, and the playground's details: the
   same ink, Instrument Sans and JetBrains Mono, pills, and filament yellow as the
   one accent, here also marking the numbers that make a model. */
:root {
  /* The renderer's backdrop (src/export/raster.js): white at the top, 90% at the bottom. */
  --sweep-top: #ffffff;
  --sweep-bottom: rgb(230, 230, 232);
  --well: #f3f4f6;
  --ink: #1f2833;
  --ink-soft: #6c7681;
  --hairline: rgba(31, 40, 51, 0.08);
  --lift: 0 1px 2px rgba(31, 40, 51, 0.06), 0 8px 24px -8px rgba(31, 40, 51, 0.16);
  --panel-lift: 0 2px 6px rgba(31, 40, 51, 0.05), 0 40px 80px -30px rgba(31, 40, 51, 0.28);
  --filament: #f2c14e;
  --filament-deep: #dcaa2c;
  --filament-wash: rgba(242, 193, 78, 0.28);
  --ui: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --measure: 1240px;
  --side: clamp(20px, 5vw, 64px);
  --bar: 72px;
  font: 17px/1.6 var(--ui);
  color: var(--ink);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #fff;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

code,
pre {
  font-family: var(--mono);
  font-variant-ligatures: none;
}

:not(pre) > code {
  padding: 1px 6px;
  background: var(--well);
  border-radius: 6px;
  font-size: 0.86em;
}

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

p {
  color: var(--ink-soft);
}

h1 {
  font-size: clamp(48px, 7.6vw, 112px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

h3 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* --- Bar ---------------------------------------------------------------------------- */
/* Over the top of the photograph, which is white there, so it needs no line of its own. */

.bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--bar);
  padding: 0 var(--side);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.015em;
  text-decoration: none;
}

.bar nav {
  display: flex;
  gap: 32px;
  font-size: 15px;
}

.bar nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.bar nav a:hover {
  color: var(--ink);
}

/* --- Pills, as in the playground ------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 26px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: var(--lift);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.pill:hover {
  background: var(--well);
}

.pill.primary {
  background: var(--filament);
  border-color: var(--filament-deep);
}

.pill.primary:hover {
  background: var(--filament-deep);
}

/* --- Hero: the photograph ------------------------------------------------------------------ */
/* It reaches up under the bar and fills the first screen. The render is as tall as the
   section and its backdrop only changes top to bottom, so where it ends nothing shows. */

.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(640px, 100svh, 1040px);
  margin-top: calc(-1 * var(--bar));
  padding: calc(var(--bar) + 40px) var(--side) 64px;
  display: flex;
  align-items: center;
  background: linear-gradient(var(--sweep-top), var(--sweep-bottom));
}

.pitch {
  position: relative;
  z-index: 1;
  width: min(100%, 640px);
  margin-left: max(0px, calc((100% - var(--measure)) / 2));
}

.lead {
  margin-top: 32px;
  max-width: 30em;
  font-size: 19px;
  line-height: 1.6;
  color: #59636e;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 44px;
}

code.install {
  display: inline-block;
  margin-top: 32px;
  padding: 0;
  background: none;
  font-size: 14.5px;
  color: var(--ink-soft);
}

code.install::before {
  content: '$ ';
  color: #a8b0b9;
}

.hero-shot {
  position: absolute;
  top: 0;
  bottom: 0;
  right: max(-4vw, calc((100% - var(--measure)) / 2 - 4vw));
  display: block;
}

.hero-shot img {
  display: block;
  height: 100%;
  width: auto;
}

/* --- Example: a box, with its numbers marked ------------------------------------------------ */

main > section:not(.hero) {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(96px, 14vw, 184px) var(--side) 0;
}

.example {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(40px, 8vw, 128px);
}

.example-text p {
  margin-top: 24px;
  max-width: 28em;
}

code.command {
  display: inline-block;
  margin-top: 32px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 15px;
  background: var(--ink);
  color: #fff;
}

code.command::before {
  content: '$ ';
  color: rgba(255, 255, 255, 0.45);
}

.code {
  margin: 0;
  padding: 40px 44px;
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  box-shadow: var(--panel-lift);
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
}

.k {
  font-weight: 600;
}

.s {
  color: #9a6a00;
}

/* The sizes are numbers: changing the box means changing one of these. */
.n {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--filament-wash);
  font-weight: 500;
}

/* --- Features: four notes in a row, held apart by space ---------------------------------------- */

.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 56px clamp(28px, 4vw, 56px);
}

.features p {
  margin-top: 14px;
  font-size: 16px;
}

.features a {
  color: var(--ink);
}

/* --- Skill: the download, then where to put it for each agent ------------------------------- */

.skill {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(40px, 8vw, 128px);
}

.skill-text p {
  margin-top: 24px;
  max-width: 28em;
}

.skill-steps {
  display: grid;
  gap: 40px;
}

.skill-steps p {
  margin-top: 10px;
  font-size: 16px;
}

.skill-steps code.command {
  margin-top: 16px;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 14px;
}

/* --- Gallery: renders large--------------------------------------------- */

.gallery > p {
  margin-top: 20px;
  max-width: 32em;
  font-size: 19px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 56px 32px;
  margin-top: 72px;
}

.grid a {
  display: block;
  text-decoration: none;
}

.grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  transition: box-shadow 0.2s ease;
}

.grid strong {
  display: block;
  margin: 18px 4px 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.grid span {
  display: block;
  margin: 4px 4px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.grid a:hover img {
  box-shadow: var(--lift);
}

/* --- Footer ------------------------------------------------------------------------------------ */

.foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--measure);
  margin: clamp(112px, 14vw, 184px) auto 0;
  padding: 32px var(--side) 56px;
  color: var(--ink-soft);
  font-size: 15px;
}

.foot a {
  text-decoration: none;
}

.foot a:hover {
  color: var(--ink);
}

@media (max-width: 1100px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Narrow screens: the words first on white, then the photograph as a band of its own. */
@media (max-width: 860px) {
  .hero {
    display: block;
    min-height: 0;
    padding: calc(var(--bar) + 32px) 0 0;
    background: #fff;
  }
  .pitch {
    width: auto;
    margin: 0;
    padding: 0 var(--side);
  }
  .hero-shot {
    position: static;
    margin-top: 48px;
    background: linear-gradient(var(--sweep-top), var(--sweep-bottom));
  }
  .hero-shot img {
    height: min(78svh, 640px);
    margin: 0 auto;
  }
  .example,
  .skill {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  :root {
    font-size: 16px;
    --bar: 64px;
  }
  .bar nav {
    gap: 16px;
    font-size: 14px;
  }
  /* Too narrow for all five: GitHub is in the hero, the examples and the skill are below. */
  .bar nav a[href*='github'],
  .bar nav a[href='#examples'],
  .bar nav a[href='#skill'] {
    display: none;
  }
  .features {
    grid-template-columns: 1fr;
  }
  .code {
    padding: 24px 20px;
    border-radius: 20px;
    font-size: 13px;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .foot {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grid img {
    transition: none;
  }
}