@font-face {
  font-family: "Gocake";
  src: url("../fonts/gocake.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

    :root {
      --bg: #0d0d0b;
      --panel: #151511;
      --panel-2: #1a1914;
      --fg: #f4f1e8;
      --muted: #aaa492;
      --line: #343126;
      --honey: #ffc107;
      --honey-soft: #e6ad00;
      --shadow: rgba(0,0,0,.36);
      --max: 1120px;
    }

    * { box-sizing: border-box; }

    html {
      background: var(--bg);
      color-scheme: dark;
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 50% -10%, rgba(255,193,7,.13), transparent 34rem),
        var(--bg);
      color: var(--fg);
      font: 15px/1.65 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    }

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

    a { color: inherit; }

    .shell {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 10;
      border-bottom: 1px solid rgba(255,255,255,.06);
      background: rgba(13,13,11,.82);
      backdrop-filter: blur(16px);
    }

    nav {
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .wordmark {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
    }

    .wordmark img {
      display: block;
      width: 40px;
      height: auto;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 20px;
      color: var(--muted);
      font-size: .86rem;
    }

    .nav-links a {
      text-decoration: none;
      transition: color .16s ease;
    }

    .nav-links a:hover { color: var(--fg); }

    .hero {
      position: relative;
      min-height: 680px;
      display: grid;
      align-items: center;
      padding: 92px 0 74px;
      overflow: hidden;
      isolation: isolate;
    }

    .hero-liquid {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      opacity: .72;
      pointer-events: none;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(13,13,11,.12), rgba(13,13,11,.20) 52%, rgba(13,13,11,.36)),
        linear-gradient(180deg, rgba(13,13,11,.10), rgba(13,13,11,.22));
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
      align-items: center;
      gap: 68px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 24px;
      color: var(--honey);
      font-size: .8rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 30px;
      height: 1px;
      background: var(--honey);
    }

    .eyebrow-mobile { display: none; }

    h1 {
      max-width: 780px;
      margin: 0;
      font-size: clamp(2.9rem, 7vw, 6.5rem);
      line-height: .94;
      letter-spacing: -.065em;
      font-weight: 800;
    }

    .hero-inner h1 {
      font-family: "Gocake", ui-monospace, monospace;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.1;
    }

    h1 em {
      color: var(--honey);
      font-style: normal;
    }

    .lede {
      max-width: 670px;
      margin: 28px 0 0;
      color: var(--muted);
      font-size: clamp(1rem, 1.7vw, 1.18rem);
    }

    .cta-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 32px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 17px;
      border: 1px solid var(--line);
      text-decoration: none;
      font-size: .86rem;
      font-weight: 700;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
      border-color: #6a6248;
    }

    .btn-primary {
      background: var(--honey);
      border-color: var(--honey);
      color: #171300;
    }

    .btn-primary:hover {
      background: #ffd13d;
      border-color: #ffd13d;
    }

    .hero-github-link {
      align-self: center;
      color: var(--fg);
      font-size: .86rem;
      text-decoration-color: var(--muted);
      text-underline-offset: 3px;
    }

    .hero-mark {
      position: relative;
      min-height: 390px;
      display: grid;
      place-items: center;
      padding: 0;
    }

    .hero-mark img {
      width: min(100%, 470px);
      height: auto;
      display: block;
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }


    section {
      padding: 90px 0;
      border-top: 1px solid var(--line);
    }

    .section-head {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr);
      gap: 36px;
      margin-bottom: 40px;
    }

    .section-kicker {
      color: var(--honey);
      font-size: .8rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      padding-top: 8px;
    }

    h2 {
      margin: 0;
      font-size: clamp(2rem, 4vw, 3.6rem);
      line-height: 1.02;
      letter-spacing: -.045em;
    }

    /* GoCake is the display face for major Jelly headings across all pages.
       Keep body text, card labels, and terminal/code content monospace. */
    h1, h2 {
      font-family: "Gocake", ui-monospace, monospace;
      font-weight: 400;
      letter-spacing: 0;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    .connection-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .card {
      min-height: 200px;
      padding: 26px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.012);
    }

    .card .index {
      color: var(--honey);
      font-size: .76rem;
      margin-bottom: 32px;
    }

    .section-copy {
      max-width: 760px;
      margin: -12px 0 38px 216px;
      color: var(--muted);
      font-size: .98rem;
    }

    .deployment-note {
      margin: 24px 0 0;
      max-width: 860px;
    }

    .deployment-note strong { color: var(--fg); }

    .demo-stage {
      width: min(100%, 1000px);
      margin-inline: auto;
      background: #080807;
      padding: 10px;
      box-shadow: 0 24px 70px var(--shadow);
    }

    .demo-stage video {
      display: block;
      width: 100%;
      height: auto;
      background: #000;
    }

    .card h3 {
      margin: 0 0 10px;
      font-size: 1.03rem;
    }

    .card p {
      margin: 0;
      color: var(--muted);
      font-size: .9rem;
    }

    .quickstart-stage {
      position: relative;
      --chan-peek: clamp(76px, 9vw, 110px);
    }

    .quickstart-chan {
      position: absolute;
      left: -80px;
      bottom: 0;
      z-index: 0;
      height: 108%;
      width: auto;
      max-width: 42%;
      object-fit: contain;
      object-position: left bottom;
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none;
    }

    .terminal {
      position: relative;
      z-index: 1;
      margin-left: var(--chan-peek, 0);
      border: 1px solid var(--line);
      background: #080807;
      box-shadow: 0 24px 70px var(--shadow);
      overflow: hidden;
    }

    .terminal-bar {
      height: 42px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 14px;
      border-bottom: 1px solid var(--line);
      color: #756f60;
      font-size: .76rem;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #49463e;
    }

    pre {
      margin: 0;
      padding: 26px;
      overflow-x: auto;
      color: #ded9ca;
      font: 13px/1.8 ui-monospace, "SFMono-Regular", Consolas, monospace;
    }

    pre .prompt { color: var(--honey); }
    pre .dim { color: #716d62; }

    .principle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }

    .principle > div {
      background: var(--panel);
      padding: 34px;
    }

    .principle strong {
      display: block;
      color: var(--honey);
      margin-bottom: 10px;
      font-size: .8rem;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .principle p {
      margin: 0;
      color: var(--muted);
    }

    footer {
      border-top: 1px solid var(--line);
      padding: 34px 0 46px;
      color: var(--muted);
      font-size: .8rem;
    }

    footer .shell {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }

    footer a {
      text-decoration: none;
      color: var(--fg);
    }

    ::selection {
      background: var(--honey);
      color: #171300;
    }

    @media (max-width: 860px) {
      .hero-inner { grid-template-columns: 1fr; gap: 20px; }
      .hero { min-height: auto; padding: 42px 0 62px; }
      .hero-mark { min-height: 0; padding: 0; }
      .hero-mark img { width: min(100%, 340px); }
      .eyebrow-desktop { display: none; }
      .eyebrow-mobile { display: inline; }
      .hero-inner .eyebrow { margin-bottom: 14px; letter-spacing: .04em; }
      .hero-inner h1 {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }
      .hero .hero-subtitle { margin: 0 0 10px; font-size: clamp(1.05rem, 2.8vw, 1.35rem); }
      .hero .lede { margin-top: 12px; }
      .hero .cta-row { margin-top: 24px; }
      .grid { grid-template-columns: 1fr; }
      .section-head { grid-template-columns: 1fr; gap: 10px; }
      .section-copy { margin-left: 0; }
      .principle { grid-template-columns: 1fr; }
    }

    @media (max-width: 620px) {
      .shell { width: min(100% - 24px, var(--max)); }
      nav { height: 60px; flex-wrap: nowrap; gap: 14px; }
      .wordmark { flex: 0 0 auto; }
      .wordmark img { width: 36px; }
      .nav-links {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        flex-wrap: nowrap;
        gap: 7px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        font-size: .77rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .nav-links::-webkit-scrollbar { display: none; }
      .nav-links a {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        min-height: 44px;
        white-space: nowrap;
      }
      .hero { padding: 28px 0 52px; }
      .hero-inner { gap: 14px; }
      .hero-mark img { width: min(100%, 290px); }
      .hero-inner .eyebrow { margin-bottom: 10px; font-size: .76rem; }
      .hero-inner .eyebrow::before { width: 22px; flex: 0 0 22px; }
      .hero .hero-subtitle { font-size: clamp(1.05rem, 4.5vw, 1.25rem); }
      .hero .lede { font-size: .95rem; line-height: 1.7; }
      .quickstart-stage { --chan-peek: 58px; }
      .quickstart-chan { height: 94%; max-width: 48%; }
      section { padding: 66px 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition: none !important; }
    }

/* Brand-consistent error page. */
.error-page { min-height: calc(100vh - 67px); display: flex; flex-direction: column; justify-content: center; padding-block: 80px; }
.error-page h1 { font-size: clamp(5rem, 20vw, 13rem); }

/* Documentation layout, keyboard navigation, and small-screen readability. */
.skip-link { position: fixed; z-index: 100; left: 12px; top: -120px; padding: 12px 16px; background: var(--honey); color: #171300; font-weight: 700; }
.skip-link:focus { top: 8px; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; }
html { scroll-padding-top: 86px; }
.site-note { color: var(--muted); font-size: .82rem; margin-top: 26px; max-width: 600px; }
.site-note a, .card a, .section-copy a, .doc-page a:not(.btn) { color: var(--honey); text-underline-offset: 3px; }
.card a:hover, .doc-page a:hover { text-decoration-thickness: 2px; }
.card code, .doc-page code, .section-copy code, .site-note code { font: inherit; color: #ffd34b; word-break: break-word; }
.doc-page { min-height: calc(100vh - 300px); padding-block: clamp(40px, 6vw, 90px); }
.doc-head { max-width: 850px; margin: 0 0 54px; }
.doc-head h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 1.13; margin: 18px 0; overflow-wrap: anywhere; }
.doc-page section { padding: 28px 0 34px; border-top: 1px solid var(--line); max-width: 1050px; }

/* Tools: a first-time reader's map before the developer API reference. */
.tool-guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 24px;
}
.tool-guide-links a { color: var(--honey); text-underline-offset: 4px; }
.tool-intro-grid .card { min-height: 0; }
.tool-intro-grid .card .index { margin-bottom: 14px; }
.tool-intro-grid .card p { line-height: 1.7; }
.example-choice-grid .card p + p { margin-top: 16px; }
.tool-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.tool-groups > div {
  border: 1px solid var(--line);
  padding: 22px 24px;
  min-width: 0;
}
.tool-groups h3 { margin: 0 0 12px; font-size: 1rem; }
.tool-groups ul { margin: 0; padding-left: 18px; }
.tool-groups li { color: var(--muted); margin: 7px 0; }
.tool-groups a, .tool-back-link a { color: var(--honey); text-underline-offset: 3px; }
.tool-back-link { margin-top: 24px; font-size: .86rem; }
.tool-advanced-details > summary {
  color: var(--honey);
  font-weight: 700;
  line-height: 1.6;
}
.tool-advanced-details[open] > summary { margin-bottom: 16px; }
.tool-record h2 code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0;
  font-weight: 700;
}
@media (max-width: 700px) {
  .tool-groups { grid-template-columns: 1fr; gap: 12px; }
  .tool-groups > div { padding: 18px; }
}

.doc-page section h2 { font-size: clamp(1.25rem, 2.3vw, 1.7rem); line-height: 1.34; margin: 0 0 18px; }
.doc-page p, .doc-page li, .doc-page dd { color: var(--fg); max-width: 920px; line-height: 1.75; }
.doc-page dt { color: var(--honey); font-weight: 700; margin-top: 10px; }
.doc-page dd { margin-inline-start: 0; margin-bottom: 10px; overflow-wrap: anywhere; }
.doc-page pre, .docs-terminal pre { padding: 18px 20px; overflow-x: auto; white-space: pre; tab-size: 2; background: #080807; border: 1px solid var(--line); color: #ece8dc; line-height: 1.65; font-size: .85rem; }
.doc-page pre code { color: inherit; }
.doc-page video { display: block; width: min(100%, 840px); height: auto; background: #000; margin: 22px auto; }

/* Beginner-friendly first message: readable on mobile and easy to copy. */
.startup-prompt { margin-top: 32px; }
.startup-prompt h3 { margin: 0 0 12px; font-size: 1.16rem; }
.startup-prompt-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 20px 0 12px;
}
.startup-prompt-actions button { cursor: pointer; font: inherit; }
#jelly-startup-copy-status { font-size: .86rem; color: var(--muted); }
.startup-prompt pre {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  line-height: 1.65;
}

.doc-page details { margin: 18px 0; padding: 14px 18px; border: 1px solid var(--line); background: var(--panel); }
.doc-page summary { cursor: pointer; color: var(--honey); }
.doc-page .tool-record { scroll-margin-top: 100px; }
.tool-fields { display: grid; grid-template-columns: minmax(120px, 165px) minmax(0, 1fr); column-gap: 18px; }
.tool-fields dt { grid-column: 1; }
.tool-fields dd { grid-column: 2; }
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 22px auto;
}
.table-wrap table {
  width: 100%;
  margin-inline: auto;
  border-collapse: collapse;
  min-width: 660px;
  text-align: left;
  font-size: .9rem;
}
.table-wrap th, .table-wrap td { padding: 14px; border: 1px solid var(--line); vertical-align: top; }
.table-wrap th { background: var(--panel-2); color: var(--honey); }
.table-wrap td { background: rgba(255,255,255,.01); }

/* Let the five-column API reference use desktop width instead of
   squeezing every column into the normal prose measure. Center the expanded
   panel on the viewport; retain accessible horizontal scrolling on mobile. */
#large-surface > .tool-advanced-details[open] {
  width: min(1440px, calc(100vw - 48px));
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
#large-surface .table-wrap { overscroll-behavior-inline: contain; }
#large-surface .table-wrap table {
  min-width: 1320px;
  table-layout: fixed;
}
#large-surface .table-wrap :is(th, td):nth-child(1) { width: 14%; }
#large-surface .table-wrap :is(th, td):nth-child(2) { width: 31%; }
#large-surface .table-wrap :is(th, td):nth-child(3) { width: 24%; }
#large-surface .table-wrap :is(th, td):nth-child(4) { width: 14%; }
#large-surface .table-wrap :is(th, td):nth-child(5) { width: 17%; }
#large-surface .table-wrap th { white-space: nowrap; }
#large-surface .table-wrap td { overflow-wrap: anywhere; }
#large-surface .table-wrap td:first-child code { white-space: nowrap; }
#large-surface .table-wrap td small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
}
#large-surface .table-wrap td small code { color: var(--honey); }
.table-scroll-note { color: var(--muted); font-size: .86rem; }
/* Reference sections are narrower than the document shell; center those
   containing wide tables or videos so the media itself sits on the page axis. */
.doc-page #large-surface,
.doc-page #generic,
.doc-page #video { margin-inline: auto; }
#how-it-works .card, #capabilities .card { min-width: 0; }
.docs-terminal { margin: 22px 0; }
@media (max-width: 620px) {
  .doc-page { padding-block: 34px; }
  .doc-page section { padding: 26px 0; }
  .tool-fields { display: block; }
  .tool-fields dd { padding-left: 0; }
  .doc-page pre, .docs-terminal pre { font-size: .76rem; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-liquid { display: none; }
}

/* Product subtitle follows the official Jelly naming convention. */
.hero-subtitle {
  font-family: "Gocake", ui-monospace, monospace;
  font-weight: 400;
  letter-spacing: 0;
  margin: 22px 0 12px;
  color: var(--honey);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.5;
}

/* Original quickstart illustration, retained beside the installer terminal. */
.quickstart-note {
  margin-top: 28px;
  margin-bottom: 0;
}

.demo-caption {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}
.demo-caption strong { color: var(--fg); }

/* Customer introduction: generous spacing, consistent with existing editorial sections. */
.possibilities-copy {
  max-width: 760px;
  margin-left: 216px;
}
.possibilities-copy p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.85;
  margin: 0 0 18px;
}
.possibilities-copy .possibilities-lead {
  color: var(--fg);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 28px;
}
@media (max-width: 860px) {
  .possibilities-copy { margin-left: 0; }
}

/* Practical use cases, distinct from the technical capability grid. */
.possibilities-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.possibility {
  padding: 26px 28px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.012);
}
.possibility .index {
  color: var(--honey);
  font-size: .76rem;
  letter-spacing: .04em;
  margin-bottom: 16px;
}
.possibility h3 { margin: 0 0 10px; font-size: 1.08rem; }
.possibility p { margin: 0; color: var(--muted); font-size: .9rem; }
@media (max-width: 860px) {
  .possibilities-grid { grid-template-columns: 1fr; }
}