/* tutorial-jel.css - full tutorial chrome (base + roadmap-jel) for legacy pages. Auto-extracted. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:optional;src:url('/www/fonts/ibm-plex/ibm-plex-sans-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:optional;src:url('/www/fonts/ibm-plex/ibm-plex-sans-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:optional;src:url('/www/fonts/ibm-plex/ibm-plex-sans-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:optional;src:url('/www/fonts/ibm-plex/ibm-plex-sans-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:600;font-display:optional;src:url('/www/fonts/ibm-plex/ibm-plex-serif-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:700;font-display:optional;src:url('/www/fonts/ibm-plex/ibm-plex-serif-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:optional;src:url('/www/fonts/ibm-plex/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:optional;src:url('/www/fonts/ibm-plex/ibm-plex-mono-500.woff2') format('woff2')}
*,*::before,*::after{box-sizing:border-box}
html{font-family:sans-serif;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;font-size:18px;line-height:1.7;color:#0d1117;background:#fafbfc}
html body{font-size:18px;line-height:1.7}
p{margin:0 0 15px}
.container{max-width:1170px;margin:0 auto;padding:0 15px}
@media(min-width:1200px){.container{width:1170px}}
.row{margin-left:-15px;margin-right:-15px}.row::after{content:"";display:table;clear:both}
.col-xs-12,.col-sm-2,.col-sm-3,.col-sm-7{position:relative;min-height:1px;padding-left:15px;padding-right:15px;float:left}
.col-xs-12{width:100%}
@media(min-width:768px){.col-sm-2{width:16.667%}.col-sm-3{width:25%}.col-sm-7{width:58.333%}.hidden-xs{display:block!important}}
.hidden-xs{display:none}
.table{width:100%;border-collapse:collapse}.table>thead>tr>th,.table>tbody>tr>td{padding:8px;border-top:1px solid #ddd}
.table-striped>tbody>tr:nth-of-type(odd){background:#f9f9f9}
.btn{display:inline-block;padding:6px 12px;font-size:14px;border-radius:4px;cursor:pointer;border:1px solid transparent}
.btn-primary{color:#fff;background:#1d3158;border-color:#1d3158}.btn-primary:hover{background:#2c4574}
.btn-default{color:#333;background:#fff;border-color:#ccc}
.btn-sm{padding:3px 10px;font-size:12px}
.form-control{display:block;padding:6px 12px;font-size:14px;border:1px solid #ccc;border-radius:4px}
.list-unstyled{list-style:none;padding-left:0}
.img-responsive{max-width:100%;height:auto}
.pull-right{float:right}
a{color:#1d3158;text-decoration:none}a:hover{text-decoration:underline}
/* overflow-x:clip (not hidden) so html/body don't become a
   scrolling container, which would break position:sticky on the
   right TOC rail under layout-v2. */
html,body{overflow-x:clip;max-width:100vw}
#sidebar-nav{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;padding:8px 0}
.breadcrumb-nav{font-size:13.5px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#6c757d;margin-bottom:2px;padding:0}
.breadcrumb-nav a{color:#6c757d;text-decoration:none}
.bc-sep,.breadcrumb-sep{margin:0 5px;color:#757575}
.bc-current,.breadcrumb-current{color:#495057;font-weight:500}
#content h1,#content h2,#content h3,#content h4{font-family:'IBM Plex Serif',Georgia,'Times New Roman',serif}
#content h1{font-weight:700;font-size:2.1em;line-height:1.2;margin:0 0 0.4em 0;letter-spacing:-0.01em;color:#0d1117}
#content h2{font-weight:600;font-size:1.65em;line-height:1.25;margin:2.5em 0 0.6em 0;color:#0d1117;padding-top:0.8em;padding-bottom:6px;border-top:1px solid #d8dce2}
#content h2:first-of-type{border-top:none;margin-top:1.5em}
#content p{line-height:1.75;margin-bottom:1.15em;color:#0d1117}
p.lead{font-size:1.1em;line-height:1.75;color:#4a5160;font-weight:400;border-left:3px solid #1d3158;padding-left:1em;margin:-4px 0 1.15em 0}
.site-masthead{position:sticky;top:0;z-index:30;background:rgba(250,251,252,0.92);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;margin:0 -15px 24px;transition:border-color 0.2s}
.site-masthead.scrolled{border-bottom-color:#d8dce2}
.site-masthead-inner{max-width:1170px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:24px}
.masthead-menu-btn{display:none;background:none;border:1px solid #d8dce2;border-radius:6px;padding:4px 8px;font-size:18px;line-height:1;color:#4a5160;cursor:pointer}
.masthead-wordmark{display:inline-flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;color:#0d1117;text-decoration:none;white-space:nowrap}
.masthead-mark{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#16233a;color:#fff;font-family:'Inter Tight','Inter','IBM Plex Sans',sans-serif;font-weight:700;font-size:18px;line-height:1;letter-spacing:-.03em;flex:none}
.masthead-mark::after{content:'';position:absolute;right:6px;bottom:6px;width:5px;height:5px;border-radius:50%;background:#1f9d5b}
.masthead-tld{color:#757a87}
.masthead-nav{display:flex;gap:4px;flex:1;margin-left:8px}
.masthead-nav-link{font-family:'IBM Plex Sans',sans-serif;color:#4a5160;font-size:14px;font-weight:500;padding:6px 12px;border-radius:6px;text-decoration:none;transition:all 0.15s}
.masthead-nav-link:hover{background:#f1f3f6;color:#0d1117;text-decoration:none}
.masthead-nav-link.active{background:#f1f3f6;color:#0d1117}
.masthead-tools{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* P7 — mock has a `/` kbd hint on the right of the search input.
   Positioned absolutely; the input gets extra right padding so the
   user-typed text doesn't overlap the hint. Pure visual cue — the
   shortcut wiring is intentionally deferred (Ace editor inside
   WebR code blocks uses `/` and would conflict). */
.masthead-search{margin:0;display:flex;align-items:center;position:relative}
.masthead-search input{height:32px;padding:6px 30px 6px 12px;font-size:13px;border:1px solid #d8dce2;border-radius:6px;background:#fff;color:#0d1117;width:160px;font-family:'IBM Plex Sans',sans-serif;transition:border-color 0.15s,box-shadow 0.15s}
.masthead-search .kbd-hint{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  color:#6e7382;background:#eef1f7;border:1px solid #d8dce2;
  border-radius:4px;padding:1px 5px;line-height:1.2;pointer-events:none;
}
html.dark .masthead-search .kbd-hint{
  color:#9aa6c0;background:#1f2a48;border-color:#2c3a62;
}
.masthead-search input:focus{outline:none;border-color:#1d3158;box-shadow:0 0 0 3px rgba(29,49,88,0.10)}
.masthead-icon-btn{background:none;border:1px solid transparent;border-radius:6px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:#4a5160;cursor:pointer;transition:all 0.15s}
.masthead-icon-btn:hover{background:#f1f3f6;color:#0d1117}
.masthead-cta{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:8px;background:linear-gradient(135deg,#1c2c4f,#33508c);color:#fff;font-family:'IBM Plex Sans',sans-serif;font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:filter 0.15s}
.masthead-cta:hover{filter:brightness(1.1);color:#fff;text-decoration:none}
.masthead-cta:link,.masthead-cta:visited,.masthead-cta:focus,.masthead-cta:active{color:#fff}
html.dark .site-masthead{background:rgba(12,13,16,0.85)}
html.dark .site-masthead.scrolled{border-bottom-color:#262a31}
html.dark .masthead-wordmark{color:#e8eaee}
html.dark .masthead-tld{color:#6e7382}
html.dark .masthead-mark{background:#1b2942;color:#fff}
html.dark .masthead-nav-link{color:#b0b5bf}
html.dark .masthead-nav-link:hover,html.dark .masthead-nav-link.active{background:#1a1d22;color:#e8eaee}
.nav-dropdown{position:relative;display:inline-block}
.nav-dropdown-trigger{cursor:pointer}
.nav-dropdown-trigger::after{content:' \25BE';font-size:10px;color:#8a8f99}
.nav-dropdown-panel{display:none;position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:14px 0;box-shadow:0 8px 24px rgba(13,17,23,0.10);min-width:260px;z-index:40;flex-direction:column}
.nav-dropdown-panel::before{content:"";position:absolute;top:-6px;left:0;right:0;height:6px}
.nav-dropdown:hover .nav-dropdown-panel,.nav-dropdown.open .nav-dropdown-panel{display:flex}
.nav-cat{position:relative;display:flex;align-items:center;justify-content:space-between;padding:7px 18px;font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:500;color:#3a3f4a;cursor:pointer;transition:background 0.1s}
.nav-cat:hover{background:#f1f3f6;color:#0d1117}
.nav-cat::after{content:' \25B8';font-size:10px;color:#8a8f99;margin-left:8px}
.nav-sub{display:none;position:absolute;top:0;left:100%;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:14px 18px;box-shadow:0 8px 24px rgba(13,17,23,0.10);min-width:230px;z-index:50}
.nav-sub::before{content:"";position:absolute;top:0;left:-8px;bottom:0;width:8px}
.nav-cat:hover .nav-sub{display:block}
.nav-sub a{display:block;padding:5px 0;font-size:13px;color:#3a3f4a;text-decoration:none;font-weight:400;line-height:1.4}
.nav-sub a:hover{color:#1d3158;text-decoration:underline}
.nav-sub h6{margin:10px 0 4px;font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:600;color:#8a8f99;text-transform:uppercase;letter-spacing:0.06em}
.nav-sub h6:first-child{margin-top:0}
html.dark .nav-dropdown-panel,html.dark .nav-sub{background:#161a1f;border-color:#2a2e35;box-shadow:0 8px 24px rgba(0,0,0,0.45)}
html.dark .nav-cat{color:#c5cad3}
html.dark .nav-cat:hover{background:#1a1d22;color:#fff}
html.dark .nav-sub a{color:#c5cad3}
html.dark .nav-sub a:hover{color:#fff}
html.dark .nav-sub h6{color:#7a808c}
@media (max-width: 768px){.nav-dropdown-panel{min-width:220px;left:auto;right:0}.nav-sub{position:static;border:none;box-shadow:none;padding:6px 0 6px 16px}.nav-cat::after{content:''}}
html.dark .masthead-search input{background:#14161a;border-color:#262a31;color:#e8eaee}
html.dark .masthead-search input:focus{border-color:#92a4d8;box-shadow:0 0 0 3px rgba(146,164,216,0.15)}
html.dark .masthead-icon-btn{color:#b0b5bf}
html.dark .masthead-icon-btn:hover{background:#1a1d22;color:#e8eaee}
hr{height:0;box-sizing:content-box;border:0;border-top:1px solid #eee}
.img-zoomable{cursor:zoom-in;transition:opacity .15s}
.img-lightbox{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10001;background:rgba(0,0,0,.85);cursor:zoom-out;align-items:center;justify-content:center}
.img-lightbox.open{display:flex}
.img-lightbox img{max-width:95vw;max-height:95vh;border-radius:4px;box-shadow:0 4px 24px rgba(0,0,0,.4)}
/* CLS prevention: sidebar component styles (match main.css final state) */
.sidebar-menu{margin:0;padding:0}
.sidebar-tabs{display:flex;gap:0;margin:4px 0 0;border-bottom:1px solid #d8dce2}
.sidebar-tab{flex:1;padding:9px 12px 8px;border:none;background:transparent;font:600 13px 'IBM Plex Sans',sans-serif;color:#757a87;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 0.15s,border-color 0.15s}
.sidebar-tab.active{color:#1d3158;border-bottom-color:#1d3158}
.sidebar-panel{display:none;padding-top:10px}
.sidebar-panel.active{display:block}
.sidebar-tools-list{margin:0;padding:0;list-style:none}
.sidebar-tools-list li a{display:block;padding:5px 10px 5px 24px;font-size:14px;color:#495057;text-decoration:none;border-left:2px solid transparent;border-radius:0 4px 4px 0}
.sidebar-section-header{padding:7px 12px;font-size:15px;font-weight:700;color:#212529;cursor:pointer;border-radius:4px}
.sidebar-chevron{display:inline-block;font-size:10px;margin-right:4px;color:#757575}
.sidebar-section-items{display:none;padding-left:0;margin:2px 0 6px}
.sidebar-section.expanded .sidebar-section-items{display:block}
.sidebar-section-items li{line-height:1.5}
.sidebar-section-items li a{display:block;padding:4px 10px 4px 32px;font-size:14px;color:#495057;text-decoration:none;border-left:2px solid transparent;border-radius:0 4px 4px 0}
.sidebar-divider{margin:12px 0 2px;padding:0 12px 4px 24px;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#9ca3af;border-bottom:1px solid #f0f2f5;list-style:none}
.sidebar-divider:first-child{margin-top:4px}
.progress-dot{display:inline-block;width:10px;height:10px;border-radius:50%;border:1.5px solid #d1d5db;margin-right:7px;vertical-align:middle;flex-shrink:0;position:relative}
/* Empty progress-dot (no status class) reads as an unchecked todo /
   disabled radio next to every sidebar item — visual noise that doesn't
   belong in a nav. Reserve the layout slot but hide the circle until
   the item actually has progress. visibility:hidden (not display:none)
   keeps the width stable when state flips. */
.progress-dot:not(.started):not(.visited):not(.completed){visibility:hidden}
/* CLS prevention: TOC sidebar matches main.css final state */
#toc-wrapper{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;padding-left:14px;border-left:1px solid #e9ecef}
.toc-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;color:#6c757d;margin-bottom:10px;padding-bottom:0}
#toc{margin:0;padding:0}
#toc li{line-height:1.45;margin-bottom:1px}
#toc li a{font-size:13.5px;color:#6c757d;text-decoration:none;display:block;padding:3px 0;border-left:2px solid transparent;padding-left:8px;margin-left:-15px}
#toc li a.toc-active{color:#1d3158;font-weight:600;border-left-color:#1d3158}
/* CLS prevention: engagement strip layout (matches engagement.css) */
.engagement-header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:12px;color:#64748b;letter-spacing:0.01em;margin:0.4em 0 1em;min-height:22px}
.engagement-header:empty{display:none}
/* CLS prevention: progress bar space (matches engagement.css) */
.engagement-progress{min-height:32px;margin:1.2em 0 1.6em}
/* CLS prevention: WebR editor min-height so the static→textarea swap doesn't shift layout */
.webr-editor{min-height:60px}
/* CLS prevention: images in content always reserve aspect ratio */
#content img{max-width:100%;height:auto}

/* =====================================================
   LAYOUT V2 (opt-in via body.layout-v2). Retry 2026-05-29.
   Differences from the first attempt:
     1. Sidebar columns use clamp(180px, 16vw, 260px) so they
        SHRINK on narrow viewports (first attempt used minmax
        which pinned both sides at 260px, squeezing content on
        typical laptops to ~460px).
     2. Sidebar links get overflow-wrap so long tutorial titles
        don't escape the narrower column.
     3. min-width:0 on every grid child so they can shrink.
     4. Right TOC breakpoint raised from 1100px -> 1280px so it
        only shows when the viewport can actually afford it.
     5. The inline-code background restyle is dropped - kept
        current syntax-highlighter behavior.
   All rules scoped under body.layout-v2 so pages without it
   render identically.
   ===================================================== */
body.layout-v2{
  --lv2-bg:#f8f9fb;--lv2-card:#fff;--lv2-ink:#0d1117;
  --lv2-mut:#4b5260;--lv2-faint:#5b6573;
  --lv2-navy:#1c2c4f;--lv2-navy-h:#2d4173;--lv2-navy-soft:#eef1f7;
  --lv2-accent:#2056d2;--lv2-accent-soft:#e9efff;
  --lv2-line:#e4e7ee;--lv2-border:#d4d9e3;
  --lv2-green:#15803d;
  background:var(--lv2-bg);color:var(--lv2-ink);
}
html.dark body.layout-v2{
  --lv2-bg:#0a0f1c;--lv2-card:#0f1525;--lv2-ink:#eef2fa;
  --lv2-mut:#a5afc4;--lv2-faint:#9aa6c0;
  --lv2-navy:#5170b3;--lv2-navy-h:#6587c4;--lv2-navy-soft:#192240;
  --lv2-accent:#7faaff;--lv2-accent-soft:#1a2748;
  --lv2-line:#1f2a48;--lv2-border:#2c3a62;
}

/* Wider container; clamp-based grid that scales with viewport.
   width:auto is REQUIRED because the base critical CSS has
   @media(min-width:1200px){.container{width:1170px}} which would
   otherwise pin width to 1170 and ignore max-width:1340. */
body.layout-v2 .container{max-width:1340px;width:auto;padding:0 22px}
body.layout-v2 .site-masthead-inner{max-width:1340px}
/* The legacy .site-masthead has margin:0 -15px to cancel the
   Bootstrap .container padding of 15px. Under layout-v2 the
   container padding is 22px, so the negative margin leaves a
   7px inset. Zero it so the masthead aligns flush with the
   article shell. */
body.layout-v2 .site-masthead{margin-left:0;margin-right:0}
body.layout-v2 .row{
  display:grid;
  grid-template-columns:
    clamp(180px, 16vw, 260px)
    minmax(0, 1fr)
    clamp(180px, 16vw, 260px);
  gap:0;margin-left:0;margin-right:0;
}
/* Bootstrap inserts .row::before AND .row::after pseudo-elements
   (content:" "; display:table) as a clearfix. Under display:grid
   these pseudos count as grid items. ::before grabs col 1, pushing
   every real child one column to the right and wrapping the last
   child to a new row. The 2026-05-29 first attempt only disabled
   ::after, resulting in nav in col 2, content in col 3, and toc
   wrapping to a new row at col 1 (the bug the user reported as
   "sidebar wide, content narrow"). BOTH pseudos must be killed. */
body.layout-v2 .row::before,
body.layout-v2 .row::after{display:none;content:none}
/* min-width:0 lets grid children shrink below their content's
   intrinsic min-width; without this, long unbreakable text in any
   child forces the column wider than the grid template intended. */
/* Drop Bootstrap's float and width on the legacy .col-sm-* hooks
   so the parent .row's CSS grid owns sizing. DO NOT zero horizontal
   padding here — per-column padding lives in the dedicated rules
   below (sidebar, #content, #toc-sidebar) and gives the article
   the 44px breathing room the mock has. */
body.layout-v2 #nav.col-sm-3,
body.layout-v2 #content.col-sm-7,
body.layout-v2 #toc-sidebar.col-sm-2{
  width:auto!important;float:none!important;
  min-width:0;min-height:0;
}
body.layout-v2 #nav.col-sm-3{
  padding:14px 10px 40px;border-right:1px solid var(--lv2-line);
  position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;
}
/* Inner #sidebar-nav had its own sticky + overflow from the legacy critical
   CSS; under layout-v2 the outer #nav owns scrolling, so flatten the inner
   one to avoid a double scrollbar. */
body.layout-v2 #sidebar-nav{
  position:static;max-height:none;overflow:visible;padding:0;
}
/* Wrap long tutorial titles in the sidebar so they never overflow */
body.layout-v2 #nav a,
body.layout-v2 #nav span,
body.layout-v2 #sidebar-nav a,
body.layout-v2 #sidebar-nav li{
  overflow-wrap:break-word;word-break:break-word;
}
body.layout-v2 #content{padding:24px 44px 60px}

/* S3 — Code-block bottom spacing.
   Default .webr-container margin is 22/22; the dark block visually
   carries a lot of weight, so the next paragraph reads as cramped.
   Lift bottom to 30px under layout-v2. */
body.layout-v2 #content .webr-container{margin-bottom:30px}

/* S7 — Further Reading: convert auto-injected <ul> to a 2-column
   card grid that matches the .rt-grid pattern used elsewhere.
   No HTML/auto_link.py changes needed — pure CSS. */
body.layout-v2 #content #auto-further-reading .further-reading-list{
  list-style:none;padding:0;margin:14px 0 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
body.layout-v2 #content #auto-further-reading .further-reading-list li{margin:0}
body.layout-v2 #content #auto-further-reading .further-reading-list li a{
  display:block;padding:14px 16px;
  background:var(--lv2-card);border:1px solid var(--lv2-border);
  border-radius:8px;color:var(--lv2-ink);
  font-weight:500;font-size:15px;line-height:1.4;
  text-decoration:none;
  transition:border-color .15s,background .15s,transform .15s;
}
body.layout-v2 #content #auto-further-reading .further-reading-list li a:hover{
  border-color:var(--lv2-accent);background:var(--lv2-accent-soft);
  text-decoration:none;transform:translateY(-1px);
}
@media(max-width:820px){
  body.layout-v2 #content #auto-further-reading .further-reading-list{
    grid-template-columns:1fr;
  }
}
body.layout-v2 #toc-sidebar{padding:24px 18px;position:sticky;top:74px;align-self:start}
@media(max-width:1280px){
  body.layout-v2 .row{grid-template-columns:clamp(180px, 18vw, 260px) minmax(0,1fr)}
  body.layout-v2 #toc-sidebar{display:none}
}
@media(max-width:820px){
  body.layout-v2 .row{grid-template-columns:1fr}
  body.layout-v2 #nav{display:none}
  body.layout-v2 #content{padding:20px}
}

/* Typography refresh - sized to mock spec */
body.layout-v2 #content{
  font-size:16.5px;line-height:1.7;color:var(--lv2-ink);
  font-feature-settings:"tnum","ss01","cv11";text-rendering:optimizeLegibility;
}
body.layout-v2 #content p{line-height:1.7;margin:13px 0;color:var(--lv2-ink);text-wrap:pretty}
body.layout-v2 #content h1{
  font-size:38px;font-weight:700;line-height:1.2;letter-spacing:-0.018em;
  margin:10px 0 13px;text-wrap:balance;color:var(--lv2-ink);
}
/* H2: hairline divider + breathing room above. Mock breaks each
   section with a top rule and ~48px space; staging used 34px and no
   divider, leaving sections to blur together. :first-of-type keeps
   the very first H2 flush with the actionbar (no double divider). */
body.layout-v2 #content h2{
  font-size:25px;font-weight:600;line-height:1.25;letter-spacing:-0.018em;
  margin:48px 0 12px;padding-top:32px;border-top:1px solid var(--lv2-line);
  text-wrap:balance;color:var(--lv2-ink);
}
body.layout-v2 #content h2:first-of-type{
  margin-top:24px;padding-top:0;border-top:none;
}
body.layout-v2 #content h3,body.layout-v2 #content h4{
  font-size:18px;font-weight:600;line-height:1.3;margin:24px 0 8px;text-wrap:balance;color:var(--lv2-ink);
}
/* Specificity bump: `body.layout-v2 #content p` (1 id + 1 class
   + 2 elements) was beating `body.layout-v2 p.lead` (2 classes +
   2 elements) and forcing the dek to var(--lv2-ink) instead of
   var(--lv2-mut). Adding #content here matches that specificity. */
body.layout-v2 #content p.lead{
  font-size:18.5px;line-height:1.6;color:var(--lv2-mut);
  border-left:3px solid var(--lv2-navy);padding-left:17px;margin:-2px 0 20px;font-weight:400;
}

/* Body link color: legacy a{color:#1d3158} and Bootstrap .text-muted
   leave inline links almost indistinguishable from body text. Use
   the mock accent so links are obviously clickable. Excludes
   buttons, cards, prev/next nav, and TOC items which have their
   own palette. */
body.layout-v2 #content a:not(.btn):not(.rt-card):not(.pn-link):not(.lv2-anchor):not([class*="toc"]){
  color:var(--lv2-accent);
}
body.layout-v2 #content a:not(.btn):not(.rt-card):not(.pn-link):not(.lv2-anchor):not([class*="toc"]):hover{
  text-decoration:underline;
}

/* Inline <code> palette: match the mock's navy-soft tint instead
   of the legacy purple-blue (#eef vs #eef1f7). */
body.layout-v2 #content :not(pre) > code{
  background:var(--lv2-navy-soft);color:var(--lv2-ink);
  border-radius:4px;padding:2px 5px;font-size:0.92em;
}

/* TOC right rail */
body.layout-v2 #toc-sidebar .toc-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--lv2-faint);margin-bottom:9px}
body.layout-v2 #toc{font-size:13px}
body.layout-v2 #toc li{margin:0;line-height:1.45}
body.layout-v2 #toc li a{
  display:block;padding:5px 0 5px 11px;
  border-left:2px solid var(--lv2-line);
  color:var(--lv2-faint);font-size:13px;
  transition:color .15s,border-color .15s;
}
body.layout-v2 #toc li a:hover{color:var(--lv2-ink)}
body.layout-v2 #toc li a.toc-active{
  border-left-color:var(--lv2-navy);color:var(--lv2-ink);font-weight:600;
}

/* Reading progress bar - uses transform:scaleX so we don't fight any
   containing-block / overflow quirks that can pin a width-% bar to 0. */
.lv2-progress{
  position:fixed;top:0;left:0;width:100vw;height:3px;
  background:var(--lv2-accent,#2056d2);z-index:90;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .1s ease-out;pointer-events:none;
}

/* Heading anchor links (hover-reveal) */
body.layout-v2 #content h2,
body.layout-v2 #content h3,
body.layout-v2 #content h4{position:relative}
body.layout-v2 .lv2-anchor{
  position:absolute;left:-26px;top:50%;transform:translateY(-50%);
  font-size:.55em;color:var(--lv2-faint);text-decoration:none;
  opacity:0;transition:opacity .15s,color .15s;
  cursor:pointer;padding:4px 6px;line-height:1;font-weight:400;
}
body.layout-v2 #content h2:hover .lv2-anchor,
body.layout-v2 #content h3:hover .lv2-anchor,
body.layout-v2 #content h4:hover .lv2-anchor,
body.layout-v2 .lv2-anchor:focus-visible{opacity:1}
body.layout-v2 .lv2-anchor:hover{color:var(--lv2-accent)}
@media(max-width:820px){body.layout-v2 .lv2-anchor{left:0;top:-22px;transform:none}}

/* Focus ring refresh */
body.layout-v2 a:focus-visible,
body.layout-v2 button:focus-visible,
body.layout-v2 input:focus-visible,
body.layout-v2 textarea:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(32,86,210,.22);
  border-radius:4px;
}
html.dark body.layout-v2 a:focus-visible,
html.dark body.layout-v2 button:focus-visible,
html.dark body.layout-v2 input:focus-visible{box-shadow:0 0 0 3px rgba(127,170,255,.22)}

/* Reduced motion: shut everything down for users who request it */
@media (prefers-reduced-motion: reduce){
  body.layout-v2 *,body.layout-v2 *::before,body.layout-v2 *::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}
a{color:#1d3158}a:hover{text-decoration:underline}
li{line-height:1.65}
.MathJax_Display{margin:0}
blockquote p{line-height:1.75;color:#717171}
/* engagement.js renders a meta strip into .engagement-header that
   duplicates the byline (difficulty + time). Hide it; saved-posts-
   button.js reads the data-* attrs directly for the byline. */
.engagement-header{display:none!important}
/* Byline (saved-posts widget rebuilds this after H1+lead, mock-style) */
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13.5px;color:#4b5260;margin:6px 0 16px;line-height:1.5}
/* P1 — bump avatar 26→30 to match mock visual weight. */
.byline .av-sm{width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#1c2c4f,#2d4173);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;flex:none;letter-spacing:.02em}
.byline .who{color:#0d1117;font-weight:600}
.byline .dot{color:#c0c5cf}
.byline .rev{color:#137a3e;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.byline .time{display:inline-flex;align-items:center;gap:4px;color:#6b7280}
.byline .diff{font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;background:#eef1f7;color:#4b5260;
  padding:3px 8px;border-radius:999px;margin-left:2px}

/* Action bar (saved-posts widget injects this after byline) */
.actionbar{display:flex;align-items:center;gap:9px;margin:10px 0 26px;padding:12px 0;
  border-top:1px solid #e4e7ee;border-bottom:1px solid #e4e7ee;flex-wrap:wrap}
.actionbar .act{display:inline-flex;align-items:center;gap:6px;border:1px solid #d4d9e3;
  background:#fff;border-radius:9px;padding:7px 12px;font-size:13px;font-weight:600;
  color:#4b5260;cursor:pointer;font-family:inherit;
  transition:border-color .15s,color .15s,background .15s}
.actionbar .act:hover{border-color:#0a0d14;color:#0a0d14}
.actionbar .act.bookmark-btn[data-saved="1"]{background:#fef3c7;border-color:#f59e0b;color:#92400e}
.actionbar .act.bookmark-btn[data-saved="1"] svg{fill:#f59e0b}
.actionbar .act:disabled{opacity:.55;cursor:wait}
.actionbar-sync{margin-left:auto;font-size:12px;color:#6b7280}
.actionbar-sync a{color:#2056d2;font-weight:600;text-decoration:none}
.actionbar-sync a:hover{text-decoration:underline}

/* Dark-mode overrides for byline + actionbar. The hard-coded #0d1117
   on .who renders invisible on the dark background; the action-bar
   borders and surfaces also need to flip. Tokens (--lv2-ink, --lv2-mut,
   --lv2-line, --lv2-card) already swap under html.dark body.layout-v2;
   we just need to point the hard-coded rules at them under dark. */
html.dark body.layout-v2 .byline{color:var(--lv2-mut)}
html.dark body.layout-v2 .byline .who{color:var(--lv2-ink)}
html.dark body.layout-v2 .byline .dot{color:var(--lv2-faint)}
html.dark body.layout-v2 .byline .time{color:var(--lv2-mut)}
html.dark body.layout-v2 .byline .diff{background:var(--lv2-navy-soft);color:var(--lv2-mut)}
html.dark body.layout-v2 .actionbar{border-top-color:var(--lv2-line);border-bottom-color:var(--lv2-line)}
html.dark body.layout-v2 .actionbar .act{background:var(--lv2-card);border-color:var(--lv2-border);color:var(--lv2-mut)}
html.dark body.layout-v2 .actionbar .act:hover{border-color:var(--lv2-ink);color:var(--lv2-ink)}
html.dark body.layout-v2 .actionbar-sync{color:var(--lv2-mut)}

/* Toast (Share button "Link copied" feedback) */
.rs-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);
  background:#0a0d14;color:#fff;padding:9px 18px;border-radius:8px;font-size:13px;
  font-family:'IBM Plex Sans',sans-serif;z-index:1000;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;box-shadow:0 8px 24px rgba(10,13,20,.25)}
.rs-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Auth-state visibility helpers (used by masthead variants) */
.auth-anon,.auth-user{display:none}
body.state-anon .auth-anon{display:inline-flex;align-items:center}
body.state-pro .auth-user{display:inline-flex;align-items:center;gap:8px}
.masthead-auth-link{font-family:'IBM Plex Sans',sans-serif;color:#4a5160;font-size:13.5px;font-weight:500;padding:6px 10px;border-radius:6px;text-decoration:none;transition:background .15s,color .15s;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.masthead-auth-link:hover{background:#f1f3f6;color:#0d1117;text-decoration:none}
html.dark .masthead-auth-link{color:#c3cad9}
html.dark .masthead-auth-link:hover{background:#1f242c;color:#fff}
.auth-signout.masthead-icon-btn{background:none;border:1px solid #d8dce2;border-radius:6px;padding:4px 9px;font-size:14px;line-height:1;color:#4a5160;cursor:pointer;transition:border-color .15s,color .15s}
.auth-signout.masthead-icon-btn:hover{border-color:#9a1f1f;color:#9a1f1f}
html.dark .auth-signout.masthead-icon-btn{border-color:#262a31;color:#c3cad9}
html.dark .auth-signout.masthead-icon-btn:hover{border-color:#f08989;color:#f08989}
@media(min-width:1200px){.container{width:1170px}}
#nav,#content,#toc-sidebar{box-sizing:border-box}
#content{padding-left:15px;padding-right:15px;overflow-wrap:break-word;word-wrap:break-word;overflow-x:clip}
@media(max-width:767px){#nav{display:none}.masthead-menu-btn{display:inline-flex!important}.masthead-nav{display:none}.masthead-search{display:none}.site-masthead-inner{padding:10px 16px;gap:12px}}
@media(max-width:400px){.masthead-name{font-size:13px}}
.mobile-sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:rgba(0,0,0,0.4)}
.mobile-sidebar-overlay.open{display:block}
.mobile-sidebar-panel{position:fixed;top:0;left:0;bottom:0;width:280px;background:#fff;z-index:10000;overflow-y:auto;padding:16px;box-shadow:2px 0 16px rgba(0,0,0,0.15);transform:translateX(-100%);transition:transform 0.25s ease}
.mobile-sidebar-overlay.open .mobile-sidebar-panel{transform:translateX(0)}
.mobile-sidebar-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:22px;cursor:pointer;color:#666}
/* Mobile top-nav drawer section */
.mnav-section{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #e5e7eb}
.mnav-section:last-child{border-bottom:none}
.mnav-title{font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:600;color:#8a8f99;text-transform:uppercase;letter-spacing:0.06em;margin:0 0 8px}
.mnav-link{display:block;padding:9px 10px;color:#3a3f4a;text-decoration:none;font-size:15px;border-radius:6px;font-family:'IBM Plex Sans',sans-serif}
.mnav-link:hover,.mnav-link:active{background:#f1f3f6;color:#0d1117;text-decoration:none}
.mnav-accordion{padding:0}
.mnav-accordion>summary{padding:9px 10px;cursor:pointer;font-size:15px;font-weight:500;color:#3a3f4a;list-style:none;border-radius:6px;font-family:'IBM Plex Sans',sans-serif;display:flex;align-items:center;justify-content:space-between}
.mnav-accordion>summary::-webkit-details-marker{display:none}
.mnav-accordion>summary::after{content:'\25BE';font-size:11px;color:#8a8f99;transition:transform 0.15s}
.mnav-accordion[open]>summary::after{transform:rotate(180deg)}
.mnav-accordion>summary:hover{background:#f1f3f6}
.mnav-accordion-body{padding:4px 6px 8px 10px}
.mnav-accordion-body .mnav-link{padding:7px 8px;font-size:14px;color:#4a5160}
.mnav-accordion-body h6{margin:10px 0 4px 8px;font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:600;color:#8a8f99;text-transform:uppercase;letter-spacing:0.06em}
html.dark .mobile-sidebar-panel{background:#1e293b}
html.dark .mobile-sidebar-overlay{background:rgba(0,0,0,0.6)}
html.dark .mobile-sidebar-close{color:#94a3b8}
html.dark .mnav-section{border-bottom-color:#334155}
html.dark .mnav-title{color:#7a808c}
html.dark .mnav-link,html.dark .mnav-accordion>summary{color:#c5cad3}
html.dark .mnav-link:hover,html.dark .mnav-link:active,html.dark .mnav-accordion>summary:hover{background:#1a1d22;color:#fff}
html.dark .mnav-accordion-body .mnav-link{color:#b0b5bf}
html.dark .mnav-accordion-body h6{color:#7a808c}

/* ============================================================
   ROADMAP-JEL (Stage 1) - re-skin tutorial pages to match /roadmap/.
   Additive + reversible: delete this block + the Inter <link> to
   restore the IBM Plex look. Scoped to body.layout-v2.
   ============================================================ */
body.layout-v2{
  --lv2-bg:#ffffff;--lv2-card:#ffffff;--lv2-ink:#14161b;--lv2-mut:#4d525b;--lv2-faint:#888e97;
  --lv2-navy:#14161b;--lv2-navy-h:#2f333c;--lv2-navy-soft:#f2f2ee;
  --lv2-accent:#2563a8;--lv2-accent-soft:#eaf1f8;
  --lv2-line:#e9e9e4;--lv2-border:#e0e0da;--lv2-green:#1f7a55;
  background:#ffffff;
}
/* type system -> Inter / Inter Tight / system mono (matches roadmap) */
body.layout-v2,
body.layout-v2 #content{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif!important}
body.layout-v2 #content h1,body.layout-v2 #content h2,
body.layout-v2 #content h3,body.layout-v2 #content h4{
  font-family:'Inter Tight','Inter',sans-serif!important;letter-spacing:-.022em;color:var(--lv2-ink);
}
body.layout-v2 #content h1{letter-spacing:-.03em}
body.layout-v2 #content :not(pre)>code,
body.layout-v2 #content pre,
body.layout-v2 #content pre code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* masthead re-skin to the roadmap .nav look */
body.layout-v2 .site-masthead{background:rgba(252,252,251,.82)}
body.layout-v2 .masthead-wordmark{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:18px}
body.layout-v2 .masthead-name{letter-spacing:-.01em}
body.layout-v2 .masthead-nav-link{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;
  color:#4d525b;background:none;border-radius:0;padding:4px 0;margin:0 11px;position:relative}
body.layout-v2 .masthead-nav-link:hover,body.layout-v2 .masthead-nav-link.active{background:none;color:#14161b}
body.layout-v2 .masthead-nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#14161b}
body.layout-v2 .masthead-cta{background:#14161b;background-image:none;border-radius:10px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:14px;padding:0 17px;height:34px}
body.layout-v2 .masthead-cta:hover{filter:none;transform:translateY(-1px);
  box-shadow:0 18px 40px -18px rgba(20,23,28,.22),0 2px 8px rgba(20,23,28,.06)}
body.layout-v2 .masthead-auth-link{font-family:'Inter',sans-serif;font-weight:600;color:#14161b}
/* Exercises mega-menu (xn-*) typography jel is handled at its source in
   www/practice-nav.css (Inter / Inter Tight / system mono). */
/* remove the faint divider lines (left sidebar + right TOC) */
body.layout-v2 #nav.col-sm-3{border-right:none!important}
#toc-wrapper{border-left:none!important}
/* drop the right-hand TOC on tutorial pages; widen + cap the reading column */
body.layout-v2 .row{grid-template-columns:clamp(210px,18vw,280px) minmax(0,1fr)!important}
body.layout-v2 #toc-sidebar{display:none!important}
/* tighter, roadmap-like container so the content isn't right-heavy */
body.layout-v2 .container{max-width:1200px}
body.layout-v2 .site-masthead-inner{max-width:1200px}
body.layout-v2 #content{max-width:760px;margin:0 auto;padding:30px 44px 96px}
/* ---- reading typography v2 (premium long-form: measure, size, rhythm) ---- */
body.layout-v2 #content{font-size:17.5px;line-height:1.75;font-feature-settings:"kern","liga","calt";color:#20242c}
body.layout-v2 #content p{margin:0 0 1.35em;color:#20242c;text-wrap:pretty}
body.layout-v2 #content h1{font-size:2.55rem;line-height:1.12;margin:6px 0 .4em;letter-spacing:-.032em}
body.layout-v2 #content h2{font-size:1.62rem;line-height:1.24;margin:2.7em 0 .55em;padding-top:0;border-top:none;letter-spacing:-.022em}
body.layout-v2 #content h2:first-of-type{margin-top:1.3em}
body.layout-v2 #content h3,body.layout-v2 #content h4{font-size:1.2rem;line-height:1.35;margin:2em 0 .5em}
body.layout-v2 #content p.lead{font-size:1.3rem;line-height:1.52;color:#565c66;border-left:none;padding-left:0;margin:2px 0 1.5em;font-weight:400}
body.layout-v2 #content ul,body.layout-v2 #content ol{margin:0 0 1.35em;padding-left:1.35em}
body.layout-v2 #content li{margin:.42em 0;line-height:1.72;color:#20242c}
body.layout-v2 #content blockquote{border-left:3px solid #dcdfe4;padding:4px 0 4px 20px;margin:1.7em 0;color:#4d525b;font-style:normal}
body.layout-v2 #content blockquote p{color:#4d525b}
body.layout-v2 #content a:not(.btn){text-underline-offset:2px}
body.layout-v2 #content hr{border-top-color:#e9e9e4;margin:2.4em 0}
/* wide tables scroll inside the column instead of forcing horizontal overflow (esp. mobile) */
body.layout-v2 #content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* ---- sidebar: pythoncompiler-style progress rail, on white ---- */
body.layout-v2 #nav,body.layout-v2 #sidebar-nav{font-family:'Inter',system-ui,sans-serif}
body.layout-v2 .sidebar-section-header{display:flex;align-items:center;gap:7px;padding:9px 8px;border-radius:8px;font-weight:600;font-size:14px;color:#14161b}
body.layout-v2 .sidebar-section-header:hover{background:#f4f4f0}
body.layout-v2 .sidebar-chevron{font-size:9px;color:#9aa1b0;margin:0;transition:transform .15s}
body.layout-v2 .sidebar-section.expanded .sidebar-chevron{transform:rotate(90deg)}
body.layout-v2 .sec-num{color:#9aa1b0;font-weight:600;font-variant-numeric:tabular-nums}
body.layout-v2 .sec-title-t{flex:1}
body.layout-v2 .section-meta{font-size:11px;font-weight:600;color:#888e97;background:#f2f2ee;border-radius:20px;padding:2px 8px;font-variant-numeric:tabular-nums}
body.layout-v2 .section-meta:empty{display:none}
body.layout-v2 .sidebar-section-items > li > a{display:flex;align-items:center;gap:11px;padding:6px 12px 6px 40px;font-size:13.5px;line-height:1.35;color:#4d525b;border-radius:0 8px 8px 0;text-decoration:none}
body.layout-v2 .sidebar-section-items > li > a:hover{background:#f4f4f0;color:#14161b}
/* node ring: always-visible hollow ring; green fill + check once opened/read */
/* ---- minimal progress nodes (thin, flat, quiet) ---- */
body.layout-v2 .sidebar-section-items .progress-dot{visibility:visible!important;width:12px;height:12px;min-width:12px;border:1.5px solid #cdd3dd;border-radius:50%;background:#fff;position:relative;z-index:1;margin:0;transition:border-color .15s}
body.layout-v2 .sidebar-section-items > li > a:hover .progress-dot{border-color:#9aa2b2}
body.layout-v2 .sidebar-section-items .progress-dot.visited,
body.layout-v2 .sidebar-section-items .progress-dot.started{border-color:#33ab70;background:#fff}
body.layout-v2 .sidebar-section-items .progress-dot.visited::after,
body.layout-v2 .sidebar-section-items .progress-dot.started::after{content:"";position:absolute;left:3.2px;top:1.4px;width:2.8px;height:5.6px;border:solid #178a4e;border-width:0 1.4px 1.4px 0;transform:rotate(45deg)}
/* ---- minimal rail (thin hairline) ---- */
body.layout-v2 .sidebar-section-items > li:not(.sidebar-divider){position:relative}
body.layout-v2 .sidebar-section-items > li:not(.sidebar-divider)::before{content:"";position:absolute;left:46.85px;top:0;bottom:0;width:1.5px;background:#e4e7ee;z-index:0}
body.layout-v2 .sidebar-divider + li:not(.sidebar-divider)::before,
body.layout-v2 .sidebar-section-items > li:not(.sidebar-divider):first-child::before{top:calc(50% - 1px)}
body.layout-v2 .sidebar-section-items > li:not(.sidebar-divider):has(+ .sidebar-divider)::before,
body.layout-v2 .sidebar-section-items > li:not(.sidebar-divider):last-child::before{bottom:calc(50% - 1px)}
body.layout-v2 .sidebar-section-items > li:not(.sidebar-divider):has(.progress-dot.visited)::before,
body.layout-v2 .sidebar-section-items > li:not(.sidebar-divider):has(.progress-dot.started)::before{background:#a9d6bf}
/* current-page row + node: quiet accent, no glow/pulse */
body.layout-v2 .sidebar-section-items > li > a.active{background:#eef3fb;color:#14161b;font-weight:600}
body.layout-v2 .sidebar-section-items > li > a.active .progress-dot{border-color:#2563a8;background:#fff}
body.layout-v2 .sidebar-section-items > li > a.active .progress-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#2563a8;border:0;transform:none}
body.layout-v2 .sidebar-section-items > li > a.active .progress-dot.visited,
body.layout-v2 .sidebar-section-items > li > a.active .progress-dot.started{border-color:#33ab70}
body.layout-v2 .sidebar-section-items > li > a.active .progress-dot.visited::after,
body.layout-v2 .sidebar-section-items > li > a.active .progress-dot.started::after{inset:auto;left:3.2px;top:1.4px;width:2.8px;height:5.6px;border:solid #178a4e;border-width:0 1.4px 1.4px 0;border-radius:0;background:none;transform:rotate(45deg)}
/* section-end quiz row: single gold badge + gold 'Quiz' label */
/* kill the legacy graduation-cap emoji ::before (the 'hat') so the row is
   one badge + Quiz, and the marker/text align with the lesson rows */
body.layout-v2 .sidebar-section-items > li.is-quiz > a::before{content:none!important;display:none!important}
body.layout-v2 .sidebar-section-items > li.is-quiz > a{color:#9a7320;font-weight:600}
body.layout-v2 .sidebar-section-items > li.is-quiz > a:hover{color:#7d5d16;background:#f7f2e6}
body.layout-v2 .quiz-marker{display:inline-flex;width:12px;min-width:12px;height:12px;align-items:center;justify-content:center;color:#c8a13a;background:#fff;border-radius:50%;position:relative;z-index:1}
body.layout-v2 .quiz-marker svg{width:13px;height:13px}
/* sub-section dividers */
body.layout-v2 .sidebar-divider{position:relative;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9aa1b0;padding:14px 10px 5px 40px;border-bottom:none;cursor:pointer}
body.layout-v2 .sidebar-divider:hover{color:#6b7280}
/* expand/collapse caret so a collapsed sub-group doesn't look empty.
   toc.js swaps the glyph (down = open, right = collapsed) + toggles the items. */
body.layout-v2 .subsec-chevron{display:inline-block;position:absolute;left:25px;top:15px;font-size:8px;color:#aab0bd;line-height:1;pointer-events:none}
/* tab strip (Posts/Tools) -> Inter + roadmap ink */
body.layout-v2 .sidebar-tab{font-family:'Inter',sans-serif;color:#888e97}
body.layout-v2 .sidebar-tab.active{color:#14161b;border-bottom-color:#14161b}
@media(max-width:820px){
  body.layout-v2 .row{grid-template-columns:1fr!important}
  body.layout-v2 #content{padding:22px 18px 72px;max-width:100%}
  body.layout-v2 #content{font-size:17px}
  body.layout-v2 #content h1{font-size:2rem}
}
/* mobile masthead: drop the dark toggle on small screens + the wordmark
   text on tiny ones so Get-certified + Sign-in never clip off the edge */
@media(max-width:600px){body.layout-v2 #dark-mode-toggle{display:none}}
@media(max-width:480px){body.layout-v2 .masthead-name{display:none}}