studio/guide/guide.css

/* LogoLabs design system: warm charcoal ramp, one copper accent, Playfair Display +
 * Inter + IBM Plex Mono. Tokens match web/index.html and the design-system zip. */
:root{
  --paper:#1a1816;--card:#211f1c;--stage:#141210;--void:#0c0a09;--surface:#2a2724;--highlight:#35322e;
  --ink:#faf8f5;--dim:rgba(250,248,245,.75);--faint:rgba(250,248,245,.55);--muted:rgba(250,248,245,.4);
  --rule:rgba(250,248,245,.08);--rule2:#2a2724;
  --accent:#c9754a;--accent-hover:#d4896a;--accent-ink:#1a1816;--accent-soft:rgba(201,117,74,.12);
  --gold:#b8976c;--good:#34d399;--bad:#f87171;
  --font-display:"Playfair Display",Georgia,serif;--font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
::selection{background:rgba(201,117,74,.35)}

/* top bar */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;height:56px;background:rgba(26,24,22,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand img{width:22px;height:22px}
.brand span{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em}
.toplinks{display:flex;gap:22px;font-size:13.5px;font-weight:500}
.toplinks a{color:var(--dim)}
.toplinks a:hover{color:var(--accent)}

/* shell: sidebar / article / toc rail */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr) 200px;gap:0;max-width:1400px;margin:0 auto}
.side{border-right:1px solid var(--rule);padding:28px 18px 60px 24px;position:sticky;top:56px;
  height:calc(100vh - 56px);overflow-y:auto;scrollbar-width:thin}
.side .grp{margin:0 0 22px}
.side .grp h4{margin:0 0 8px;font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.side a{display:block;padding:4px 8px;margin:1px -8px;border-radius:6px;font-size:13.5px;color:var(--faint)}
.side a:hover{color:var(--ink);background:var(--card)}
.side a[aria-current]{color:var(--accent);background:var(--accent-soft)}
.side a .n{font:500 10.5px/1 var(--font-mono);color:var(--muted);margin-right:7px}
.side a[aria-current] .n{color:var(--accent)}

main{padding:44px 48px 90px;min-width:0}
article{max-width:46rem}
article h1,article h2,article h3,article h4{font-family:var(--font-display);font-weight:600;
  letter-spacing:-.01em;line-height:1.2;color:var(--ink);scroll-margin-top:76px}
article h1{font-size:2.1rem;margin:0 0 18px}
article h2{font-size:1.45rem;margin:2.2em 0 .6em;padding-top:.7em;border-top:1px solid var(--rule)}
article h3{font-size:1.12rem;margin:1.8em 0 .5em}
article p{margin:0 0 1em;color:var(--dim)}
article li{color:var(--dim);margin:.3em 0}
article strong{color:var(--ink);font-weight:600}
article hr{border:0;border-top:1px solid var(--rule);margin:2.5em 0}
article img{max-width:100%;border-radius:10px;height:auto}
article a{text-decoration:underline;text-decoration-color:rgba(201,117,74,.35);text-underline-offset:3px}
article a:hover{text-decoration-color:var(--accent)}
.md-anchor{position:relative;top:-70px}

kbd{font-family:var(--font-mono);font-size:.8em;background:var(--surface);color:var(--ink);
  border:1px solid var(--highlight);border-bottom-width:2px;border-radius:5px;padding:.05em .4em;white-space:nowrap}
code{font-family:var(--font-mono);font-size:.86em;background:var(--surface);
  border:1px solid var(--rule);border-radius:5px;padding:.1em .35em;color:var(--ink)}
.codehilite{background:var(--stage)!important;border:1px solid var(--rule);border-radius:10px;
  padding:14px 16px;overflow-x:auto;margin:0 0 1.2em}
.codehilite pre{margin:0;background:transparent!important}
.codehilite code{background:transparent;border:0;padding:0;font-size:13px;line-height:1.6}

table{border-collapse:collapse;width:100%;margin:0 0 1.2em;font-size:14px;display:block;overflow-x:auto}
th,td{border:1px solid var(--rule2);padding:7px 11px;text-align:left;vertical-align:top;color:var(--dim)}
th{background:var(--card);color:var(--ink);font-weight:600;font-size:13px}
tbody tr:nth-child(2n){background:rgba(250,248,245,.02)}
table code{white-space:nowrap}

blockquote{margin:0 0 1.2em;padding:10px 16px;border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:0 8px 8px 0}
blockquote p{margin:0 0 .5em;color:var(--ink)}
blockquote p:last-child{margin:0}

.math{overflow-x:auto;overflow-y:hidden;padding:6px 2px;margin:0 0 1.2em}
.katex-display{margin:.4em 0!important}
.katex{color:var(--ink)}

/* per-page toc rail */
.rail{padding:52px 20px 60px 0;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto}
.rail h5{margin:0 0 10px;font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.rail ul{list-style:none;margin:0;padding:0}
.rail ul ul{padding-left:12px}
.rail a{display:block;padding:3px 0;font-size:12.5px;color:var(--muted);line-height:1.45}
.rail a:hover{color:var(--accent)}
.rail .l2>a{color:var(--faint)}

/* index hero */
.hero{padding:8px 0 34px;border-bottom:1px solid var(--rule);margin-bottom:34px}
.eyebrow{font:500 11px/1 var(--font-mono);letter-spacing:.22em;color:var(--accent);margin:0 0 14px}
.hero h1{font-family:var(--font-display);font-size:3.4rem;font-weight:700;letter-spacing:-.02em;margin:0 0 14px;line-height:1.05}
.hero .pitch{font-size:1.14rem;color:var(--faint);max-width:34rem;margin:0 0 24px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 20px;border-radius:999px;font-size:14px;font-weight:600;
  border:1px solid var(--rule2);color:var(--ink);background:var(--card)}
.btn:hover{border-color:var(--highlight);color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.btn.ghost{background:transparent}

/* pointer to the diagram edition */
.plainlink{margin:-6px 0 1.6em;font-size:14px}
.plainlink a{font-weight:500}

/* the mark before the wordmark in the hero */
.heromark{height:.8em;width:auto;vertical-align:-.08em;margin-right:.22em}

/* about block on the landing page */
.about{margin-top:3.2em;padding-top:1.4em;border-top:1px solid var(--rule)}
.about p{color:var(--faint);max-width:38rem}

/* prev / next */
.pagenav{display:flex;justify-content:space-between;gap:14px;margin-top:3.2em;padding-top:1.2em;
  border-top:1px solid var(--rule)}
.pagenav a{flex:1;border:1px solid var(--rule2);background:var(--card);border-radius:10px;padding:11px 15px;
  text-decoration:none}
.pagenav a:hover{border-color:rgba(201,117,74,.45)}
.pagenav .dir{display:block;font:500 10.5px/1 var(--font-mono);letter-spacing:.12em;color:var(--muted);margin-bottom:4px}
.pagenav .lbl{color:var(--ink);font-weight:600;font-size:14px}
.pagenav .next{text-align:right}

footer{border-top:1px solid var(--rule);padding:26px 24px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
footer a{color:var(--dim)}
footer a:hover{color:var(--accent)}

@media (max-width:1150px){.rail{display:none}.shell{grid-template-columns:220px minmax(0,1fr)}}
@media (max-width:820px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--rule);padding:18px 24px}
  .side .grp{display:inline-block;vertical-align:top;margin:0 26px 14px 0}
  main{padding:30px 22px 70px}
  .hero h1{font-size:2.5rem}
}

@font-face{font-family:"Inter";src:url("../fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-latin.woff2") format("woff2");font-weight:400 900;font-display:swap}
:root{--font-mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace}
.side,.rail{top:0;height:100vh}
.side .guidebrand{display:flex;align-items:center;gap:9px;margin:0 0 22px;color:var(--ink)}
.side .guidebrand img{width:20px;height:20px}
.side .guidebrand span{font-family:var(--font-display);font-weight:700;font-size:17px}
.side .guidebrand:hover{background:none}
.guidenote{font-size:12px;color:var(--muted);margin:26px 0 0;line-height:1.5}
.shell{max-width:1320px}

pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.codehilite .hll { background-color: #2a2724 }
.codehilite { background: ; color: #FAF8F5 }
.codehilite .c { color: #8A837B; font-style: italic } /* Comment */
.codehilite .err { color: #F87171 } /* Error */
.codehilite .k { color: #C9754A } /* Keyword */
.codehilite .n { color: #FAF8F5 } /* Name */
.codehilite .o { color: #C9754A } /* Operator */
.codehilite .p { color: #BFB9B1 } /* Punctuation */
.codehilite .ch { color: #8A837B; font-style: italic } /* Comment.Hashbang */
.codehilite .cm { color: #8A837B; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #8A837B; font-style: italic } /* Comment.Preproc */
.codehilite .cpf { color: #8A837B; font-style: italic } /* Comment.PreprocFile */
.codehilite .c1 { color: #8A837B; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #8A837B; font-style: italic } /* Comment.Special */
.codehilite .gd { color: #F87171 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .gi { color: #34D399 } /* Generic.Inserted */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .kc { color: #C9754A } /* Keyword.Constant */
.codehilite .kd { color: #C9754A } /* Keyword.Declaration */
.codehilite .kn { color: #C9754A } /* Keyword.Namespace */
.codehilite .kp { color: #C9754A } /* Keyword.Pseudo */
.codehilite .kr { color: #C9754A } /* Keyword.Reserved */
.codehilite .kt { color: #B8976C } /* Keyword.Type */
.codehilite .m { color: #B8976C } /* Literal.Number */
.codehilite .s { color: #34D399 } /* Literal.String */
.codehilite .na { color: #B8976C } /* Name.Attribute */
.codehilite .nb { color: #B8976C } /* Name.Builtin */
.codehilite .nc { color: #D4896A } /* Name.Class */
.codehilite .no { color: #FAF8F5 } /* Name.Constant */
.codehilite .nd { color: #D4896A } /* Name.Decorator */
.codehilite .ni { color: #FAF8F5 } /* Name.Entity */
.codehilite .ne { color: #FAF8F5 } /* Name.Exception */
.codehilite .nf { color: #D4896A } /* Name.Function */
.codehilite .nl { color: #FAF8F5 } /* Name.Label */
.codehilite .nn { color: #FAF8F5 } /* Name.Namespace */
.codehilite .nx { color: #FAF8F5 } /* Name.Other */
.codehilite .py { color: #FAF8F5 } /* Name.Property */
.codehilite .nt { color: #C9754A } /* Name.Tag */
.codehilite .nv { color: #FAF8F5 } /* Name.Variable */
.codehilite .ow { color: #C9754A } /* Operator.Word */
.codehilite .pm { color: #BFB9B1 } /* Punctuation.Marker */
.codehilite .w { color: #FAF8F5 } /* Text.Whitespace */
.codehilite .mb { color: #B8976C } /* Literal.Number.Bin */
.codehilite .mf { color: #B8976C } /* Literal.Number.Float */
.codehilite .mh { color: #B8976C } /* Literal.Number.Hex */
.codehilite .mi { color: #B8976C } /* Literal.Number.Integer */
.codehilite .mo { color: #B8976C } /* Literal.Number.Oct */
.codehilite .sa { color: #34D399 } /* Literal.String.Affix */
.codehilite .sb { color: #34D399 } /* Literal.String.Backtick */
.codehilite .sc { color: #34D399 } /* Literal.String.Char */
.codehilite .dl { color: #34D399 } /* Literal.String.Delimiter */
.codehilite .sd { color: #34D399 } /* Literal.String.Doc */
.codehilite .s2 { color: #34D399 } /* Literal.String.Double */
.codehilite .se { color: #34D399 } /* Literal.String.Escape */
.codehilite .sh { color: #34D399 } /* Literal.String.Heredoc */
.codehilite .si { color: #34D399 } /* Literal.String.Interpol */
.codehilite .sx { color: #34D399 } /* Literal.String.Other */
.codehilite .sr { color: #34D399 } /* Literal.String.Regex */
.codehilite .s1 { color: #34D399 } /* Literal.String.Single */
.codehilite .ss { color: #34D399 } /* Literal.String.Symbol */
.codehilite .bp { color: #B8976C } /* Name.Builtin.Pseudo */
.codehilite .fm { color: #D4896A } /* Name.Function.Magic */
.codehilite .vc { color: #FAF8F5 } /* Name.Variable.Class */
.codehilite .vg { color: #FAF8F5 } /* Name.Variable.Global */
.codehilite .vi { color: #FAF8F5 } /* Name.Variable.Instance */
.codehilite .vm { color: #FAF8F5 } /* Name.Variable.Magic */
.codehilite .il { color: #B8976C } /* Literal.Number.Integer.Long */