/* Keal site — design tokens from the handoff (assets/README.md). */
:root {
  --bg: #150D0D; --panel: #1F1615;
  --line: rgba(254,170,169,.12); --line2: rgba(254,170,169,.16);
  --ink: #F5E7E7; --dim: #B19797; --prose: #C4AAA9; --faint: #796262;
  --accent: #F98E8F; --accent-h: #FF9A9B; --mint: #FFC3C2;
  --kw: #F8A4A3; --ty: #FFC3C2; --str: #D9C98B; --code: #DECCCB;
  --display: 'Familjen Grotesk', Sora, sans-serif;
  --motif: repeating-linear-gradient(-45deg, rgba(249,142,143,.07) 0 1px, transparent 1px 16px);
  --motif-size: auto;
  /* The one green a child may use: the foot of the K on the button that says
     where this came from. Everything else on this page is coral. */
  --keal-mint: #35C8A8;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 15.5px/1.75 Sora, sans-serif; }
a { text-decoration: none; color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* ---- nav ---- */
.nav { display: flex; align-items: center; justify-content: space-between;
       padding: 16px 40px; border-bottom: 1px solid var(--line); }
.nav-left { display: flex; align-items: center; gap: 36px; }
.nav-logo { display: block; height: 36px; width: auto; }
.nav-links { display: flex; gap: 26px; font: 500 14px Sora, sans-serif; }
.nav-links a { color: var(--dim); }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); }
.nav-links a.tab-active { color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 4px; }
.nav-links .soon { color: var(--faint); cursor: default; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.lang { display: flex; border: 1px solid rgba(254,170,169,.2); border-radius: 99px;
        overflow: hidden; font: 600 11px Sora, sans-serif; }
.lang button { border: 0; background: none; padding: 5px 11px; color: var(--dim);
               font: inherit; cursor: pointer; }
.lang button.on { background: var(--accent); color: var(--bg); }
.badge { font: 500 12px 'JetBrains Mono', monospace; color: var(--dim);
         border: 1px solid rgba(254,170,169,.2); border-radius: 6px; padding: 5px 10px; }
.btn-gh { font: 600 13px Sora, sans-serif; color: var(--bg); background: var(--mint);
          border-radius: 8px; padding: 8px 16px; }
.btn-gh:hover { filter: brightness(1.06); }

/* ---- buttons ---- */
.cta { display: inline-block; font: 600 15px Sora, sans-serif; color: var(--bg);
       background: var(--accent); border-radius: 10px; padding: 13px 24px; }
.cta:hover { background: var(--accent-h); }
.cta-line { display: inline-block; font: 600 15px Sora, sans-serif; color: var(--ink);
            border: 1px solid rgba(254,170,169,.25); border-radius: 10px; padding: 13px 24px; }
.cta-line:hover { border-color: rgba(254,170,169,.45); }

/* ---- hero ---- */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
        padding: 72px 40px 64px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 8px;
        font: 600 12px 'JetBrains Mono', monospace; color: var(--mint);
        border: 1px solid rgba(255,195,194,.25); border-radius: 99px;
        padding: 6px 14px; margin-bottom: 26px; }
.pill .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--accent); }
.hero h1 { margin: 0 0 20px; font: 700 54px/1.12 Sora, sans-serif;
           letter-spacing: -.02em; text-wrap: pretty; }
.hero .sub { margin: 0 0 34px; font: 400 18px/1.65 Sora, sans-serif;
             color: var(--dim); max-width: 52ch; }
.ctas { display: flex; gap: 14px; align-items: center; margin-bottom: 26px; }
.cmd { display: inline-flex; align-items: center; gap: 12px;
       font: 500 13.5px 'JetBrains Mono', monospace; color: var(--mint);
       background: var(--panel); border: 1px solid rgba(254,170,169,.14);
       border-radius: 10px; padding: 12px 18px; cursor: pointer; }
.cmd .p { color: var(--faint); }
.cmd .cp { color: var(--faint); border-left: 1px solid rgba(254,170,169,.14); padding-left: 12px; }

/* ---- code windows ---- */
.win { background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; }
.win.shadow { box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.win-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.win-bar .b { width: 10px; height: 10px; border-radius: 99px; background: rgba(254,170,169,.18); }
.win-bar .t { margin-left: 10px; font: 500 12px 'JetBrains Mono', monospace; color: var(--dim); }
.win pre { margin: 0; padding: 22px 24px; font: 13.5px/1.75 'JetBrains Mono', monospace;
           color: var(--code); white-space: pre; overflow-x: auto; }
.win-foot { display: flex; align-items: center; gap: 10px; padding: 12px 24px;
            border-top: 1px solid var(--line); font: 500 13px 'JetBrains Mono', monospace; }
.k { color: var(--kw); } .t { color: var(--ty); } .s { color: var(--str); } .c { color: var(--faint); }
.out { color: var(--mint); }

/* ---- feature cards ---- */
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 0 40px 64px; }
/* `.cards` had no rule at all, so the three pages that use it — the landing
   page, the documentation index and "coming from" — laid their cards out as
   plain blocks, one full-width panel per row. `auto-fit` rather than a fixed
   count because those three hold five, ten and ten cards. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
         gap: 18px; padding: 0 40px 64px; }
/* Inside the documentation column there is 616px to work with, not the full
   band: three fixed columns leave 145px of text per card. */
.dmain .cards3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* A caption under a figure, not another paragraph of body text. `.cap` is
   used on the landing page too, so this stays scoped to the doc column. */
.dmain .cap { margin: 26px 0 4px; font: 500 12.5px 'JetBrains Mono', monospace;
              color: var(--dim); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.eyebrow { font: 600 12px 'JetBrains Mono', monospace; color: var(--accent);
           letter-spacing: .08em; margin-bottom: 12px; text-transform: uppercase; }
.card h3 { margin: 0 0 8px; font: 600 16px Sora, sans-serif; color: var(--ink); }
.card p { margin: 0; font: 400 13.5px/1.6 Sora, sans-serif; color: var(--dim); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 500 11.5px 'JetBrains Mono', monospace; color: var(--mint);
        border: 1px solid rgba(255,195,194,.2); border-radius: 6px; padding: 3px 8px; }
.card pre { margin: 0; font: 12.5px/1.7 'JetBrains Mono', monospace; color: var(--code); white-space: pre; }

/* ---- two-column sections ---- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 64px 40px;
       border-top: 1px solid var(--line); align-items: center; }
.duo h2 { margin: 0 0 18px; font: 700 34px/1.2 Sora, sans-serif; letter-spacing: -.015em; }
.duo p { margin: 0 0 22px; font: 400 15.5px/1.7 Sora, sans-serif; color: var(--dim); max-width: 50ch; }
.duo p:last-child { margin-bottom: 0; }
.ic { font-family: 'JetBrains Mono', monospace; color: var(--mint); }

/* ---- perf bars ---- */
.perf { background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; padding: 28px; }
.perf-rows { display: flex; flex-direction: column; gap: 12px; font: 500 13px 'JetBrains Mono', monospace; }
.perf-row { display: grid; grid-template-columns: 120px 1fr 56px; gap: 14px; align-items: center; color: var(--dim); }
.perf-row.hot { color: var(--mint); }
.bar { height: 7px; border-radius: 99px; background: rgba(254,170,169,.1); }
.bar > div { height: 100%; border-radius: 99px; background: rgba(254,170,169,.35); width: 0; transition: width .6s ease-out; }
.bar.mid > div { background: rgba(254,170,169,.55); }
.bar.hot > div { background: var(--accent); }
.perf-cap { margin-top: 16px; font: 400 12.5px Sora, sans-serif; color: var(--faint); }

/* ---- getting started ---- */
.gs { padding: 64px 40px; border-top: 1px solid var(--line); }
.gs-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; }
.gs-head h2 { margin: 0; font: 700 34px Sora, sans-serif; letter-spacing: -.015em; }
.gs-head a { font: 600 13.5px Sora, sans-serif; color: var(--accent); }
.cards3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.term { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.term .lbl { font: 600 12px 'JetBrains Mono', monospace; color: var(--faint); margin-bottom: 12px; }
.term pre { margin: 0; font: 12.5px/1.8 'JetBrains Mono', monospace; color: var(--code); white-space: pre; }

/* ---- footer ---- */
footer { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px;
         padding: 44px 40px 36px; border-top: 1px solid var(--line); }
footer .base { margin: 0 0 14px; font: 400 13px/1.6 Sora, sans-serif; color: var(--faint); max-width: 34ch; }
.fcol { display: flex; flex-direction: column; gap: 10px; font: 400 13.5px Sora, sans-serif; }
.fcol .h { font: 600 12px 'JetBrains Mono', monospace; color: var(--faint); letter-spacing: .08em; }
.fcol a { color: var(--dim); } .fcol a:hover { color: var(--ink); }

/* ---- tour ---- */
.tbar { display: flex; align-items: center; justify-content: space-between;
        padding: 13px 32px; border-bottom: 1px solid var(--line); }
.tbar-l { display: flex; align-items: center; gap: 16px; }
.tbar-l img { display: block; height: 30px; width: auto; }
.tbar-l .sl { color: #33504A; } .tbar-l .tt { font: 600 14px Sora, sans-serif; }
.tbar-r { display: flex; align-items: center; gap: 14px; }
.tbar-r .cnt { font: 500 12px 'JetBrains Mono', monospace; color: var(--dim); }
.prog { width: 180px; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.prog > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #F98E8F, #FFC3C2); }
.texit { font: 600 12px Sora, sans-serif; color: var(--dim);
         border: 1px solid rgba(254,170,169,.2); border-radius: 8px; padding: 6px 14px; }
.tgrid { display: grid; grid-template-columns: 264px 1fr; min-height: 680px; }
.tside { border-right: 1px solid var(--line); padding: 24px 0; }
.tside .lbl { font: 600 11px 'JetBrains Mono', monospace; color: var(--faint);
              letter-spacing: .1em; padding: 0 24px 12px; }
.tch { display: flex; align-items: center; gap: 12px; padding: 9px 24px; cursor: pointer; }
.tch .n { width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center;
          font: 500 11px Sora, sans-serif; border: 1px solid rgba(254,170,169,.25); color: var(--faint); flex: none; }
.tch .nm { font: 500 13.5px Sora, sans-serif; color: var(--dim); }
.tch.done .n { border: 0; background: rgba(249,142,143,.18); color: var(--accent); font-weight: 600; }
.tch.now { background: rgba(249,142,143,.1); border-left: 2px solid var(--accent); padding-left: 22px; }
.tch.now .n { border: 0; background: var(--accent); color: var(--bg); font-weight: 600; }
.tch.now .nm { font-weight: 600; color: var(--ink); }
.tnote { margin: 20px 24px 0; background: rgba(255,195,194,.05);
         border: 1px solid rgba(255,195,194,.14); border-radius: 10px; padding: 14px 16px; }
.tnote .h { font: 600 11px 'JetBrains Mono', monospace; color: var(--mint); margin-bottom: 6px; }
.tnote p { margin: 0; font: 400 12px/1.55 Sora, sans-serif; color: var(--faint); }
.tmain { padding: 44px 56px; max-width: 760px; }
.tmain .eyebrow { margin-bottom: 10px; }
.tmain h2 { margin: 0 0 18px; font: 700 32px Sora, sans-serif; letter-spacing: -.01em; }
.tmain p { margin: 0 0 26px; font: 400 15.5px/1.75 Sora, sans-serif; color: var(--prose); }
.cwin { background: var(--panel); border: 1px solid var(--line2); border-radius: 12px;
        overflow: hidden; margin-bottom: 20px; }
.cwin-bar { display: flex; align-items: center; justify-content: space-between;
            padding: 10px 18px; border-bottom: 1px solid var(--line); }
.cwin-bar .f { font: 500 12px 'JetBrains Mono', monospace; color: var(--dim); }
.run { font: 600 12px Sora, sans-serif; color: var(--bg); background: var(--mint);
       border: 0; border-radius: 6px; padding: 4px 12px; cursor: pointer; }
.cwin pre { margin: 0; padding: 20px 22px; font: 13.5px/1.8 'JetBrains Mono', monospace;
            color: var(--code); white-space: pre; overflow-x: auto; }
.cwin .cout { display: none; padding: 12px 22px; border-top: 1px solid var(--line);
              font: 500 13px 'JetBrains Mono', monospace; color: var(--mint); white-space: pre; }
.cwin.ran .cout { display: block; }
.callout { display: flex; gap: 14px; background: rgba(255,195,194,.06);
           border: 1px solid rgba(255,195,194,.18); border-radius: 12px;
           padding: 16px 20px; margin-bottom: 34px; }
.callout .st { font: 700 14px Sora, sans-serif; color: var(--mint); }
.callout p { margin: 0; font: 400 13.5px/1.65 Sora, sans-serif; color: var(--prose); }
.tnav { display: flex; justify-content: space-between; }
.tprev { font: 600 14px Sora, sans-serif; color: var(--dim);
         border: 1px solid rgba(254,170,169,.2); border-radius: 10px; padding: 11px 20px; }
.tnext { font: 600 14px Sora, sans-serif; color: var(--bg); background: var(--accent);
         border-radius: 10px; padding: 11px 20px; }
.tnext:hover { background: var(--accent-h); }

/* ---- docs ---- */
.dgrid { display: grid; grid-template-columns: 264px 1fr 200px; min-height: 680px; }
.dside { border-right: 1px solid var(--line); padding: 20px 0; }
.dside .grp { font: 600 11px 'JetBrains Mono', monospace; color: var(--faint);
              letter-spacing: .1em; padding: 20px 26px 10px; }
.dside .grp:first-child { padding-top: 4px; }
.dside a { display: block; padding: 7px 26px; font: 500 13.5px Sora, sans-serif; color: var(--dim); }
.dside a:hover { color: var(--ink); }
.dside a.on { color: var(--ink); background: rgba(249,142,143,.1);
              border-left: 2px solid var(--accent); padding-left: 24px; font-weight: 600; }
.dmain { padding: 40px 52px; max-width: 720px; }
.crumb { font: 500 12.5px 'JetBrains Mono', monospace; color: var(--faint); margin-bottom: 14px; }
.crumb .sl { color: #33504A; } .crumb .here { color: var(--mint); }
.dmain h1 { margin: 0 0 20px; font: 700 36px Sora, sans-serif; letter-spacing: -.015em; }
.dmain h2 { margin: 0 0 14px; font: 700 22px Sora, sans-serif; }
.dmain p { margin: 0 0 24px; font: 400 15.5px/1.75 Sora, sans-serif; color: var(--prose); }
.dmain strong { color: var(--ink); font-weight: 600; }
.dtable { border: 1px solid rgba(254,170,169,.14); border-radius: 12px; overflow: hidden;
          margin-bottom: 26px; font: 400 13.5px Sora, sans-serif; }
.dtable .hd { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 16px; padding: 11px 20px;
              background: rgba(249,142,143,.06); font: 600 11.5px 'JetBrains Mono', monospace; color: var(--faint); }
.dtable .row { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 16px; padding: 12px 20px;
               border-top: 1px solid rgba(254,170,169,.1); }
.dtoc { padding: 40px 28px 0 8px; }
.dtoc .h { font: 600 11px 'JetBrains Mono', monospace; color: var(--faint);
           letter-spacing: .1em; margin-bottom: 14px; }
.dtoc-items { display: flex; flex-direction: column; gap: 10px;
              font: 400 12.5px Sora, sans-serif; border-left: 1px solid rgba(254,170,169,.14); }
.dtoc-items a { color: var(--dim); padding-left: 14px; }
.dtoc-items a.on { color: var(--mint); border-left: 2px solid var(--accent); margin-left: -1.5px; }

@media (max-width: 900px) {
  .hero, .duo, .cards4, .cards3, .tgrid, .dgrid, footer { grid-template-columns: 1fr; display: grid; }
  .hero h1 { font-size: 38px; }
  .nav { flex-wrap: wrap; gap: 12px; }
  .dtoc { display: none; }
}

/* ---- generated pages ---------------------------------------------------
   The site is built by site/build.py; these are the pieces that generator
   emits which the hand-written prototype did not have. */

.btn-lang { font: 500 13px Sora, sans-serif; color: var(--dim); border: 1px solid var(--line2);
            border-radius: 8px; padding: 6px 12px; }
.btn-lang:hover { color: var(--ink); border-color: var(--accent); }

/* Long-form prose, shared by the docs, the tour and the coming-from pages. */
.prose { max-width: 780px; }
.prose h1 { font: 700 38px Sora, sans-serif; letter-spacing: -.015em; margin: 0 0 14px; }
.prose h2 { font: 600 24px Sora, sans-serif; margin: 44px 0 12px; padding-top: 8px;
            border-top: 1px solid var(--line); letter-spacing: -.01em; }
.prose h3 { font: 600 18px Sora, sans-serif; margin: 28px 0 8px; }
.prose h4, .prose h5, .prose h6 { font: 600 15px Sora, sans-serif; margin: 20px 0 6px; }
.prose p { margin: 12px 0; font: 400 15.5px/1.75 Sora, sans-serif; color: var(--prose); }
.prose ul, .prose ol { margin: 12px 0 12px 22px; }
.prose li { margin: 7px 0; font: 400 15.5px/1.7 Sora, sans-serif; color: var(--prose); }
.prose a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent); }
.prose code { font: 13.5px 'JetBrains Mono', monospace; color: var(--mint);
              background: rgba(249,142,143,.08); padding: 1px 5px; border-radius: 4px; }
.prose pre { background: var(--panel); border: 1px solid var(--line2); border-radius: 10px;
             padding: 16px 18px; overflow-x: auto; margin: 16px 0; }
.prose pre code { background: none; padding: 0; color: var(--code);
                  font: 13.5px/1.65 'JetBrains Mono', monospace; }
.prose blockquote { margin: 16px 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--accent);
                    color: var(--dim); font: 400 15px/1.7 Sora, sans-serif; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
.prose strong { color: var(--ink); font-weight: 600; }

.tablewrap { overflow-x: auto; margin: 18px 0; }
.tablewrap table { border-collapse: collapse; width: 100%; min-width: 460px; }
.tablewrap th { text-align: left; font: 600 11px 'JetBrains Mono', monospace; color: var(--faint);
                letter-spacing: .09em; text-transform: uppercase; padding: 8px 14px 8px 0;
                border-bottom: 1px solid var(--line2); }
.tablewrap td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line);
                font: 400 14px/1.6 Sora, sans-serif; color: var(--prose); vertical-align: top; }
.tablewrap td code { white-space: pre; }

/* The tour: a chapter list beside the chapters themselves. */
.tourgrid { display: grid; grid-template-columns: 264px 1fr; gap: 40px; padding: 30px 0 80px; }
.tournav { position: sticky; top: 20px; align-self: start; border-right: 1px solid var(--line);
           padding-right: 16px; }
.tournav .tch { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
                font: 500 13.5px Sora, sans-serif; color: var(--dim); }
.tournav .tch:hover { color: var(--ink); background: rgba(249,142,143,.06); }
.tournav .tch .n { width: 22px; height: 22px; border-radius: 6px; background: var(--panel);
                   border: 1px solid var(--line2); display: grid; place-items: center;
                   font: 600 11px 'JetBrains Mono', monospace; color: var(--faint); flex: none; }
.chapter { scroll-margin-top: 20px; }
.cwin-out { border-top: 1px solid var(--line2); background: rgba(0,0,0,.18); }
.cwin-out pre { margin: 0; padding: 12px 18px; color: var(--mint);
                font: 13px/1.6 'JetBrains Mono', monospace; }

/* The standard library page. */
.sgrid { display: grid; grid-template-columns: 264px 1fr; gap: 40px; padding: 24px 0 80px; }
.snav { position: sticky; top: 20px; align-self: start; max-height: 90vh; overflow-y: auto;
        border-right: 1px solid var(--line); padding-right: 12px; }
.snav .navmod { font: 600 11px 'JetBrains Mono', monospace; color: var(--faint);
                letter-spacing: .1em; text-transform: uppercase; padding: 12px 8px 6px; }
.snav a { display: block; padding: 4px 8px; font: 500 12.5px 'JetBrains Mono', monospace;
          color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snav a:hover { color: var(--ink); background: rgba(249,142,143,.06); }
.snav .k { display: inline-block; width: 50px; color: var(--faint); font-size: 11px; }
.smain pre.sig { font: 13.5px/1.6 'JetBrains Mono', monospace; color: var(--mint);
                 background: var(--panel); border: 1px solid var(--line2);
                 padding: 10px 16px; border-radius: 8px; overflow-x: auto; margin: 0 0 8px; }
.smain pre.sig.m { background: none; border: 0; border-left: 3px solid var(--line2);
                   border-radius: 0; padding: 2px 16px; margin: 10px 0 4px; color: var(--code); }
.smain .members { margin-left: 14px; }
.smain section { margin: 24px 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips span { font: 500 12.5px 'JetBrains Mono', monospace; color: var(--mint);
              border: 1px solid var(--line2); border-radius: 999px; padding: 5px 13px; }
.bars { margin: 20px 0 6px; display: grid; gap: 10px; max-width: 620px; }
.barrow { display: grid; grid-template-columns: 120px 1fr 60px; align-items: center; gap: 14px; }
.bl { font: 500 13px Sora, sans-serif; color: var(--dim); }
.bar { height: 10px; background: var(--panel); border: 1px solid var(--line2); border-radius: 999px;
       overflow: hidden; }
.bar > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--mint));
             transition: width .9s cubic-bezier(.2,.8,.2,1); }
.bv { font: 600 12.5px 'JetBrains Mono', monospace; color: var(--mint); text-align: right; }

a.card { text-decoration: none; }
a.card:hover { border-color: var(--accent); }

@media (max-width: 900px) {
  .tourgrid, .sgrid, .dgrid { grid-template-columns: 1fr; }
  .tournav, .snav, .dside, .dtoc { position: static; border-right: 0; max-height: none; }
}
.copy { margin-left: auto; font: 500 11px 'JetBrains Mono', monospace; color: var(--faint);
        cursor: pointer; user-select: none; }
.copy:hover { color: var(--mint); }
.cwin-bar { display: flex; align-items: center; gap: 10px; }
.run { font: 500 11px 'JetBrains Mono', monospace; color: var(--mint); border: 1px solid var(--line2);
       border-radius: 6px; padding: 2px 8px; }
.run:hover, .run.on { border-color: var(--accent); color: var(--accent); }
.dtoc-items a.on { color: var(--accent); }

/* ---------------------------------------------------------------- kealeb
 *
 * Everything above is Keal's, copied so the two sites read as one family.
 * Everything below is this site's own: the pages here are different pages,
 * and the rules they need did not exist there.
 */

/* The mark: the K as an image, the name as text. It was an image of its own
 * name; a name that is text can be selected, searched, read aloud, and falls
 * back to the reader's own font stack when Sora does not load. An image of a
 * word does none of those. */
.mark { display: flex; align-items: center; gap: 9px; }
.mark-k { display: block; width: 30px; height: 30px; object-fit: contain; }
.wordmark { font: 700 22px Sora, sans-serif; letter-spacing: -.02em; color: var(--ink); }
.wordmark .suffix { color: var(--accent); font-weight: 500; }
.wordmark::after { content: ""; display: inline-block; width: 7px; height: 7px;
                   margin-left: 7px; vertical-align: 3px;
                   background: var(--accent); border-radius: 50%; }

/* The button back to Keal keeps the parent's mint, as the foot of its K. It is
 * the only green on this site, and it is there to say where this came from. */
.btn-keal { display: inline-flex; align-items: center; gap: 8px;
            font: 600 12px Sora, sans-serif; color: var(--ink);
            border: 1px solid rgba(254,170,169,.28); border-radius: 99px; padding: 6px 12px; }
.btn-keal::before { content: ""; width: 10px; height: 5px; border-radius: 99px;
                    background: var(--keal-mint); flex: none; }
.btn-keal:hover { border-color: var(--accent); }

/* The pill above the heading: what this page is, in one line, in mono. */
.pill { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
        font: 600 12px 'JetBrains Mono', monospace; color: var(--mint);
        border: 1px solid rgba(255,195,194,.25); border-radius: 99px; padding: 6px 14px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                background: var(--accent); flex: none; }

.hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cta2 { display: inline-block; font: 600 15px Sora, sans-serif; color: var(--ink);
        border: 1px solid rgba(254,170,169,.25); border-radius: 10px; padding: 11px 20px; }
.cta2:hover { border-color: rgba(254,170,169,.5); }
.hero-code pre { margin: 0; background: var(--panel); border: 1px solid var(--line);
                 border-radius: 14px; padding: 22px 24px; overflow-x: auto;
                 font: 13px/1.75 'JetBrains Mono', monospace; color: var(--code); }

.counts-wrap { padding: 0 40px 56px; }
.counts { width: 100%; border-collapse: collapse; font: 400 14px/1.6 Sora, sans-serif; }
.counts th { text-align: left; padding: 0 0 10px; font: 600 11px Sora, sans-serif;
             letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
             border-bottom: 1px solid var(--line); }
.counts td { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--prose);
             vertical-align: top; }
.counts td.lang { width: 130px; color: var(--ink); font-weight: 600; }
.counts td.n { width: 110px; font-family: 'JetBrains Mono', monospace; color: var(--mint);
               font-size: 17px; }

.live { padding: 0 40px 56px; }
.live h2 { margin: 0 0 18px; font: 600 22px Sora, sans-serif; color: var(--ink); }
.live-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.live-grid > pre { margin: 0; background: var(--panel); border: 1px solid var(--line);
                   border-radius: 14px; padding: 20px 22px; overflow-x: auto;
                   font: 13px/1.7 'JetBrains Mono', monospace; color: var(--code); }
.patch { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
         padding: 20px 22px; }
.patch pre { margin: 0 0 14px; font: 12.5px/1.7 'JetBrains Mono', monospace;
             color: var(--mint); white-space: pre-wrap; word-break: break-all; }
.patch p { margin: 0; font: 400 13.5px/1.65 Sora, sans-serif; color: var(--dim); }

.doc-head { padding: 44px 40px 10px; }
.doc-head h1 { margin: 0; font: 700 40px/1.15 Sora, sans-serif; letter-spacing: -0.02em; }
.doc-head .sub { margin: 12px 0 0; max-width: 70ch;
                 font: 400 16px/1.7 Sora, sans-serif; color: var(--prose); }

.ex { margin: 0 0 52px; }
.ex h2 { margin: 0 0 10px; font: 600 20px 'JetBrains Mono', monospace; color: var(--mint); }
.ex pre { max-height: 640px; overflow: auto; }

.dmain pre, .prose pre { background: var(--panel); border: 1px solid var(--line);
                         border-radius: 12px; padding: 16px 18px; overflow-x: auto;
                         font: 12.8px/1.7 'JetBrains Mono', monospace; color: var(--code); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.prose th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line2);
            font: 600 11px Sora, sans-serif; letter-spacing: .08em;
            text-transform: uppercase; color: var(--faint); }
.prose td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--prose);
            vertical-align: top; font-size: 14px; }
.prose blockquote { margin: 0 0 18px; padding: 2px 0 2px 18px;
                    border-left: 2px solid var(--accent); color: var(--dim); }

footer.foot { display: flex; justify-content: space-between; align-items: center;
              gap: 32px; flex-wrap: wrap; padding: 30px 40px 46px;
              border-top: 1px solid var(--line); }
.foot-l { font: 400 13px/1.6 Sora, sans-serif; color: var(--faint); max-width: 62ch; }
.foot-r { display: flex; gap: 22px; font: 500 13px Sora, sans-serif; }
.foot-r a { color: var(--dim); }
.foot-r a:hover { color: var(--ink); }

/* A grid item's `min-width` defaults to `auto`, which means min-content — and
   min-content is wider than the track whenever the item holds a long word, a
   button row or a code block. The track keeps its size, the item spills past
   it, and the page scrolls sideways. Nothing looks wrong until the window is
   narrow, which is why this was measured rather than noticed: Chrome at 500
   points reported the guide 780px wide in a 485px window. `min-width: 0` lets
   the item shrink to its track; the `pre` inside it already scrolls on its own. */
/* An inline `code` holds a call chain with no spaces in it, and the default
   only breaks a line at a space — so `html(page).status(201).type(…)` sat 297px
   wide in a 375px window and pushed the whole page sideways. `anywhere` breaks
   it only when it would not otherwise fit, and does not apply inside a `pre`,
   which does not wrap at all. */
.prose code, .dmain code { overflow-wrap: anywhere; }

.hero > *, .dgrid > *, .live-grid > *, .duo > *,
.cards > *, .cards3 > *, .cards4 > *, footer > * { min-width: 0; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .live-grid { grid-template-columns: 1fr; }
  .dgrid { grid-template-columns: 1fr; }
  .dtoc { display: none; }
  .cards4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .cards4 { grid-template-columns: 1fr; }
  .nav { flex-wrap: wrap; gap: 12px; padding: 14px 20px; }
  /* The links are wider in French than in English — "Démarrer", "Exemples" —
     so the row that fits on one line in one language does not in the other,
     and a row that will not wrap pushes the page out instead. Both wrap. */
  .nav-left { flex-wrap: wrap; gap: 16px; min-width: 0; }
  .nav-links { flex-wrap: wrap; gap: 18px; }
  .hero, .counts-wrap, .live, .doc-head { padding-left: 20px; padding-right: 20px; }
}

/* A fenced block says which language it is, quietly, in the corner. */
.prose pre[class^="lang-"], .dmain pre[class^="lang-"] { position: relative; padding-top: 22px; }
.prose pre[class^="lang-"]::before, .dmain pre[class^="lang-"]::before {
  position: absolute; top: 6px; right: 12px;
  font: 600 10px Sora, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.prose pre.lang-keal::before, .dmain pre.lang-keal::before { content: "keal"; }
.prose pre.lang-sh::before, .dmain pre.lang-sh::before { content: "shell"; }
.prose pre.lang-toml::before, .dmain pre.lang-toml::before { content: "toml"; }
.prose pre.lang-json::before, .dmain pre.lang-json::before { content: "json"; }

/* ---- the identity ------------------------------------------------------
 *
 * Six things separate a child from Keal: the accent, the shade of the black,
 * the display face, the mark, the hero's motif, and the dress of a code
 * block. Everything else — the variable names, the components, the radii, the
 * nav, the cards, the breakpoints — is the parent's and stays.
 */

.hero h1, .doc-head h1, .prose h1, .live h2, .duo h2 { font-family: var(--display); }
.hero { background-image: var(--motif); background-size: var(--motif-size); }

/* A code block on this site is dressed as a request and its answer, because
 * that is what this framework is: a bar saying what was asked, the code, and
 * under a dashed rule, the bytes that came back. */
.cwin { background: var(--panel); border: 1px solid var(--line2); border-radius: 14px;
        overflow: hidden; }
.cwin-bar { display: flex; align-items: center; justify-content: space-between;
            gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line);
            font: 500 12px 'JetBrains Mono', monospace; }
.cwin-bar .verb { color: var(--accent); font-weight: 600; }
.cwin-bar .path { color: var(--code); }
.cwin-bar .said { color: var(--faint); }
.cwin pre { margin: 0; padding: 20px 22px; overflow-x: auto;
            font: 13px/1.75 'JetBrains Mono', monospace; color: var(--code); }
.cwin .answer { border-top: 1px dashed rgba(254,170,169,.3); padding: 16px 22px; }
.cwin .answer pre { margin: 0 0 8px; padding: 0; color: var(--mint); font-size: 13px;
                    white-space: pre-wrap; word-break: break-all; }
.cwin .answer p { margin: 0; font: 400 12.5px/1.6 Sora, sans-serif; color: var(--dim); }