:root {
  color-scheme:light;
  --paper:#FFFFFF;
  --ink:#3F3080;
  --muted:#655BA7;
  --accent:#E24F36;
  --teal:#4495AA;
  --mint:#A7D7B1;
  --yellow:#FBF4A5
}
@font-face {
  font-family:"Nimble Head";
  src:url(fonts/OpenSans-CondensedBold.ttf) format("truetype");
  font-weight:700;
  font-display:swap
}
@font-face {
  font-family:"Nimble Body";
  src:url(fonts/OpenSans-SemiCondensed.ttf) format("truetype");
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:"Nimble Body";
  src:url(fonts/OpenSans-SemiCondensedSemiBold.ttf) format("truetype");
  font-weight:600 800;
  font-display:swap
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:17px/1.6 "Nimble Body",system-ui,sans-serif
}
a {
  color:inherit;
  text-underline-offset:4px
}
header,main,footer {
  max-width:1240px;
  margin:auto;
  padding:0 32px
}
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:76px;
  border-bottom:3px solid var(--teal)
}
nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:14px
}
nav a,.wordmark {
  text-decoration:none
}
nav .github {
  display:inline-flex;
  align-items:center;
  gap:6px
}
.wordmark {
  font:700 46px/1 "Nimble Head",system-ui,sans-serif;
  letter-spacing:0;
  color:var(--accent)
}
.wordmark span {
  color:var(--ink);
  padding-left:8px
}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 0 12px;
  gap:24px
}
.eyebrow {
  font:11px ui-monospace,monospace;
  letter-spacing:2px;
  color:var(--accent);
  font-weight:700
}
h1 {
  font-family:"Nimble Head",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.1;
  letter-spacing:0;
  margin:4px 0 6px
}
h1 code {
  font:600 .92em ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  letter-spacing:0;
  color:var(--ink);
  background:var(--mint);
  border-radius:6px;
  padding:0 .3em .05em
}
.lede {
  color:var(--muted);
  margin:0
}
.command {
  border:1px solid #655BA7;
  border-radius:6px;
  padding:10px 16px;
  white-space:nowrap;
  background:#3F3080;
  color:#fff;
  box-shadow:0 5px 16px #3F308020
}
.demo {
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 20px 55px #3F308033;
  background:#1e1e1e;
  border:1px solid #655BA7
}
.toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#3F3080;
  padding:10px;
  gap:10px
}
.tabs {
  display:flex;
  gap:4px;
  flex-wrap:wrap
}
button {
  font:13px ui-monospace,monospace;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#fff;
  padding:9px 12px;
  cursor:pointer
}
button:hover {
  background:#655BA7;
  color:white
}
button[aria-pressed=true] {
  background:#FBF4A5;
  color:#3F3080
}
button:focus-visible,a:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px
}
iframe {
  display:block;
  width:100%;
  height:560px;
  border:0;
  background:#1e1e1e
}
.keys {
  border-top:1px solid #655BA7;
  padding:12px 18px;
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  color:var(--mint);
  font:12px ui-monospace,monospace
}
kbd {
  color:#FBF4A5
}
.notes {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  font-size:12px;
  color:var(--muted);
  padding:12px 2px
}
.notes a {
  white-space:nowrap
}
footer {
  border-top:1px solid var(--mint);
  padding-top:22px;
  padding-bottom:28px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted)
}
@media(max-width:760px) {
  header,main,footer {
    padding-left:16px;
    padding-right:16px
  }
  header {
    height:64px
  }
  .wordmark {
    font-size:38px
  }
  /* The wordmark leads, so on a phone the nav keeps its two main links. */
  nav {
    gap:16px
  }
  nav .github,
  nav a:last-child {
    display:none
  }
  .intro {
    display:block;
    padding-top:12px
  }
  .command {
    display:inline-block;
    margin-top:10px
  }
  h1 {
    letter-spacing:0
  }
  .toolbar {
    align-items:flex-start
  }
  button {
    padding:8px
  }
  .notes,footer {
    display:block
  }
  .keys {
    gap:12px
  }
  iframe {
    height:500px
  }
  footer span {
    display:block
  }
  .lede br {
    display:none
  }
}
#restart {
  white-space:nowrap;
  flex-shrink:0
}
.lede em {
  font-size: 20px;
  color: var(--ink);
}
.command .prompt {
  color: #FBF4A5;
}
.cursor {
  display: inline-block;
  width: .55em;
  height: 1em;
  margin-left: .6em;
  vertical-align: -.15em;
  background: #FBF4A5;
}
@media (prefers-reduced-motion: no-preference) {
  .cursor {
    animation: cursor-blink 1.2s step-end 3;
  }
  .demo {
    transition: box-shadow 180ms ease, border-color 180ms ease;
  }
  @media (hover: hover) {
    .demo:hover {
      border-color: var(--teal);
      box-shadow: 0 24px 65px #3F30804d;
    }
  }
}
@keyframes cursor-blink {
  50% {
    opacity: 0;
  }
}

/* The story after the demo: what gloss opens, and the two ways to have it. */
.formats dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:0}
.formats dt{font-weight:700;color:var(--accent);margin-bottom:.25rem}
.formats dd{margin:0;color:inherit}
.install,.launch,.formats,.agents{margin:2.5rem 0}
.install .channels,.agents .channels{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem;align-items:flex-start}
.install .channels > div > span,.agents .channels > div > span{display:block;font:11px ui-monospace,monospace;letter-spacing:1px;color:var(--muted);margin-bottom:.3rem}
.install .channels .command,.agents .channels .command{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}
.examples{margin:2.5rem 0}
.examples p{color:var(--muted)}
.examples ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem 2rem}
.examples li{display:flex;flex-direction:column;gap:.5rem}
.examples .command{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}
.examples li > span{font-size:13px;color:var(--muted)}
.button{display:inline-block;padding:.45rem 1rem;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;white-space:nowrap}
.button:hover{background:var(--muted)}
.launch .button{margin-top:.75rem;padding:.6rem 1.2rem}

footer .credit {
  text-align:right
}
.policy {
  max-width:720px;
  padding-top:24px;
  padding-bottom:40px
}
.policy h2 {
  font-family:"Nimble Head",system-ui,sans-serif;
  font-size:22px;
  margin:28px 0 4px
}
.policy .updated {
  color:var(--muted);
  font-size:13px;
  margin-top:0
}
@media(max-width:760px) {
  footer .credit {
    text-align:left;
    margin-top:12px
  }
}