/* Generated by playground/render_docs.mjs — do not edit by hand. */
:root {
  --bg: #121826;
  --panel: #181f30;
  --panel-2: #1e2638;
  --line: #2b3550;
  --ink: #e4e9f2;
  --muted: #9ba6ba;
  --faint: #8590a6;
  --accent: #5fd38f;
  --accent-bright: #8ee8b3;
  --accent-deep: #2fae68;
    --ok: #6fcf97;
  --err: #f47067;
  --code-bg: #0e1320;
  --mono: "SF Mono", "Cascadia Code", "Fira Code", Menlo, Consolas, monospace;
  --ui: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Syntax-highlighting palette, copied VERBATIM from the values in
     playground/medaka_lang.js's `medakaHighlightStyle` — the table CodeMirror
     paints the LIVE editor with. One token class per entry, same names the
     tokenizer returns, so a read-only guide block and the same code typed into
     the playground look identical. `--tok-keyword` sharing the accent family is
     deliberate continuity with the site chrome, not a duplicate to collapse:
     the two are free to diverge, and this block's job is to track the editor. */
  --tok-keyword: #5fd38f;
  --tok-comment: #8a94a6;
  --tok-string: #f0c674;
  --tok-character: #f0c674;
  --tok-interpolation: #ffb86c;
  --tok-escape: #ffb86c;
  --tok-number: #79c0ff;
  --tok-bool: #8ab4ff;
  --tok-typeName: #8ab4ff;
  --tok-constructor: #d29cf5;
  --tok-variableName: #d6dde8;
  --tok-operator: #a9b1ba;
  --tok-punctuation: #8b949e;
  --tok-typeVar: #6fc7d9;
  --tok-effectLabel: #f58fb0;
  --tok-effectVar: #b8c97a;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: #0c1019; scroll-padding-top: 4.5rem; } /* clear the sticky .site-nav on #anchor jumps */
body { margin:0; color:var(--ink); background:var(--bg); font:16px/1.65 var(--ui); }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-bright); text-decoration:underline; }
/* Prose links are underlined so they are distinguishable without colour. */
article a:not(.pg-run):not(.anchor) { text-decoration:underline; text-decoration-thickness:1px;
       text-underline-offset:.18em; }
.skip-link { position:absolute; left:-999px; top:.5rem; z-index:30; padding:.5rem .75rem;
       background:var(--panel); color:var(--ink); border:1px solid var(--accent); border-radius:6px; }
.skip-link:focus { left:.75rem; }

.site-nav { display:flex; align-items:center; gap:1rem; padding:.85rem 1.25rem;
       background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0;
       z-index:10; }
.site-nav-links { margin-left:auto; display:flex; gap:1rem; font-size:.8rem; }
.site-nav-links a { color:var(--muted); padding:.3rem 0; }
.site-nav-links a:hover { color:var(--accent); text-decoration:none; }
.site-nav-back { color:var(--muted); font:500 .85rem var(--ui); white-space:nowrap; padding:.3rem 0; }
.site-nav-back:hover { color:var(--ink); }
.site-nav-title:hover { color:var(--ink); text-decoration:none; }
.site-nav-title { color:var(--faint); font-size:.8rem; text-transform:uppercase;
       letter-spacing:.06em; padding:.3rem 0; }
.site-nav-menu { display:none; margin-left:auto; position:relative; }
.site-nav-menu summary { list-style:none; cursor:pointer; color:var(--muted); font-size:1.15rem;
       line-height:1; padding:.3rem .5rem; border:1px solid var(--line); border-radius:6px; }
.site-nav-menu summary::-webkit-details-marker { display:none; }
.site-nav-menu[open] summary { color:var(--ink); }
.site-nav-menu-links { position:absolute; right:0; top:calc(100% + .5rem); display:flex;
       flex-direction:column; gap:.7rem; min-width:11rem; padding:.8rem 1rem; font-size:.95rem;
       background:var(--panel); border:1px solid var(--line); border-radius:8px;
       box-shadow:0 8px 24px rgba(0,0,0,.35); z-index:20; }
.site-nav-menu-links a { color:var(--muted); padding:.25rem 0; }
.site-nav-menu-links a:hover { color:var(--accent); text-decoration:none; }
@media (max-width:700px) {
  /* One row, always: back link, the set title truncated, a hamburger. The full
     link row would overflow the viewport and make the whole page scroll sideways. */
  .site-nav { gap:.75rem; padding:.7rem 1rem; }
  .site-nav-links { display:none; }
  .site-nav-menu { display:block; }
  .site-nav-title { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
.pager { display:flex; gap:1rem; margin-top:3rem; padding-top:1.25rem; border-top:1px solid var(--line); }
.pager a { flex:1; display:flex; flex-direction:column; gap:.2rem; padding:.75rem 1rem;
       border:1px solid var(--line); border-radius:8px; color:var(--ink); }
.pager a:hover { border-color:var(--accent); text-decoration:none; }
.pager-next { text-align:right; margin-left:auto; }
.pager-label { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

.layout { display:flex; gap:2.5rem; max-width:1180px; margin:0 auto; padding:2rem 1.25rem; }
.chapters { flex:0 0 15rem; font-size:.88rem; }
.chapters h2, .toc h2 { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
       color:var(--faint); margin:0 0 .6rem; }
.chapters ul, .toc ul { list-style:none; margin:0; padding:0; }
.chapters li { margin:.1rem 0; }
.chapters a { color:var(--muted); display:inline-block; padding:.25rem 0; }
.chapters a:hover { color:var(--ink); }
.chapters a.here { color:var(--accent); font-weight:600; }
main { flex:1 1 auto; min-width:0; max-width:42rem; }

h1,h2,h3 { line-height:1.3; margin:2rem 0 .75rem; color:var(--ink); }
h1 { margin-top:0; font-size:1.7rem; }
h2 { font-size:1.3rem; border-bottom:1px solid var(--line); padding-bottom:.3rem; }
h3 { font-size:1.05rem; }
h1 .anchor, h2 .anchor, h3 .anchor { float:left; margin-left:-1.15em; padding-right:.3em;
       color:var(--faint); opacity:0; text-decoration:none; }
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor { opacity:1; }
p, li { color:var(--ink); }

.toc { border:1px solid var(--line); background:var(--panel); border-radius:8px;
       padding:.85rem 1.1rem; margin-bottom:2rem; font-size:.88rem; }
.toc li { margin:0; }
.toc a { color:var(--muted); display:inline-block; padding:.25rem 0; }
.toc a:hover { color:var(--accent); }
.toc .toc-h3 { padding-left:1rem; }

.codeblock { margin:1.1rem 0; border:1px solid var(--line); border-radius:8px;
       overflow:hidden; background:var(--code-bg); }
.codeblock pre { margin:0; padding:.9rem 1.1rem; overflow-x:auto; background:var(--code-bg); }
.codeblock.kind-output pre { background:var(--panel-2); }
.codeblock.kind-output { border-color:var(--line); }

/* Token spans emitted by playground/highlight_medaka.mjs, on `kind-medaka`
   blocks only. `comment` also carries the italic `medakaHighlightStyle` gives
   it. Any class without a rule here would render as plain body text — i.e.
   silently unhighlighted — so this list must stay in step with the token census
   in medaka_tokenizer.js's header (highlight_medaka.mjs throws on a stray one). */
.codeblock .tok-keyword       { color:var(--tok-keyword); }
.codeblock .tok-comment       { color:var(--tok-comment); font-style:italic; }
.codeblock .tok-string        { color:var(--tok-string); }
.codeblock .tok-character     { color:var(--tok-character); }
.codeblock .tok-interpolation { color:var(--tok-interpolation); }
.codeblock .tok-escape        { color:var(--tok-escape); }
.codeblock .tok-number        { color:var(--tok-number); }
.codeblock .tok-bool          { color:var(--tok-bool); }
.codeblock .tok-typeName      { color:var(--tok-typeName); }
.codeblock .tok-constructor   { color:var(--tok-constructor); }
.codeblock .tok-variableName  { color:var(--tok-variableName); }
.codeblock .tok-operator      { color:var(--tok-operator); }
.codeblock .tok-punctuation   { color:var(--tok-punctuation); }
.codeblock .tok-typeVar     { color:var(--tok-typeVar); }
.codeblock .tok-effectLabel { color:var(--tok-effectLabel); }
.codeblock .tok-effectVar   { color:var(--tok-effectVar); }
code, pre { font-family:var(--mono); font-size:.88em; }
:not(pre) > code { background:var(--panel-2); color:var(--ink); padding:.15em .4em;
       border-radius:4px; }

.codeblock-actions { border-top:1px solid var(--line); background:var(--panel);
       padding:.5rem .9rem; font:500 .8rem var(--ui); }
.pg-run { color:var(--accent); display:inline-block; padding:.3rem 0; }
.pg-run:hover { color:var(--accent-bright); }
.pg-not-runnable { color:var(--faint); font-style:italic; }

.chapter-index { padding-left:1.4rem; }
.chapter-index li { margin:.45rem 0; }

table { border-collapse:collapse; }
th, td { border:1px solid var(--line); padding:.4rem .7rem; text-align:left; }
blockquote { margin:1.1rem 0; padding:.65rem 1.1rem; border:1px solid var(--line);
       border-left:3px solid var(--accent); border-radius:8px; background:var(--panel);
       color:var(--muted); }
blockquote > :first-child { margin-top:0; }
blockquote > :last-child { margin-bottom:0; }
@media (max-width:820px) {
  .layout { flex-direction:column; }
  /* Prose first on a phone; the chapter list follows the page instead of
     pushing it a full screen down. The header title links to the index. */
  .chapters { flex:none; order:2; margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line); }
  main { max-width:none; }
}