/* LetsLab blog. Layout: one reading column; each page opens with its URL path as a breadcrumb, lab-note stamp above every title. */
:root{
  --paper:#F4F6F3; --surface:#FFFFFF; --sunk:#E6EBE6; --ink:#17211C; --muted:#5C6A62; --line:#CFD6D0; --accent:#0B6E5A; --accent-soft:#DCEBE6;
  --f-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --f-body:"Newsreader",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",Consolas,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --paper:#0F1513; --surface:#161E1B; --sunk:#1B2521; --ink:#E2E9E4; --muted:#92A199; --line:#27332E; --accent:#5CC4A6; --accent-soft:#17302A; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 19px/1.65 var(--f-body)}
.wrap{max-width:720px;margin:0 auto;padding:0 max(18px,env(safe-area-inset-left,0px))}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.site{border-bottom:1px solid var(--line);background:var(--surface)}
.site .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:16px}
.mark{font:800 24px/1 var(--f-display);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.mark span{color:var(--accent)}
.site nav{display:flex;gap:18px;font:500 14px var(--f-mono)}
.site nav a{color:var(--muted);text-decoration:none}
.site nav a:hover,.site nav a[aria-current]{color:var(--accent)}

.path{font:500 13px var(--f-mono);color:var(--muted);margin:34px 0 14px;word-break:break-all}
.path b{color:var(--accent);font-weight:500}
h1{font:800 clamp(30px,6vw,44px)/1.08 var(--f-display);letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}
h2{font:700 25px/1.2 var(--f-display);letter-spacing:-.015em;margin:38px 0 10px;text-wrap:balance}
h3{font:700 19px/1.3 var(--f-display);margin:26px 0 6px}
p{margin:0 0 18px}
.lede{font-size:21px;color:var(--muted);margin-bottom:26px}
.stamp{font:500 13px var(--f-mono);color:var(--muted);letter-spacing:.02em;margin-bottom:10px}
.stamp b{color:var(--accent);font-weight:600}

.list{list-style:none;padding:0;margin:26px 0 0}
.list li{padding:22px 0;border-top:1px solid var(--line)}
.list h2{margin:0 0 6px;font-size:26px}
.list h2 a{color:var(--ink);text-decoration:none}
.list h2 a:hover{color:var(--accent)}
.list p{margin:0 0 8px;color:var(--muted)}
.tags{display:flex;gap:8px;flex-wrap:wrap;font:500 12.5px var(--f-mono)}
.tags a{text-decoration:none;background:var(--accent-soft);padding:2px 9px;border-radius:999px}

article ul,article ol{padding-left:24px;margin:0 0 18px}
article li{margin:5px 0}
code{font:500 .82em var(--f-mono);background:var(--sunk);padding:2px 6px;border-radius:4px}
pre{background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:14px 16px;overflow-x:auto;font:14px/1.55 var(--f-mono);margin:0 0 20px}
pre code{background:none;padding:0;font-size:inherit}
.tbl{overflow-x:auto;margin:0 0 20px}
table{border-collapse:collapse;width:100%;font:400 16.5px/1.45 var(--f-body)}
th,td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--line)}
th{font:600 12.5px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.note{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:0 0 20px;font-size:17px}
.note b{font-family:var(--f-display)}
.byline{border-top:1px solid var(--line);margin-top:40px;padding-top:18px;color:var(--muted);font-size:17px}
.more{margin-top:14px;font:500 14px var(--f-mono)}

footer{border-top:1px solid var(--line);margin-top:60px;padding:24px 0 50px;color:var(--muted);font:400 14.5px/1.55 var(--f-body)}
footer .row{display:flex;gap:16px;flex-wrap:wrap;font:500 13px var(--f-mono);margin-bottom:10px}
@media (max-width:520px){body{font-size:18px}.list h2{font-size:23px}}