@font-face {
  font-family:Inter;
  src:url('/assets/Inter.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap
}
:root {
  --ink:#101411;
  --paper:#F2F6E9;
  --lime:#D8F56B;
  --navy:#081433;
  --muted:color-mix(in srgb,var(--paper) 65%,transparent);
  --line:color-mix(in srgb,var(--paper) 19%,transparent);
  --surface:color-mix(in srgb,var(--paper) 3%,var(--ink));
  --radius:1rem;
  color-scheme:dark;
  font-family:Inter,system-ui,sans-serif;
  background:var(--ink);
  color:var(--paper);
  scroll-behavior:smooth
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,select,textarea {
  font:inherit
}
a {
  color:inherit;
  text-underline-offset:.3em
}
button,a,input,select,textarea,summary {
  touch-action:manipulation
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button,.button,.skip,.file-input::file-selector-button {
  background:transparent
}
button:disabled {
  opacity:.45;
  cursor:default
}
button,input,select,textarea {
  color:inherit
}
img,svg {
  display:block;
  max-width:100%
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid var(--lime);
  outline-offset:5px
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2 {
  letter-spacing:-.045em;
  line-height:1.04;
  text-wrap:balance
}
p {
  line-height:1.6
}
main {
  overflow:clip
}
.wrap {
  width:min(100% - 3rem,78rem);
  margin-inline:auto
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding-block:1.7rem
}
.site-header .brand img {
  width:8rem;
  height:auto
}
.site-header nav {
  display:flex;
  align-items:center;
  gap:1.8rem;
  font-size:.85rem
}
.site-header nav a {
  text-decoration:none;
  min-height:44px;
  display:flex;
  align-items:center
}
.parent {
  display:flex;
  gap:.65rem;
  align-items:center;
  color:var(--muted);
  font-size:.75rem
}
.parent img {
  width:7rem;
  height:auto
}
.parent-link {
  text-decoration:none;
  min-height:44px
}
.site-header .brand {
  min-height:44px;
  display:flex;
  align-items:center
}
.site-header .parent {
  margin-right:auto
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:1.2rem;
  min-height:48px;
  padding:.85rem 1.35rem;
  border:1px solid var(--lime);
  color:var(--lime);
  font-weight:600;
  text-decoration:none;
  border-radius:3rem
}
.button.secondary {
  color:var(--paper);
  border-color:var(--muted)
}
button:not(:disabled):is(:hover,:focus-visible),.button:not(:disabled):is(:hover,:focus-visible),.file-input:is(:hover,:focus-visible)::file-selector-button {
  color:var(--lime);
  border-color:var(--lime)
}
.button svg {
  width:1.2rem;
  height:1.2rem
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.7rem;
  font-weight:650;
  color:var(--lime);
  margin-bottom:1.5rem
}
.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:3.5rem;
  align-items:center;
  min-height:min(48rem,calc(100svh - 7rem));
  padding-block:4rem 6rem
}
.hero h1 {
  font-size:clamp(2.7rem,4.9vw,5.2rem);
  white-space:pre-line;
  margin-bottom:1.5rem
}
.lead {
  max-width:39ch;
  color:var(--muted);
  font-size:clamp(1rem,1.4vw,1.12rem)
}
.hero .button {
  margin-top:1rem
}
.subline {
  font-size:.7rem;
  color:var(--muted);
  margin:1rem 0 0
}
.signal {
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1;
  width:100%;
  max-width:34rem;
  justify-self:end
}
.signal:before,.signal:after {
  content:'';
  position:absolute;
  border:1px solid var(--line);
  border-radius:50%;
  inset:7%;
  pointer-events:none
}
.signal:after {
  inset:20%;
  border-style:dashed;
  animation:orbit 70s linear infinite
}
.signal svg.orbit {
  position:absolute;
  width:100%;
  inset:0
}
.signal .flow {
  fill:none;
  stroke:var(--lime);
  stroke-width:1.2;
  stroke-dasharray:7 25;
  animation:signal 5s linear infinite
}
.signal-core {
  width:44%;
  background:var(--ink);
  padding:1.5rem .5rem;
  text-align:center;
  z-index:1
}
.signal-core img {
  width:100%;
  margin-bottom:1rem
}
.signal-core p {
  font-size:.8rem;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:0;
  min-height:4.5em
}
.orbit-word {
  position:absolute;
  background:var(--ink);
  font-size:.75rem;
  color:var(--muted);
  padding:.4rem
}
.orbit-word.top {
  top:2%;
  left:50%;
  transform:translateX(-50%)
}
.orbit-word.right {
  right:-1%;
  top:49%
}
.orbit-word.bottom {
  bottom:2%;
  left:50%;
  transform:translateX(-50%)
}
.orbit-word.left {
  left:-1%;
  top:49%
}
.kind-picker {
  display:flex;
  gap:.35rem;
  justify-content:center;
  flex-wrap:wrap;
  grid-column:1/-1;
  margin-top:1rem
}
.kind-picker button {
  border:1px solid var(--muted);
  color:var(--muted);
  border-radius:3rem;
  padding:.65rem 1rem;
  min-height:44px;
  font-size:.8rem
}
.kind-picker button[aria-pressed=true] {
  border-color:var(--lime);
  color:var(--lime);
  font-weight:650
}
.motion-control {
  position:absolute;
  bottom:-.4rem;
  right:0;
  border:0;
  color:var(--muted);
  min-height:44px;
  min-width:44px;
  font-size:1rem
}
.signal[data-paused=true]:after,.signal[data-paused=true] .flow {
  animation-play-state:paused
}
.section {
  padding-block:5rem;
  border-top:1px solid var(--line)
}
.section h2 {
  font-size:clamp(2rem,4vw,3.7rem);
  max-width:22ch;
  margin-bottom:3rem
}
.step-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem 3rem;
  list-style:none;
  padding:0;
  margin:0
}
.step-grid li {
  display:grid;
  grid-template-columns:2.2rem 1fr;
  column-gap:1rem
}
.step-grid svg {
  width:1.7rem;
  height:1.7rem;
  color:var(--lime)
}
.step-grid h3 {
  font-size:1rem;
  margin-bottom:.45rem
}
.step-grid p {
  color:var(--muted);
  font-size:.85rem;
  margin:0;
  max-width:28ch
}
.integrations {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2.5rem
}
.integration {
  border-top:1px solid var(--line);
  padding-top:1.5rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.integration h3 {
  font-size:1.25rem;
  margin-bottom:.5rem
}
.integration .entry {
  font-size:.8rem;
  color:var(--lime)
}
.integration p {
  font-size:.9rem;
  color:var(--muted)
}
.integration .state {
  font-size:.75rem;
  line-height:1.6;
  min-height:3.2em
}
.integration a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  gap:.7rem;
  font-size:.8rem
}
.integration a svg {
  width:1rem;
  height:1rem
}
.integration-lead {
  max-width:55ch;
  color:var(--muted);
  margin-bottom:2rem
}
.integration-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  margin-top:auto
}
.integration-actions a {
  min-width:48px;
  text-decoration:none
}
.integration-art {
  width:100%;
  display:flex;
  justify-content:center;
  margin-bottom:1.25rem;
  border:1px solid var(--line);
  border-radius:var(--radius)
}
.integration-art .setup-artwork {
  width:11rem;
  max-width:100%;
  height:auto
}
.integration-copy {
  min-width:0;
  margin-bottom:1rem
}
.integration-copy .state {
  margin-bottom:0
}
.integration-guide-link {
  font-weight:600
}
.all-integrations {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  gap:.7rem;
  margin-top:2rem;
  font-size:.85rem
}
.all-integrations svg {
  width:1rem;
  height:1rem
}
.feature-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem
}
.feature-layout h2 {
  margin-bottom:1.5rem
}
.feature-layout ul {
  list-style:none;
  padding:0;
  margin:0
}
.feature-layout li {
  padding:1rem 0;
  border-bottom:1px solid var(--line);
  font-size:.95rem;
  display:flex;
  align-items:center;
  gap:1rem
}
.feature-layout li svg {
  width:1.25rem;
  height:1.25rem;
  color:var(--lime);
  flex-shrink:0
}
.boundary {
  color:var(--muted);
  font-size:.8rem;
  max-width:60ch
}
.site-footer {
  padding-block:2rem;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  color:var(--muted);
  font-size:.75rem
}
.site-footer details {
  max-width:36rem
}
.site-footer summary {
  min-height:44px;
  display:flex;
  align-items:center;
  cursor:pointer
}
.site-footer details p {
  font-size:.8rem
}
.footer-credit p {
  margin-bottom:0
}
.studio-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  text-decoration:none
}
.studio-link:hover {
  color:var(--paper)
}
.guide-icon {
  width:1.25rem;
  height:1.25rem;
  flex-shrink:0
}
.setup-artwork {
  display:block;
  width:100%;
  height:auto;
  color:var(--paper)
}
.artwork-surface { fill:var(--surface) }
.artwork-line { fill:var(--line) }
.artwork-accent { fill:var(--lime) }
.artwork-paper { fill:var(--paper) }
.site-header .brand {
  display:flex;
  align-items:center;
  min-height:44px
}
.site-header nav a,.site-footer summary {
  min-width:44px
}
.guide-hero {
  padding-block:1.5rem 1.75rem
}
.guide-hero h1 {
  font-size:clamp(2rem,4vw,3.2rem);
  margin-bottom:.65rem
}
.guide-hero .lead {
  max-width:52ch;
  font-size:1rem;
  margin-bottom:0
}
.guide-back {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:44px;
  font-size:.8rem;
  color:var(--muted);
  margin-bottom:1.25rem
}
.guide-back>.guide-icon {
  transform:rotate(180deg);
  width:1rem
}
.guide-title-row {
  display:flex;
  align-items:center;
  gap:1rem
}
.guide-title-row>div {
  min-width:0
}
.guide-title-row h1 {
  overflow-wrap:anywhere
}
.guide-title-row .eyebrow {
  font-size:.65rem;
  margin-bottom:.5rem
}
.platform-mark {
  display:grid;
  place-items:center;
  width:4rem;
  height:4rem;
  flex-shrink:0;
  color:var(--lime);
  border:1px solid var(--line);
  border-radius:1rem
}
.platform-mark svg {
  width:2.3rem;
  height:2.3rem
}
.guide-availability {
  font-size:.75rem;
  color:var(--lime);
  margin-block:1rem 0
}
.guide-start {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(16rem,1fr);
  align-items:start;
  gap:2.25rem
}
.setup-visual {
  min-width:0
}
.setup-path {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem
}
.setup-path li {
  min-width:0
}
.setup-image {
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.35rem
}
.step-order {
  position:absolute;
  top:.5rem;
  left:.6rem;
  color:var(--lime);
  font-size:.65rem;
  font-variant-numeric:tabular-nums
}
.guide-page .setup-path h3 {
  font-size:.8rem;
  margin-block:.8rem .35rem;
  line-height:1.5
}
.setup-path p {
  font-size:.75rem;
  color:var(--muted);
  line-height:1.65;
  margin:0
}
.guide-facts {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.25rem;
  list-style:none;
  padding:0;
  margin:1.2rem 0 0
}
.guide-facts li {
  display:flex;
  align-items:center;
  gap:.4rem;
  color:var(--muted);
  font-size:.7rem;
  line-height:1.5
}
.guide-facts .guide-icon {
  width:1rem;
  height:1rem;
  color:var(--lime)
}
.guide-prompt {
  min-width:0;
  padding:1.25rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  scroll-margin-top:1rem
}
.prompt-heading {
  display:flex;
  gap:.75rem;
  align-items:flex-start
}
.prompt-heading>.guide-icon {
  color:var(--lime);
  margin-top:.1rem
}
.guide-prompt h2 {
  font-size:1.1rem;
  margin-bottom:.5rem
}
.guide-prompt p {
  font-size:.8rem;
  color:var(--muted);
  margin-bottom:0
}
.guide-prompt .code-actions {
  margin-block:1rem .6rem
}
.guide-toolbar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:1.5rem
}
.guide-actions,.guide-jumps {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem
}
.guide-actions .button {
  min-height:48px;
  padding:.7rem 1rem;
  font-size:.8rem;
  gap:.5rem
}
.guide-jumps a {
  display:flex;
  align-items:center;
  gap:.4rem;
  min-width:44px;
  min-height:44px;
  padding-inline:.5rem;
  color:var(--muted);
  font-size:.75rem;
  text-decoration:none
}
.guide-jumps a:hover {
  color:var(--lime)
}
.guide-choice {
  padding-bottom:4rem
}
.guide-choice h2 {
  font-size:1.25rem;
  margin-bottom:1.5rem
}
.guide-overview {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}
.guide-page h2 {
  letter-spacing:-.025em;
  line-height:1.35;
  scroll-margin-top:1rem
}
.guide-section>h2 {
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:1.2rem;
  margin-bottom:1rem
}
.guide-page h3 {
  font-size:1rem;
  line-height:1.5
}
.guide-page p,.guide-page li,.guide-page summary {
  overflow-wrap:anywhere
}
.guide-content {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  align-items:start;
  gap:2.25rem;
  padding-top:2.5rem
}
.guide-instructions,.guide-reference {
  min-width:0
}
.guide-section {
  padding-bottom:2.5rem
}
.guide-disclosure,.install-step,.prompt-details {
  min-width:0;
  border:1px solid var(--line);
  border-radius:.75rem
}
.guide-disclosure>summary,.install-step>summary,.prompt-details>summary {
  display:flex;
  align-items:center;
  gap:.65rem;
  min-height:52px;
  padding:.75rem 1rem;
  list-style:none;
  cursor:pointer;
  font-size:.85rem;
  line-height:1.5
}
.guide-disclosure>summary::-webkit-details-marker,.install-step>summary::-webkit-details-marker,.prompt-details>summary::-webkit-details-marker {
  display:none
}
.guide-disclosure>summary:hover,.install-step>summary:hover,.prompt-details>summary:hover {
  color:var(--lime)
}
.summary-chevron {
  display:inline-flex;
  margin-left:auto;
  flex-shrink:0
}
.summary-chevron .guide-icon {
  width:1rem;
  height:1rem
}
.guide-disclosure[open]>summary>.summary-chevron,.install-step[open]>summary>.summary-chevron,.prompt-details[open]>summary>.summary-chevron {
  transform:rotate(180deg)
}
.guide-reference .guide-disclosure,.guide-troubleshooting .guide-disclosure {
  margin-bottom:.75rem
}
.disclosure-body,.step-body {
  padding:.25rem 1rem 1rem;
  font-size:.85rem;
  line-height:1.75;
  color:var(--muted)
}
.disclosure-body p,.step-body p {
  margin-bottom:0
}
.disclosure-body ul {
  padding-left:1.1rem;
  margin:0
}
.disclosure-body li {
  margin-bottom:.6rem
}
.disclosure-body li:last-child {
  margin-bottom:0
}
.disclosure-body li::marker {
  color:var(--lime)
}
.install-steps {
  list-style:none;
  padding:0;
  margin:0
}
.install-steps>li {
  padding:0;
  margin-bottom:.65rem
}
.manual-number {
  font-size:.7rem;
  color:var(--lime);
  min-width:1rem;
  font-variant-numeric:tabular-nums
}
.guide-code {
  min-width:0;
  max-width:100%
}
.guide-code pre {
  padding:1rem;
  border:1px solid var(--line);
  border-radius:.5rem;
  background:var(--surface);
  font-size:.8rem;
  line-height:1.7;
  color:var(--paper);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  tab-size:2;
  margin:0
}
.guide-code pre:focus {
  outline:2px solid var(--lime);
  outline-offset:3px
}
.step-body .guide-code {
  margin-top:1rem
}
.code-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem .75rem;
  margin-top:.6rem
}
.copy-code {
  display:inline-grid;
  place-items:center;
  min-height:48px;
  min-width:48px;
  padding:.65rem
}
.guide-prompt .copy-code {
  color:var(--lime);
  border-color:var(--lime)
}
.copied-glyph,.copy-code[data-copy-state=copied] .copy-glyph {
  display:none
}
.copy-code[data-copy-state=copied] .copied-glyph {
  display:block
}
.copy-feedback {
  font-size:.75rem;
  color:var(--lime)
}
.prompt-details>summary {
  padding:.6rem;
  min-height:44px;
  font-size:.75rem
}
.prompt-details .guide-icon {
  width:1rem;
  height:1rem
}
.prompt-details pre {
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  font-size:.8rem
}
.guide-resources {
  list-style:none;
  padding:0!important
}
.guide-resources a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  min-height:44px
}
.guide-resources a .guide-icon {
  width:1rem;
  height:1rem
}
.skip {
  position:fixed;
  top:1rem;
  left:1rem;
  border:1px solid var(--lime);
  color:var(--lime);
  z-index:10;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.skip:focus {
  position:relative;
  display:inline-flex;
  top:0;
  left:0;
  width:auto;
  height:auto;
  clip-path:none;
  margin:1rem;
  padding:1rem
}
.workspace-header {
  padding-block:2.5rem 2rem;
  border-bottom:1px solid var(--line)
}
.workspace-header h1 {
  font-size:clamp(2rem,4vw,3.5rem);
  margin-bottom:1rem
}
.workspace-header .lead {
  max-width:none
}
.status {
  min-height:1.6em;
  color:var(--lime);
  font-size:.85rem;
  overflow-wrap:anywhere
}
.status[data-error=true] {
  color:var(--paper);
  border-left:3px solid var(--lime);
  padding-left:1rem
}
.workspace-grid {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:4rem;
  padding-block:2.5rem
}
.workspace-grid h2,.work-settings h2,.metrics h2 {
  font-size:1.25rem;
  letter-spacing:-.02em
}
.field-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}
.field {
  display:flex;
  flex-direction:column;
  gap:.5rem;
  font-size:.75rem;
  margin-bottom:1rem
}
.field.wide {
  grid-column:1/-1
}
.field input,.field select,.field textarea,.editor textarea {
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:.5rem;
  padding:.85rem;
  min-height:46px;
  resize:vertical;
  font-size:.9rem
}
.field textarea {
  min-height:6rem
}
.workspace-grid .button {
  font-size:.8rem;
  width:100%
}
.panel {
  min-width:0
}
.note {
  font-size:.75rem;
  color:var(--muted);
  line-height:1.7
}
.draft-tabs {
  display:flex;
  gap:1rem;
  border-bottom:1px solid var(--line);
  margin-top:1.5rem
}
.draft-tabs button {
  border:0;
  color:var(--muted);
  min-height:44px;
  padding:.6rem .3rem;
  font-size:.8rem;
  border-bottom:2px solid transparent
}
.draft-tabs button[aria-selected=true] {
  color:var(--lime);
  border-bottom-color:var(--lime)
}
.editor {
  margin-block:1.2rem
}
.editor textarea {
  min-height:14rem;
  line-height:1.6
}
.editor .subject textarea {
  min-height:3.5rem
}
.actions {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap
}
.actions .button {
  width:auto;
  font-size:.75rem
}
.badge {
  font-size:.65rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--lime)
}
.empty {
  padding:3rem 0;
  color:var(--muted);
  font-size:1.1rem;
  max-width:28ch
}
.metrics {
  padding-block:2.5rem;
  border-top:1px solid var(--line)
}
.metrics dl {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  margin:1.5rem 0
}
.metrics dt {
  color:var(--muted);
  font-size:.75rem
}
.metrics dd {
  margin:.6rem 0 0;
  font-size:2rem;
  letter-spacing:-.04em
}
.work-settings {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  padding-block:2.5rem;
  border-top:1px solid var(--line)
}
.work-settings .field-grid {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.work-settings .button {
  font-size:.75rem
}
.file-input {
  max-width:100%;
  font-size:.8rem
}
.file-input::file-selector-button {
  border:1px solid var(--muted);
  border-radius:3rem;
  color:var(--paper);
  font:inherit;
  cursor:pointer;
  min-height:44px;
  padding:.6rem 1rem;
  margin-right:.8rem
}
input[readonly] {
  opacity:.8
}
[hidden] {
  display:none!important
}
@keyframes orbit {
  to {
    transform:rotate(360deg)
  }
}
@keyframes signal {
  to {
    stroke-dashoffset:-128
  }
}
@media(min-width:60rem) {
  .hero-copy {
    animation:entrance .6s ease-out
  }
  .signal-core {
    animation:entrance .8s ease-out
  }
}
@keyframes entrance {
  from {
    opacity:0;
    transform:translateY(12px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(max-width:60rem) {
  .site-header {
    gap:1.2rem
  }
  .site-header nav {
    gap:1rem
  }
  .site-header .parent {
    margin-right:0
  }
  .parent span {
    display:none
  }
  .hero {
    gap:1.5rem;
    padding-block:3rem;
    min-height:auto
  }
  .hero h1 {
    font-size:clamp(2.5rem,5vw,3.8rem)
  }
  .workspace-grid,.work-settings {
    gap:2rem
  }
}
@media(max-width:42rem) {
  .wrap {
    width:calc(100% - 2rem)
  }
  .site-header {
    padding-block:1rem;
    flex-wrap:wrap;
    gap:.7rem
  }
  .site-header .brand img {
    width:6rem
  }
  .site-header .parent img {
    width:5.5rem
  }
  .site-header nav {
    margin-left:auto;
    font-size:.75rem
  }
  .site-header nav .desktop {
    display:none
  }
  .hero {
    grid-template-columns:1fr;
    gap:1.5rem;
    padding-block:3rem 2.5rem
  }
  .hero h1 {
    font-size:clamp(2.6rem,9.3vw,4rem)
  }
  .hero .lead {
    max-width:36ch
  }
  .signal {
    max-width:23rem;
    justify-self:center;
    width:90%
  }
  .kind-picker {
    margin-top:.75rem
  }
  .section {
    padding-block:3rem
  }
  .section h2 {
    margin-bottom:2rem
  }
  .step-grid {
    grid-template-columns:1fr 1fr;
    gap:1.8rem 1rem
  }
  .step-grid li {
    grid-template-columns:1.5rem 1fr;
    column-gap:.65rem
  }
  .step-grid svg {
    width:1.3rem
  }
  .step-grid p {
    font-size:.75rem
  }
  .integrations {
    grid-template-columns:1fr;
    gap:2rem
  }
  .integration-visual {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:1rem;
    align-items:flex-start
  }
  .integration-visual .integration-art {
    flex:0 1 6rem;
    max-width:100%;
    margin-bottom:0
  }
  .integration-visual .integration-copy {
    flex:1 1 min(12rem,100%);
    min-width:0;
    max-width:100%;
    margin-bottom:0
  }
  .integration-visual .integration-actions {
    flex:1 0 100%
  }
  .integration .state {
    min-height:0
  }
  .integration p {
    margin-bottom:.6rem
  }
  .feature-layout,.workspace-grid,.work-settings {
    grid-template-columns:1fr;
    gap:2rem
  }
  .feature-layout h2 {
    margin-bottom:0
  }
  .site-footer {
    align-items:start;
    flex-direction:column;
    gap:.5rem
  }
  .guide-hero {
    padding-block:1rem 1.5rem
  }
  .guide-hero h1 {
    font-size:clamp(1.8rem,7vw,2.6rem)
  }
  .guide-title-row {
    align-items:flex-start;
    gap:.75rem
  }
  .platform-mark {
    width:3rem;
    height:3rem;
    border-radius:.75rem
  }
  .platform-mark svg {
    width:1.8rem;
    height:1.8rem
  }
  .guide-start,.guide-overview,.guide-content {
    grid-template-columns:1fr;
    gap:1.25rem
  }
  .setup-path {
    gap:.5rem
  }
  .setup-image {
    border-radius:.65rem;
    padding:.15rem
  }
  .step-order {
    top:.25rem;
    left:.35rem
  }
  .guide-page .setup-path h3 {
    font-size:.72rem
  }
  .setup-path p {
    font-size:.7rem
  }
  .guide-facts {
    gap:.5rem 1rem
  }
  .guide-content {
    padding-top:2rem;
    gap:0
  }
  .guide-prompt {
    padding:1rem
  }
  .guide-toolbar {
    gap:.75rem
  }
  .guide-section {
    padding-bottom:2rem
  }
  .guide-code pre {
    padding:.8rem
  }
  .workspace-header {
    padding-top:2rem
  }
  .workspace-grid {
    padding-top:1.5rem
  }
  .field-grid {
    gap:.75rem
  }
  .metrics dl {
    grid-template-columns:1fr 1fr;
    row-gap:1.5rem
  }
  .work-settings .field-grid {
    gap:.65rem
  }
  .work-settings .field input {
    padding:.75rem .5rem
  }
  .draft-tabs {
    gap:.8rem
  }
  .draft-tabs button {
    font-size:.75rem
  }
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}