/* ceplang.org - the CEPL documentation.

   A flat documentation layout: a top bar, the pages on the left, the page's
   sections on the right, and the text between. White and neutral greys, no
   shadows, one accent (Ceplin's green). Examples are drawn in the
   terminal's own colours on a flat dark panel, as Ceplin shows them. The
   type is Inter (OFL-1.1, fonts/OFL.txt), served from here. */

@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-regular.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-medium.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-semibold.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-bold.woff2) format("woff2")}

:root{
  --bg:#ffffff; --subtle:#f7f8f7; --hover:#f1f3f1; --code-bg:#f1f3f1;
  --line:#e4e7e4; --line-hi:#cfd4cf;
  --ink:#141614; --ink-dim:#4b524b; --ink-faint:#6b736b;
  --accent:#2f7a1f; --accent-bg:#edf6ea; --accent-line:#8fcb7a;
  --link:#2f7a1f; --link-hi:#1f5714;
  /* examples: the terminal's colours, on a flat dark panel */
  --term:#141614; --term-bar:#1c1f1c; --term-line:#2a2e2a; --term-ink:#d9ddd8; --term-dim:#8a8f8a;
  --k-v:#1faed3; --k-f:#90d273; --k-a:#c867d4; --k-b:#dbcc46; --k-c:#7b828e; --k-o:#6b97ea;
  --k-ok:#89f06c; --k-er:#f06c6c; --k-w:#f0b66c; --k-m:#b8b8b8;
  --mono:"JetBrains Mono","SFMono-Regular","Cascadia Mono",Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono",monospace;
  --top:60px; --side:260px; --toc:232px;
  color-scheme:light;
}
/* dark, when the reader picks it with the switch: the site opens light,
   whatever the system's setting */
:root[data-theme="dark"]{
  --bg:#0f110f; --subtle:#151815; --hover:#1b1e1b; --code-bg:#1d211d;
  --line:#252a25; --line-hi:#343a34;
  --ink:#e8ebe7; --ink-dim:#b3b9b2; --ink-faint:#8a918a;
  --accent:#89f06c; --accent-bg:#172215; --accent-line:#3e6b30;
  --link:#89f06c; --link-hi:#b4f6a0;
  --term:#151815; --term-bar:#1a1d1a; --term-line:#262a26;
  color-scheme:dark;
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 20px)}
body{margin:0;background:var(--bg);color:var(--ink);
     font:15.5px/1.7 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
     -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-bg)}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hi);text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--bg);border:1px solid var(--line);padding:6px 12px;border-radius:6px}
.skip:focus{left:12px}

/* ---- top bar --------------------------------------------------------- */
.top{position:sticky;top:0;z-index:20;height:var(--top);background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:16px;height:100%;max-width:1520px;margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:700;font-size:17px;letter-spacing:.02em;flex:none;
       width:calc(var(--side) - 24px)}
.brand:hover{color:var(--ink);text-decoration:none}
.brand .logo{height:28px;width:28px;display:block;flex:none}
/* the CEPL logo: the dark one on a light page, the lighter one on a dark page */
.for-dark{display:none!important}
:root[data-theme="dark"] .for-light{display:none!important}
:root[data-theme="dark"] .for-dark{display:block!important}
.hero-logo{margin:0 0 20px}
.hero-logo img{display:block;width:88px;height:88px}
.brand .tag{font-weight:500;font-size:14px;color:var(--ink-faint);letter-spacing:0;padding-left:9px;border-left:1px solid var(--line)}
.search{position:relative;flex:0 1 340px;min-width:0}
.search input{width:100%;height:36px;border:1px solid var(--line);border-radius:6px;background:var(--subtle);color:var(--ink);
              font:inherit;font-size:14px;padding:0 34px 0 12px}
.search input::placeholder{color:var(--ink-faint)}
.search input::-webkit-search-cancel-button{display:none}
.search input:not(:placeholder-shown)+kbd{display:none}
.search input:focus{outline:none;border-color:var(--accent);background:var(--bg)}
.search kbd{position:absolute;right:8px;top:8px;font:11.5px/18px var(--mono);color:var(--ink-faint);border:1px solid var(--line);border-radius:4px;padding:0 5px;pointer-events:none;background:var(--bg)}
.results{position:absolute;top:42px;left:0;width:min(560px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;
         background:var(--bg);border:1px solid var(--line-hi);border-radius:8px;padding:4px;z-index:30}
.results a{display:block;padding:8px 10px;border-radius:5px;color:var(--ink)}
.results a:hover,.results a[aria-selected="true"]{background:var(--hover);text-decoration:none}
.results b{font-weight:600;font-size:14px}
.results small{float:right;color:var(--ink-faint);font-size:12px;margin-left:12px}
.results span{display:block;color:var(--ink-dim);font-size:13px;line-height:1.45;margin-top:2px;overflow:hidden;
              display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.results mark{background:var(--accent-bg);color:inherit;border-radius:2px}
.results .none{padding:10px;color:var(--ink-faint);font-size:14px}
.nav{display:flex;gap:2px;margin-left:auto;font-size:14px}
.nav a{color:var(--ink-dim);padding:6px 10px;border-radius:6px;white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--hover);text-decoration:none}
.nav a[aria-current]{color:var(--accent);font-weight:600}
.theme,.menu-btn{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:6px;border:1px solid var(--line);
                 background:var(--bg);color:var(--ink-dim);cursor:pointer}
.theme:hover,.menu-btn:hover{color:var(--ink);background:var(--hover)}
.menu-btn{display:none}
.ext{flex:none;font-size:14px;color:var(--ink-dim)}
.ext::after{content:" ↗"}
.ext:hover{color:var(--ink);text-decoration:none}

/* ---- three columns --------------------------------------------------- */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr) var(--toc);max-width:1520px;margin:0 auto;min-height:calc(100vh - var(--top))}
.side,.toc{position:sticky;top:var(--top);align-self:start;max-height:calc(100vh - var(--top));overflow:auto;overscroll-behavior:contain}
.side{padding:24px 16px 48px 24px;border-right:1px solid var(--line);font-size:14px}
.side ul{list-style:none;margin:0 0 6px;padding:0}
.grp{margin:18px 0 6px 10px;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.side .grp:first-child{margin-top:0}
.side a{display:block;padding:5px 10px;border-radius:6px;color:var(--ink-dim);line-height:1.45}
.side a:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.side a[aria-current]{background:var(--accent-bg);color:var(--accent);font-weight:600}
.side .sub{margin:4px 0 8px 10px;padding-left:8px;border-left:1px solid var(--line)}
.side .sub a{padding:3px 10px;font-size:13.5px}
.side .sub a.on{color:var(--ink);font-weight:500}
.toc{padding:32px 20px 48px 16px;font-size:13px}
.toc .grp{margin-left:0}
.toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:block;padding:3px 0 3px 12px;margin-left:-1px;border-left:1px solid transparent;color:var(--ink-faint);line-height:1.45}
.toc a:hover{color:var(--ink);text-decoration:none}
.toc .l3 a{padding-left:24px}
.toc a.on{color:var(--accent);border-left-color:var(--accent)}
.doc{min-width:0;padding:32px 56px 72px;max-width:900px;width:100%;justify-self:center}

/* ---- prose ----------------------------------------------------------- */
.crumb{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--accent)}
.doc h1{font-size:34px;line-height:1.2;letter-spacing:-.022em;margin:0 0 12px;font-weight:700}
.doc h1+p{font-size:17.5px;color:var(--ink-dim);margin:0 0 28px;line-height:1.6}
.doc h2{font-size:24px;line-height:1.3;letter-spacing:-.015em;margin:48px 0 12px;font-weight:650}
.doc h3{font-size:18.5px;line-height:1.35;margin:32px 0 8px;font-weight:600}
.doc h4{font-size:15.5px;margin:24px 0 6px;font-weight:600}
.doc h2,.doc h3,.doc h4{position:relative}
.anchor{position:absolute;left:-.95em;color:var(--ink-faint);opacity:0;font-weight:400}
.anchor:hover{text-decoration:none;color:var(--accent)}
h2:hover .anchor,h3:hover .anchor,h4:hover .anchor,.anchor:focus{opacity:1}
.doc p{margin:0 0 16px}
.doc ul,.doc ol{padding-left:1.35em;margin:0 0 16px}
.doc li{margin:4px 0}
.doc li::marker{color:var(--ink-faint)}
.doc strong{font-weight:600}
.doc code{font-family:var(--mono);font-size:.87em;background:var(--code-bg);border:1px solid var(--line);border-radius:4px;padding:.5px 4px;word-break:break-word}
.doc a code{color:inherit}
.doc p[id^="r"]:target{background:var(--accent-bg);outline:6px solid var(--accent-bg);border-radius:2px}
.note{margin:20px 0;padding:12px 16px;background:var(--subtle);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px}
.note p:last-child{margin-bottom:0}
.table{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:6px}
.doc table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.55}
.doc th,.doc td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{font-weight:600;background:var(--subtle);white-space:nowrap}
.doc tr:last-child td{border-bottom:0}
.doc td code{white-space:nowrap}

/* ---- examples -------------------------------------------------------- */
.term{margin:16px 0 24px;border-radius:6px;background:var(--term);overflow:hidden;border:1px solid var(--term-line)}
.term-bar{display:flex;align-items:center;height:32px;padding:0 6px 0 14px;background:var(--term-bar);border-bottom:1px solid var(--term-line)}
.term-title{font:600 11px Inter,sans-serif;letter-spacing:.08em;color:var(--term-dim)}
.copy{margin-left:auto;font:500 12px Inter,sans-serif;color:var(--term-dim);background:transparent;border:0;border-radius:4px;padding:3px 9px;cursor:pointer}
.copy:hover{color:var(--term-ink);background:#262a26}
.copy.done{color:var(--k-ok)}
.term-body{margin:0;padding:14px 16px 16px;overflow-x:auto;font:13px/1.6 var(--mono);color:var(--term-ink);tab-size:4;scrollbar-color:#3a3f3a transparent}
.term-body .pr{color:var(--term-dim);user-select:none}
.term-body .in{color:#fff}
.k-v{color:var(--k-v)} .k-f{color:var(--k-f)} .k-a{color:var(--k-a)} .k-b{color:var(--k-b)}
.k-c{color:var(--k-c);font-style:italic} .k-o{color:var(--k-o)} .k-d{color:var(--term-dim)}
.k-ok{color:var(--k-ok)} .k-er{color:var(--k-er)} .k-w{color:var(--k-w)} .k-m{color:var(--k-m)}
.k-bold{font-weight:700;color:#fff} .k-i{font-style:italic}

.code{position:relative;margin:16px 0 24px;border:1px solid var(--line);border-radius:6px;background:var(--subtle)}
.code pre{margin:0;padding:12px 16px;overflow-x:auto;font:13px/1.65 var(--mono)}
.code .lang{display:block;font:600 11px/30px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
            padding:0 14px;border-bottom:1px solid var(--line)}
.code .copy{position:absolute;right:6px;top:4px;color:var(--ink-faint)}
.code .copy:hover{color:var(--ink);background:var(--hover)}
.code code{background:none;border:0;padding:0;font-size:inherit}
.file{margin:16px 0 24px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.file figcaption{font:500 12.5px/32px var(--mono);padding:0 14px;background:var(--subtle);border-bottom:1px solid var(--line);color:var(--ink-dim)}
.file pre{margin:0;padding:12px 14px;overflow-x:auto;font:13px/1.6 var(--mono)}

/* ---- pager and footer ------------------------------------------------ */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.pager a{display:block;padding:12px 16px;border:1px solid var(--line);border-radius:6px;color:var(--ink);font-weight:600}
.pager a:hover{border-color:var(--accent);text-decoration:none;color:var(--accent)}
.pager span{display:block;font-size:12.5px;font-weight:400;color:var(--ink-faint)}
.pager .next{grid-column:2;text-align:right}
.foot{border-top:1px solid var(--line);color:var(--ink-faint);font-size:13px}
.foot .bar{justify-content:space-between;flex-wrap:wrap;gap:6px 24px;padding-top:16px;padding-bottom:16px;height:auto}

/* ---- the overview ---------------------------------------------------- */
body.page-home .shell{grid-template-columns:var(--side) minmax(0,1fr)}
.home-cards,.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0 8px}
.cards .card{display:block;border:1px solid var(--line);border-radius:6px;padding:16px 18px;color:var(--ink)}
.cards .card h3{margin:0 0 4px;font-size:15.5px}
.cards .card p{margin:0;color:var(--ink-dim);font-size:14px;line-height:1.55}
a.card:hover{border-color:var(--accent);text-decoration:none;color:var(--ink)}
a.card h3::after{content:" →";color:var(--accent)}

/* ---- narrower screens ------------------------------------------------ */
@media (max-width:1280px){
  .shell{grid-template-columns:var(--side) minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:1060px){ .nav{display:none} .doc{padding:28px 36px 64px} }
@media (max-width:860px){
  .shell,body.page-home .shell{grid-template-columns:minmax(0,1fr)}
  .menu-btn{display:grid}
  .brand{width:auto}
  .brand .tag{display:none}
  .side{position:fixed;top:var(--top);bottom:0;left:0;width:min(300px,86vw);max-height:none;background:var(--bg);z-index:25;
        transform:translateX(-101%);transition:transform .18s ease}
  body.open .side{transform:none}
  .doc{padding:24px 16px 56px}
  .doc h1{font-size:28px}
  .doc h2{font-size:21px;margin-top:40px}
  .cards{grid-template-columns:1fr}
  .anchor{display:none}
  .term-body{font-size:12px;padding:12px}
  .ext{display:none}
  .bar{padding:0 16px;gap:10px}
  .search{flex:1 1 auto}
  .search kbd{display:none}
  .pager{grid-template-columns:1fr}
  .pager .next{grid-column:1}
}
@media print{
  .top,.side,.toc,.pager,.copy,.foot{display:none}
  .shell{display:block}
  .doc{padding:0;max-width:none}
  .term{break-inside:avoid}
}