/* KealSql site — the family stylesheet of the Keal sites, re-tinted by
   site/family.py: hue 280, periwinkle. Do not edit; edit the parent, or the script. */
:root {
  --bg: #0E0F16; --panel: #17181F;
  --line: rgba(183,189,255,.12); --line2: rgba(183,189,255,.16);
  --ink: #E9EAF5; --dim: #9A9DB1; --prose: #ADAFC4; --faint: #65677A;
  --accent: #A1A7FF; --accent-h: #ADB4FF; --mint: #CCD2FF;
  --kw: #B1B7FD; --ty: #CCD2FF; --str: #D9C98B; --code: #CED0DE;
  --display: 'Space Grotesk', Sora, sans-serif;
  --motif: linear-gradient(rgba(161,167,255,.06) 1px, transparent 1px),
           linear-gradient(90deg, rgba(161,167,255,.06) 1px, transparent 1px);
  --motif-size: 48px 48px;
}
* { 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; }
/* The mark: the K as an image, the name as text, and the sign after it drawn
   in CSS. Only the letter is a file — a wordmark that is text can be
   selected, searched and read aloud, which a picture of a word cannot. */
.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; }
/* Keal's sign is the foot of its own K, laid flat. Each site in the family
   has its own — an open cell, a filled pixel, a round dot — and the shape
   says which one you are on before the name is read. */
.wordmark::after { content: ""; display: inline-block; width: 7px; height: 7px;
                   margin-left: 7px; vertical-align: 3px;
                   border: 2px solid var(--accent); box-sizing: border-box; }
.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(183,189,255,.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(183,189,255,.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(183,189,255,.25); border-radius: 10px; padding: 13px 24px; }
.cta-line:hover { border-color: rgba(183,189,255,.45); }

/* ---- hero ---- */
/* Two columns: the words, and the code window. The five parts of the left
   half used to be direct children of this grid, so they filled it row by row
   — the heading landed in the right column, the code window under the pill,
   and the two buttons became one because the row that holds them is `.ctas`
   while `.cta` is the filled button itself. The stylesheet and the generator
   had drifted apart on three class names at once, and each was right about
   its own half. */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
        padding: 72px 40px 64px; align-items: center; }
/* A grid column does not go below the width of its own content unless it is
   told it may, and a `pre` does not fold — so a code window makes the whole
   PAGE wider than the window instead of scrolling inside itself. Every grid
   here had it: measured against a 485-point viewport, the documents came out
   572, 595, 572, 601 and 780 points wide, the last one 60% over.
   `overflow-x: auto` on the block cannot help while the column refuses to
   shrink, because the grid measures the content and not the box.
   Found by the keal-view session, which measured `scrollWidth` rather than
   looking at a picture — and a picture would not have shown it, since
   headless Chrome clamps its window to 500 points and hands back a crop. */
.hero > *, .cards > *, .cards3 > *, .cards4 > *, .duo > *, .tgrid > *,
.dgrid > *, .tourgrid > *, .sgrid > *, footer > * { min-width: 0; }
/* And the code itself scrolls inside its own frame rather than pushing.
   Every `pre`, not a list of the four wrappers I happened to think of: the
   documentation column has bare ones, and `packages.html` had a block
   reaching 614 points inside a 305-point window because it was not on that
   list. A selector that names the cases it knows misses the one nobody
   thought to name. */
pre { overflow-x: auto; }
/* An inline `code` in a sentence is one word to the line breaker, and
   `.keal/deps/geometry/shapes.keal` has nowhere to break. `break-word` only
   splits a token that does not fit a line ON ITS OWN, so anything shorter
   than the column is never split and the column widens to hold it — which is
   how three pages were still 40 points over at a 320-point width while
   passing at 400. `anywhere` lets the break happen where it has to.
   Found by the keal-view session, which measured below the smallest window
   Chrome will make: 500 points is its floor, and a phone is 320. */
.prose code, .dmain code, .band code, .card p code, .hero .sub code { overflow-wrap: anywhere; }
.pill { display: inline-flex; align-items: center; gap: 8px;
        font: 600 12px 'JetBrains Mono', monospace; color: var(--mint);
        border: 1px solid rgba(204,210,255,.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; }
/* Wrapping, because the same two buttons are longer in French: "Lire la
   documentation" reached 367 points in a 305-point window while the English
   pair fitted. A row sized for one language is a row measured once. */
.ctas { display: flex; flex-wrap: wrap; 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(183,189,255,.14);
       border-radius: 10px; padding: 12px 18px; cursor: pointer; }
.cmd .p { color: var(--faint); }
.cmd .cp { color: var(--faint); border-left: 1px solid rgba(183,189,255,.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(183,189,255,.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(min(240px, 100%), 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(min(260px, 100%), 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); }
/* The "Written in Keal" cards link out. `a { color: inherit }` above is what
   the rest of the site wants, and here it would make a link read as plain
   text — so these say so, with the arrow that marks an outbound link. */
.built .card h3 a { color: var(--accent); }
.built .card h3 a span { font-size: .85em; opacity: .8; }
.built .card h3 a:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 500 11.5px 'JetBrains Mono', monospace; color: var(--mint);
        border: 1px solid rgba(204,210,255,.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; }

/* ---- a band: a heading and a lede, between the sections around it ----
   `.band` and `.lede` had no rules at all, so four pages laid them out as
   bare blocks — browser-default headings, no padding, text running to the
   window's edge. It is the same thing `.cards` had: a class used by the
   generator and never given a shape, which looks like a decision until you
   look for the rule and there is none. */
.band { padding: 56px 40px 22px; }
.band h1 { margin: 0 0 18px; font: 700 40px/1.15 Sora, sans-serif;
           letter-spacing: -.02em; color: var(--ink); }
.band h2 { margin: 0 0 14px; font: 700 34px/1.2 Sora, sans-serif;
           letter-spacing: -.015em; color: var(--ink); }
.band .lede { margin: 0; font: 400 16.5px/1.7 Sora, sans-serif; color: var(--dim);
              max-width: 68ch; }
/* The last one carries the page's bottom margin, since nothing follows it
   to supply one. */
.band:last-of-type { padding-bottom: 64px; }
.band .tablewrap, .band .callout { margin-top: 22px; }

/* ---- 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(183,189,255,.1); }
.bar > div { height: 100%; border-radius: 99px; background: rgba(183,189,255,.35); width: 0; transition: width .6s ease-out; }
.bar.mid > div { background: rgba(183,189,255,.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, #35C8A8, #A9EBCD); }
.texit { font: 600 12px Sora, sans-serif; color: var(--dim);
         border: 1px solid rgba(183,189,255,.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(183,189,255,.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(161,167,255,.18); color: var(--accent); font-weight: 600; }
.tch.now { background: rgba(161,167,255,.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(204,210,255,.05);
         border: 1px solid rgba(204,210,255,.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(204,210,255,.06);
           border: 1px solid rgba(204,210,255,.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(183,189,255,.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(161,167,255,.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(183,189,255,.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(161,167,255,.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(183,189,255,.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(183,189,255,.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; }
  /* The bar wrapped, and the row of links inside it did not — seven names
     and their gaps are 500 points wide on their own, which is what held
     every page 572 points wide in a 485-point window however much the
     content below was allowed to shrink. A flex row keeps its children on
     one line until it is told otherwise. */
  .nav { flex-wrap: wrap; gap: 12px; }
  .nav-left { flex-wrap: wrap; gap: 16px 24px; }
  .nav-links { flex-wrap: wrap; gap: 10px 18px; }
  .nav-right { flex-wrap: wrap; }
  .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(161,167,255,.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; }

/* The scroller has to be bounded by its column, or the 460-point floor
   below pushes the page instead of scrolling inside it. */
.tablewrap { overflow-x: auto; margin: 18px 0; max-width: 100%; }
.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(161,167,255,.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(161,167,255,.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); }

/* ---- Kealler ------------------------------------------------------------
   The IDE lives on this site and belongs to the family at once. It keeps
   Keal's ground, panels and Sora, and keeps MINT for code — the language it
   edits is still Keal — while the periwinkle of the family is what the page
   itself uses: buttons, the active tab, the errors it draws. The K is
   bicolour and the sign is a gradient because both are true at the same
   time. */
.kealler { --accent: #A1A7FF; --accent-h: #ADB4FF; --mint: #CCD2FF; }
.kealler .hero { background: linear-gradient(135deg, rgba(161,167,255,.07),
                             transparent 45%, rgba(161,167,255,.07)); }
.kealler .wordmark::after { background: linear-gradient(90deg, #35C8A8, #A1A7FF); }
/* Code stays the language's own colours, not the page's. */
.kealler .win pre, .kealler pre { --kw: #63D3B4; --ty: #A9EBCD; }

/* ---- KealSql's six ---- */
.hero h1, .duo h2, .gs-head h2, .band h1, .band h2, .doc-head h1, .prose h1 { font-family: var(--display); }
.hero { background-image: var(--motif); background-size: var(--motif-size); }
/* The way back to Keal: its own mint, as the foot of its K, before the word —
   the only green a child site shows, and it says where you come from. */
.btn-keal { font: 600 13px Sora, sans-serif; color: var(--ink);
            border: 1px solid var(--line2); border-radius: 8px; padding: 7px 14px;
            display: inline-flex; align-items: center; gap: 8px; }
.btn-keal::before { content: ""; display: inline-block; width: 10px; height: 5px;
                    border-radius: 99px; background: #35C8A8; }
.btn-keal:hover { border-color: var(--accent); color: var(--accent-h); }
/* Code blocks in two panes: what someone writes, then what PostgreSQL
   receives. The tab bar names both; the second pane is the SQL. */
.cwin-tabs { display: flex; gap: 18px; }
.cwin-tabs .tab { font: 500 12px 'JetBrains Mono', monospace; color: var(--faint); padding-bottom: 6px; }
.cwin-tabs .tab.on { color: var(--ink); border-bottom: 2px solid var(--accent); }
.cwin-sql { border-top: 1px solid var(--line); background: rgba(161,167,255,.05); }
.cwin-sql pre { margin: 0; padding: 14px 22px; font: 13px/1.7 'JetBrains Mono', monospace; color: var(--dim); }
.cwin-sql .kw { color: var(--kw); }
.cwin-sql .cm { color: var(--faint); }
.hero .cwin-sql pre { white-space: pre-wrap; }
.band .cwin { margin: 18px 0; }
.band .lede { margin-bottom: 14px; }
.cards a.card { display: block; }