/* B2 "Studio, quiet": tutorial page on white (design/b2/boards/B2-ArticleWhite.dc.html),
   applied to every page built from _build/template.html (posts, hubs, business pages).
   Loaded last in <head>; every rule starts with html.b2-post so it outranks the
   template's own layout-v2 rules, main.css, bootstrap and webr.css. */

html.b2-post{
  --pi:#1A2233;--pt:#2E3747;--ps:#3B4558;--pm:#5E6878;--pg:#6B7585;
  --pl:#E1E5EB;--pso:#ECEFF3;--pst:#CFD5DE;--pgr:#F5F7FA;--pa:#5B6B8C;--pah:#46557A;
  --serif:Newsreader,Georgia,serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  background:#FFFFFF;
}
html.b2-post body,html.b2-post body.layout-v2{background:#FFFFFF;color:var(--pt);font-family:var(--sans);font-size:16px;line-height:1.6}
html.b2-post body a:hover{text-decoration:none}

/* ---------- layout: one left rail, the article beside it ---------- */
html.b2-post body .container,html.b2-post body.layout-v2 .container{max-width:1200px;width:auto;margin:0 auto;padding:0 40px}
html.b2-post body .row,html.b2-post body.layout-v2 .row,html.b2-post body.layout-v2.tools-rail .row{
  display:grid !important;grid-template-columns:220px minmax(0,740px) !important;column-gap:64px;justify-content:center;margin:0}
html.b2-post body .row::before,html.b2-post body .row::after{display:none;content:none}
html.b2-post body .b2-rail{grid-column:1;grid-row:1;position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow-y:auto;
  padding:62px 4px 32px 0;scrollbar-width:thin;font-size:14px}
html.b2-post body main#content,html.b2-post body.layout-v2 #content.col-sm-7{grid-column:2;grid-row:1;width:auto !important;float:none !important;min-width:0;
  padding:36px 0 96px !important}
html.b2-post body #nav,html.b2-post body.layout-v2 #nav.col-sm-3,html.b2-post body.layout-v2.tools-rail #nav{
  position:static;height:auto;width:auto !important;float:none !important;min-width:0;padding:0 !important;border:0 !important;overflow:visible}
html.b2-post body #toc-sidebar,html.b2-post body.layout-v2 #toc-sidebar.col-sm-2{
  display:block !important;position:static;width:auto !important;float:none !important;padding:0 !important;margin:0 0 28px}
html.b2-post body #sidebar-nav{position:static;max-height:none;overflow:visible;padding:0}
html.b2-post body .rail-fold{display:none !important}

/* "On this page" */
html.b2-post body #toc-sidebar .toc-title{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--pi)}
html.b2-post body #toc{margin:0;padding:0;list-style:none;border-left:1px solid var(--pl);font-size:14px;line-height:1.4}
html.b2-post body #toc li{margin:0;line-height:1.4}
html.b2-post body #toc li a{display:block;padding:6px 0 6px 15px;border-left:0;color:var(--pm);font-size:14px;text-decoration:none}
html.b2-post body #toc li a:hover{color:var(--pi)}
html.b2-post body #toc li a.toc-active,html.b2-post body #toc li a[aria-current]{margin-left:-1px;padding-left:14px;border-left:2px solid var(--pa);color:var(--pi);font-weight:500}
html.b2-post body #toc ul{margin:0;padding-left:12px;list-style:none}

/* tutorial tracks: the card under "On this page" */
html.b2-post body #sidebar-nav{padding:16px 14px;border-radius:12px;background:var(--pgr);border:1px solid var(--pso)}
html.b2-post body #sidebar-nav:empty{display:none}
html.b2-post body #sidebar-nav .sidebar-menu{margin:0}
html.b2-post body #sidebar-nav .sidebar-section-header{display:flex;align-items:center;gap:6px;padding:7px 0;font-size:14px;font-weight:500;line-height:1.35;color:var(--pi);cursor:pointer}
html.b2-post body #sidebar-nav .sidebar-chevron{font-size:10px;color:var(--pm)}
html.b2-post body #sidebar-nav .sec-num{color:var(--pm);font-weight:400}
html.b2-post body #sidebar-nav .section-meta{margin-left:auto;padding:1px 7px;border-radius:999px;background:#FFFFFF;border:1px solid var(--pl);font-size:11.5px;font-weight:500;color:var(--pm);white-space:nowrap}
html.b2-post body #sidebar-nav .sidebar-section-items{margin:2px 0 8px}
html.b2-post body #sidebar-nav .sidebar-section-items li{line-height:1.4}
html.b2-post body #sidebar-nav .sidebar-section-items li a{display:flex;gap:8px;padding:5px 0;border:0;background:none;font-size:13.5px;color:var(--pm)}
html.b2-post body #sidebar-nav .sidebar-section-items li a:hover,html.b2-post body #sidebar-nav .sidebar-section-items li a.active,
html.b2-post body #sidebar-nav .sidebar-section-items li a[aria-current]{color:var(--pi)}
html.b2-post body #sidebar-nav .sidebar-divider{padding:8px 0 4px;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pm)}
html.b2-post body #sidebar-nav .continue-chip{margin:0 0 12px;padding:12px;border-radius:10px;background:#FFFFFF;border:1px solid var(--pl)}
html.b2-post body #sidebar-nav .continue-chip .chip-label{display:block;font-size:12px;color:var(--pm)}
html.b2-post body #sidebar-nav .continue-chip a{font-size:14px;font-weight:500;color:var(--pi)}

/* reading progress */
html.b2-post body .lv2-progress{height:2px;background:var(--pa)}

/* ---------- the article ---------- */
html.b2-post body #content,html.b2-post body.layout-v2 #content{font-family:var(--sans) !important;font-size:18px;line-height:1.7;color:var(--pt);font-feature-settings:normal}
html.b2-post body #content p,html.b2-post body.layout-v2 #content p{margin:0 0 22px;line-height:1.7;color:var(--pt)}
html.b2-post body #content li{line-height:1.65;margin-bottom:6px}
html.b2-post body #content ul,html.b2-post body #content ol{margin:0 0 22px;padding-left:1.4em}
html.b2-post body #content strong,html.b2-post body #content b{font-weight:600;color:var(--pi)}

html.b2-post body #content .breadcrumb-nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;margin:0 0 36px;padding:0;font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--pm)}
html.b2-post body #content .breadcrumb-nav a{color:var(--pm);text-decoration:underline;text-decoration-color:var(--pst);text-underline-offset:3px}
html.b2-post body #content .breadcrumb-nav a:hover{color:var(--pi)}
html.b2-post body #content .breadcrumb-sep{margin:0 6px;color:var(--pst)}
html.b2-post body #content .breadcrumb-current{color:var(--pm);font-weight:400}

html.b2-post body #content h1,html.b2-post body #content h2,html.b2-post body #content h3{font-family:var(--serif) !important;font-weight:400;color:var(--pi)}
html.b2-post body #content h1,html.b2-post body.layout-v2 #content h1{margin:0 0 18px;font-size:48px;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
html.b2-post body #content h2,html.b2-post body.layout-v2 #content h2,html.b2-post body.layout-v2 #content h2:first-of-type{
  margin:56px 0 16px;padding:0;border:0;font-size:32px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
html.b2-post body #content h3,html.b2-post body.layout-v2 #content h3{margin:40px 0 12px;font-size:25px;line-height:1.25;letter-spacing:-.005em}
html.b2-post body #content h4,html.b2-post body #content h5,html.b2-post body #content h6,
html.b2-post body.layout-v2 #content h4{margin:32px 0 10px;font-family:var(--sans) !important;letter-spacing:0;font-size:18px;font-weight:600;line-height:1.35;color:var(--pi)}
html.b2-post body #content h5,html.b2-post body #content h6{font-size:16px}
html.b2-post body #content .lv2-anchor{color:var(--pst)}
html.b2-post body #content .lv2-anchor:hover{color:var(--pa)}

html.b2-post body #content p.lead,html.b2-post body.layout-v2 #content p.lead{max-width:34em;margin:0 0 24px;padding:0;border:0;font-size:20px;line-height:1.5;color:var(--ps);text-wrap:pretty}

/* byline and the Save / Mark as read / Share bar (saved-posts-button.js) */
html.b2-post body #content .byline,html.b2-post body #content .post-byline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 14px !important;font-size:14px !important;color:var(--pm) !important}
html.b2-post body #content .byline .av-sm{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--pgr);border:1px solid var(--pl);font-size:11px;font-weight:600;color:var(--pi)}
html.b2-post body #content .byline .who,html.b2-post body #content .post-byline strong{font-weight:500;color:var(--pi)}
html.b2-post body #content .byline .dot{color:var(--pst)}
html.b2-post body #content .actionbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 40px;padding:0 0 20px;border:0;border-bottom:1px solid var(--pl)}
html.b2-post body #content .actionbar .act{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--pl);border-radius:8px;background:#FFFFFF;color:var(--pi);font:inherit;font-size:14px;cursor:pointer}
html.b2-post body #content .actionbar .act:hover{background:var(--pgr)}
html.b2-post body #content .actionbar .act[aria-pressed="true"]{border-color:var(--pi);background:var(--pi);color:#FFFFFF}
html.b2-post body #content .actionbar .act svg{width:15px;height:15px}
html.b2-post body #content .actionbar-sync{margin-left:auto;font-size:13px;color:var(--pm)}
html.b2-post body #content .actionbar-sync a{color:var(--pi);font-weight:500}

/* links and inline code */
html.b2-post body #content a:not(.btn):not(.pn-link):not(.cr-link):not(.lv2-anchor):not([class*="toc"]):not(.act),
html.b2-post body.layout-v2 #content a:not(.btn):not(.rt-card):not(.pn-link):not(.lv2-anchor):not([class*="toc"]){
  color:var(--pa);text-decoration:underline;text-decoration-color:var(--pst);text-decoration-thickness:1px;text-underline-offset:3px}
html.b2-post body #content a:not(.btn):not(.pn-link):not(.cr-link):not(.lv2-anchor):not([class*="toc"]):not(.act):hover{color:var(--pah);text-decoration-color:var(--pa)}
html.b2-post body #content :not(pre)>code,html.b2-post body.layout-v2 #content :not(pre)>code{padding:1px 5px;border:0;border-radius:4px;background:var(--pso);color:var(--pi);font-family:var(--mono);font-size:.86em}

/* Code as notebook cells: a Colab-style layout in our colours (owner, 2026-11-08).
   Display-only code is the same grey cell without a run button. */
html.b2-post body #content{--nb-cell:#F6F7F9;--nb-ink:#1F2328;--nb-gutter:50px;overflow-x:visible}
html.b2-post body #content pre:not(.webr-output){margin:4px 0 32px;padding:14px 16px;border:1px solid transparent;border-radius:12px;background:var(--nb-cell);box-shadow:none;
  color:var(--nb-ink);font-family:var(--mono);font-size:13.5px;line-height:1.75;white-space:pre;overflow-x:auto;word-break:normal;word-wrap:normal}
html.b2-post body #content pre code{padding:0;border:0;background:none;color:inherit;font:inherit;white-space:inherit}

/* runnable code (py-init.js / webr.css). The header and its right-hand box are
   layout-transparent (display:contents): the run button sits in the cell's left
   gutter, Copy in its top-right corner, and the "Interactive Python" label stays
   for screen readers only. */
html.b2-post body #content .webr-container{position:relative;margin:4px 0 32px;border:0;border-radius:12px;overflow:visible;background:transparent;box-shadow:none}
html.b2-post body #content .webr-container:focus-within{border-color:transparent;box-shadow:none}
html.b2-post body #content .webr-code-block{position:relative;background:transparent;border:0;border-radius:0;box-shadow:none}
html.b2-post body #content :is(.webr-header,.webr-header-right){display:contents}
html.b2-post body #content .webr-header-left{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.b2-post body #content .webr-copy-btn{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;border:0;border-radius:8px;
  background:transparent;color:var(--pm);opacity:0;transition:opacity .15s ease}
html.b2-post body #content .webr-container:hover .webr-copy-btn,html.b2-post body #content .webr-copy-btn:focus-visible,html.b2-post body #content .webr-copy-btn.copied{opacity:1}
html.b2-post body #content .webr-copy-btn:hover{background:#E9ECF1;color:var(--pi)}
@media (hover:none){html.b2-post body #content .webr-copy-btn{opacity:.85}}
html.b2-post body #content .webr-run-btn,html.b2-post body #content .webr-run-btn.btn-primary{position:absolute;top:13px;left:12px;z-index:2;display:block;width:26px;height:26px;min-width:0;min-height:0;padding:0!important;border:0;border-radius:50%;
  background:#1A2233 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.6 5.7v12.6c0 .5.5.8.9.5l10-6.3c.4-.2.4-.8 0-1l-10-6.3c-.4-.3-.9 0-.9.5z'/%3E%3C/svg%3E") 50% 50%/18px 18px no-repeat;font-size:0!important;line-height:0;color:transparent;box-shadow:none;transform:none;cursor:pointer}
html.b2-post body #content .webr-run-btn *{display:none}
html.b2-post body #content .webr-run-btn:hover:not(:disabled){background-color:#2D3954;transform:none;box-shadow:none}
html.b2-post body #content .webr-run-btn:focus-visible{outline:2px solid #5B6B8C;outline-offset:2px}
html.b2-post body #content .webr-run-btn.running{background:#1A2233;animation:none}
html.b2-post body #content .webr-run-btn.running::after{content:"";position:absolute;inset:6px;border:2px solid rgba(255,255,255,.3);border-top-color:#FFFFFF;border-radius:50%;animation:nb-spin .8s linear infinite}
@keyframes nb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html.b2-post body #content .webr-run-btn.running::after{animation:none}}
html.b2-post body #content .nb-count{position:absolute;top:20px;left:-40px;width:32px;text-align:right;font-family:var(--mono);font-size:11px;line-height:1;color:var(--pm);white-space:pre;pointer-events:none}
html.b2-post body #content .nb-hint{margin:0 0 8px;font-size:13.5px;line-height:1.5;color:var(--pm)}
html.b2-post body #content .webr-editor,html.b2-post body #content .webr-editor-input{background:var(--nb-cell);color:var(--nb-ink);font-family:var(--mono);font-size:13.5px;line-height:1.75;caret-color:var(--nb-ink)}
html.b2-post body #content .webr-editor{border:1px solid transparent;border-radius:12px}
html.b2-post body #content .webr-container:focus-within .webr-editor{border-color:#C9D1DD}
html.b2-post body #content .webr-editor::after{background:linear-gradient(to right,rgba(246,247,249,0),var(--nb-cell))}
html.b2-post body #content .webr-editor-input::selection,html.b2-post body #content .webr-editor ::selection{background:#DCE4F2}
html.b2-post body #content .webr-editor:not(.webr-editor-hydrated),html.b2-post body #content .webr-editor-input{padding:14px 44px 14px var(--nb-gutter)}
html.b2-post body #content .webr-editor .cl::before{display:none}
html.b2-post body #content pre.webr-output{margin:0;padding:10px 16px 4px var(--nb-gutter);border:0;border-radius:0;box-shadow:none;background:transparent;color:var(--nb-ink);font-family:var(--mono);font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-x:auto;max-height:420px}
html.b2-post body #content pre.webr-output::before{display:none}
html.b2-post body #content pre.webr-output:empty{display:none}
html.b2-post body #content .webr-output::-webkit-scrollbar-track{background:transparent}
html.b2-post body #content .webr-output::-webkit-scrollbar-thumb{background:var(--pst)}
html.b2-post body #content .webr-output.has-error{color:#B42318}
html.b2-post body #content .webr-plot-output{background:#FFFFFF;padding-left:var(--nb-gutter)}
/* syntax colours: Colab / VS Code light, for the static render (Pygments) and the editor (Prism). All pass WCAG AA on the cell grey. */
html.b2-post body #content .webr-editor,html.b2-post body #content pre code{color:var(--nb-ink)}
html.b2-post body #content :is(.webr-editor,pre) :is(.k,.kd,.kn,.kr,.kt,.kp,.ow,.token.keyword,.token.important,.token.atrule){color:#AF00DB;font-weight:400}
html.b2-post body #content :is(.webr-editor,pre) :is(.kc,.bp,.token.boolean,.token.null,.token.constant){color:#0000FF}
html.b2-post body #content :is(.webr-editor,pre) :is(.s,.s1,.s2,.sa,.sb,.sc,.sd,.se,.sh,.sx,.sr,.ss,.dl,.token.string,.token.char,.token.regex,.token.attr-value){color:#A31515}
html.b2-post body #content :is(.webr-editor,pre) :is(.si,.token.interpolation .token.punctuation){color:#0000FF}
html.b2-post body #content :is(.webr-editor,pre) :is(.m,.mi,.mf,.mh,.mo,.il,.token.number){color:#098658}
html.b2-post body #content :is(.webr-editor,pre) :is(.c,.c1,.cm,.ch,.cs,.cp,.cpf,.token.comment,.token.prolog,.token.doctype,.token.cdata){color:#008000;font-style:normal}
html.b2-post body #content :is(.webr-editor,pre) :is(.nb,.nf,.fm,.nd,.vm,.token.function,.token.builtin,.token.decorator){color:#795E26}
html.b2-post body #content :is(.webr-editor,pre) :is(.nc,.ne,.token.class-name){color:#267F99}
html.b2-post body #content :is(.webr-editor,pre) :is(.o,.p,.token.operator,.token.punctuation){color:var(--nb-ink)}
html.b2-post body #content :is(.webr-editor,pre) :is(.n,.nn,.nv,.vi,.nx,.na,.nt,.token.variable,.token.property){color:var(--nb-ink)}
html.b2-post body #content :is(.webr-editor,pre) :is(.err){color:#B42318;background:none}
/* "Run all" bar and the first-run note */
html.b2-post body .webr-runall-bar,html.b2-post body .webr-runall-inline{font-family:var(--sans)}
html.b2-post body .webr-runall-btn{border-radius:8px;background:var(--pi);color:#FFFFFF;border:0}
/* first-run note: a quiet light line under the cell, not webr.css's dark band (notebook cells, 2026-11-08) */
html.b2-post body #content .webr-first-run-hint{justify-content:flex-start;margin:6px 0 0;padding:6px 16px 4px var(--nb-gutter);background:transparent;border:0;color:var(--pm);font-family:var(--sans);font-size:13px;text-align:left}
html.b2-post body #content .webr-hint-spinner{border-color:rgba(26,34,51,.18);border-top-color:#1A2233}

/* callouts */
html.b2-post body #content .callout{max-width:680px;box-sizing:border-box;margin:4px 0 30px;padding:18px 22px;border:1px solid var(--pso);border-left:3px solid var(--pa);border-radius:12px;background:var(--pgr);color:var(--pt)}
html.b2-post body #content .callout-label{margin:0 0 4px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--pi)}
html.b2-post body #content .callout-body{font-size:16px;line-height:1.65}
html.b2-post body #content .callout-body p{font-size:16px;line-height:1.65;margin:0 0 10px}
html.b2-post body #content .callout-body p:last-child{margin:0}
html.b2-post body #content .callout-tip{border-left-color:#245E49;background:#F3F9F7;border-color:#E2F0EB}
html.b2-post body #content .callout-tip .callout-label{color:#245E49}
html.b2-post body #content .callout-warning{border-left-color:#995B25;background:#FFF8F0;border-color:#F6E8D8}
html.b2-post body #content .callout-warning .callout-label{color:#7B4A1D}
html.b2-post body #content .callout-note{border-left-color:#125578;background:#F2F8FB;border-color:#E1EEF5}
html.b2-post body #content .callout-note .callout-label{color:#125578}

/* tables */
html.b2-post body #content table,html.b2-post body #content .table{width:100%;margin:4px 0 32px;border-collapse:separate;border-spacing:0;border:1px solid var(--pl);border-radius:12px;overflow:hidden;font-size:15px;line-height:1.5;background:#FFFFFF}
html.b2-post body #content table th,html.b2-post body #content .table>thead>tr>th{padding:10px 14px;border:0;border-bottom:1px solid var(--pl);background:var(--pgr);font-weight:600;color:var(--pi);text-align:left;vertical-align:bottom}
html.b2-post body #content table td,html.b2-post body #content .table>tbody>tr>td{padding:10px 14px;border:0;border-top:1px solid var(--pso);color:var(--pt);vertical-align:top}
html.b2-post body #content table tbody tr:first-child td{border-top:0}
html.b2-post body #content .table-striped>tbody>tr:nth-of-type(odd){background:#FFFFFF}
html.b2-post body #content .table-striped>tbody>tr:nth-of-type(even){background:#FBFCFD}
html.b2-post body #content table.dataframe{font-family:var(--mono);font-size:13px}

/* exercises and other expandable blocks */
html.b2-post body #content details{margin:0 0 20px;padding:0 22px;border:1px solid var(--pl);border-radius:14px;background:#FFFFFF;box-shadow:0 1px 2px rgba(26,34,51,.04)}
html.b2-post body #content details>summary{display:flex;align-items:center;gap:10px;min-height:56px;padding:14px 0;cursor:pointer;list-style:none;font-family:var(--serif);font-size:21px;line-height:1.3;color:var(--pi)}
html.b2-post body #content details>summary::-webkit-details-marker{display:none}
html.b2-post body #content details>summary::before{display:none;content:none}
html.b2-post body #content details>summary:hover{background:none;color:var(--pi)}
html.b2-post body #content details>summary::after{content:"+";margin-left:auto;flex:none;width:28px;height:28px;border-radius:50%;background:var(--pso);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:17px;color:var(--pi);transition:transform .2s}
html.b2-post body #content details[open]>summary::after{transform:rotate(45deg);background:var(--pi);color:#FFFFFF}
html.b2-post body #content details[open]{padding-bottom:6px}
html.b2-post body #content details[open]>summary{border-bottom:1px solid var(--pso);margin-bottom:18px}

/* quotes, rules, media */
html.b2-post body #content blockquote{margin:4px 0 28px;padding:4px 0 4px 20px;border-left:3px solid var(--pst);font-size:18px;color:var(--ps)}
html.b2-post body #content blockquote p:last-child{margin:0}
html.b2-post body #content hr{margin:44px 0;border:0;border-top:1px solid var(--pl)}
html.b2-post body #content img{max-width:100%;height:auto}
html.b2-post body #content img.img-responsive{border-radius:10px}
html.b2-post body #content iframe{max-width:100%;border:0;border-radius:12px}
html.b2-post body #content figure{margin:4px 0 32px}
html.b2-post body #content figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--pm)}

/* closing: continue reading, further reading, previous / next */
html.b2-post body #content .continue-reading-block{margin:56px 0 20px;padding:20px 24px;border:1px solid var(--pso);border-radius:14px;background:var(--pgr)}
html.b2-post body #content .cr-eyebrow{margin:0 0 4px;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--pm)}
html.b2-post body #content .cr-link{font-family:var(--serif);font-size:21px;line-height:1.3;color:var(--pi);text-decoration:none}
html.b2-post body #content .cr-link:hover{text-decoration:underline;text-decoration-color:var(--pst);text-underline-offset:4px}
html.b2-post body #content #auto-further-reading h2{font-size:26px}
html.b2-post body #content #auto-further-reading .further-reading-list li a{padding:14px 16px;border:1px solid var(--pl);border-radius:12px;background:#FFFFFF;color:var(--pi);font-size:15px;font-weight:500;text-decoration:none}
html.b2-post body #content #auto-further-reading .further-reading-list li a:hover{border-color:var(--pst);background:var(--pgr);transform:none}
html.b2-post body #content .prev-next-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:32px 0 0;padding:0;border:0}
html.b2-post body #content .pn-link{display:block;padding:18px 20px;border:1px solid var(--pl);border-radius:14px;background:#FFFFFF;color:var(--pi);text-decoration:none;transition:border-color .2s,box-shadow .2s}
html.b2-post body #content .pn-link:hover{border-color:var(--pst);box-shadow:0 1px 2px rgba(26,34,51,.04),0 12px 28px rgba(26,34,51,.07)}
html.b2-post body #content .pn-next{text-align:right}
html.b2-post body #content .pn-label{display:block;margin:0 0 4px;font-size:13px;font-weight:500;color:var(--pm)}
html.b2-post body #content .pn-title{display:block;font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--pi)}
html.b2-post body #content .pn-placeholder{border:0;background:none}

/* ---------- hub pages (hubs.css): category, section, tag and author pages ---------- */
html.b2-post body.layout-v2 #content .hub-meta{font-size:14px;color:var(--pm)}
html.b2-post body.layout-v2 #content a.hub-chip,html.b2-post body.layout-v2 #content .hub-jump a{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid var(--pst);border-radius:999px;background:#FFFFFF !important;color:var(--pi) !important;font-size:14px;text-decoration:none !important}
html.b2-post body.layout-v2 #content a.hub-chip:hover,html.b2-post body.layout-v2 #content .hub-jump a:hover{background:var(--pgr) !important;color:var(--pi) !important}
html.b2-post body.layout-v2 #content a.hub-chip b,html.b2-post body.layout-v2 #content .hub-jump a b{font-weight:500;color:var(--pm) !important}
html.b2-post body.layout-v2 #content .hub-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0}
html.b2-post body.layout-v2 #content .hub-jump-label{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--pm)}
html.b2-post body.layout-v2 #content .hub-group h2{display:flex;align-items:baseline;gap:10px}
html.b2-post body.layout-v2 #content .hub-group h2 a{color:var(--pi) !important;text-decoration:none !important}
html.b2-post body.layout-v2 #content .hub-count{font-family:var(--sans);font-size:14px;color:var(--pm)}
html.b2-post body.layout-v2 #content .hub-grid{gap:16px}
html.b2-post body.layout-v2 #content .hub-card,html.b2-post body.layout-v2 #content .hub-card.is-runnable{gap:8px;padding:18px 20px;border:1px solid var(--pl);border-radius:14px;background:#FFFFFF;box-shadow:none;transform:none}
html.b2-post body.layout-v2 #content .hub-card:hover{border-color:var(--pst);box-shadow:0 1px 2px rgba(26,34,51,.04),0 12px 28px rgba(26,34,51,.07);transform:none}
html.b2-post body.layout-v2 #content .hub-card-title{margin:0;padding:0;border:0;background:none;font-family:var(--serif) !important;font-size:20px;font-weight:400;line-height:1.3;letter-spacing:0}
html.b2-post body.layout-v2 #content .hub-card-title a{padding:0;border:0;background:none !important;color:var(--pi) !important;text-decoration:none !important}
html.b2-post body.layout-v2 #content .hub-card:hover .hub-card-title a{text-decoration:underline !important;text-decoration-color:var(--pst) !important;text-underline-offset:4px}
html.b2-post body.layout-v2 #content .hub-card-desc{margin:0;font-size:14.5px;line-height:1.55;color:var(--ps)}
html.b2-post body.layout-v2 #content .hub-card-meta{font-size:13px;color:var(--pm)}
html.b2-post body.layout-v2 #content a.hub-card-cat{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--pm) !important;text-decoration:none !important}
html.b2-post body.layout-v2 #content .hub-run{padding:0;border:0;background:none;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--pi)}
html.b2-post body.layout-v2 #content .hub-run::before{content:"";display:inline-block;width:0;height:0;margin-right:5px;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
html.b2-post body.layout-v2 #content .hub-pager a,html.b2-post body.layout-v2 #content .hub-pager span{text-decoration:none !important}

/* ---------- business pages (pages.css) ---------- */
html.b2-post body.layout-v2 #content .pg-kicker{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--pm)}
html.b2-post body.layout-v2 #content .pg-card{border:1px solid var(--pl);border-radius:14px;background:#FFFFFF;box-shadow:none}
html.b2-post body.layout-v2 #content a.pg-btn,html.b2-post body.layout-v2 #content .pg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:8px;font-family:var(--sans);font-size:15px;font-weight:500;text-decoration:none !important}
html.b2-post body.layout-v2 #content a.pg-btn-primary{border:1px solid var(--pi);background:var(--pi) !important;color:#FFFFFF !important}
html.b2-post body.layout-v2 #content a.pg-btn-primary:hover{background:#2A3447 !important;color:#FFFFFF !important}
html.b2-post body.layout-v2 #content a.pg-btn-ghost{border:1px solid var(--pst);background:#FFFFFF !important;color:var(--pi) !important}
html.b2-post body.layout-v2 #content a.pg-btn-ghost:hover{background:var(--pgr) !important;color:var(--pi) !important}
html.b2-post body.layout-v2 #content .pg-cta{margin:48px 0 0;padding:32px;border-radius:16px;background:var(--pi);color:#C9D2E0}
html.b2-post body.layout-v2 #content .pg-cta h2{margin:0 0 8px;color:#FFFFFF;font-size:28px}
html.b2-post body.layout-v2 #content .pg-cta p{color:#C9D2E0}
html.b2-post body.layout-v2 #content .pg-cta a.pg-btn-primary{border-color:#FFFFFF;background:#FFFFFF !important;color:var(--pi) !important}
html.b2-post body.layout-v2 #content .pg-cta a.pg-btn-ghost{border-color:#3A4763;background:transparent !important;color:#FFFFFF !important}
html.b2-post body.layout-v2 #content .pg-cta a.pg-btn-ghost:hover{background:#232D42 !important}
html.b2-post body.layout-v2 #content .pg-t-name a{color:var(--pi) !important;text-decoration:none !important}
html.b2-post body.layout-v2 #content .pg-t-quote{font-family:var(--serif);font-size:21px;line-height:1.45;color:var(--pi)}
html.b2-post body.layout-v2 #content .pg-t-foot a{font-size:14px}
html.b2-post body.layout-v2 #content .pg-stars{color:#A86E1A}
html.b2-post body.layout-v2 #content .pg-video{border-radius:12px;overflow:hidden;background:#161C29}
html.b2-post body.layout-v2 #content .pg-fine,html.b2-post body.layout-v2 #content .pg-meta{font-size:14px;color:var(--pm)}

/* "On this page" for narrow screens (www/b2/b2-post.js) */
html.b2-post body #content .b2-otp{display:none}

/* ---------- tablets and phones ---------- */
@media (max-width:1080px){
  html.b2-post body .container,html.b2-post body.layout-v2 .container{padding:0 32px}
  html.b2-post body .row,html.b2-post body.layout-v2 .row,html.b2-post body.layout-v2.tools-rail .row{grid-template-columns:minmax(0,740px) !important;column-gap:0}
  html.b2-post body main#content,html.b2-post body.layout-v2 #content.col-sm-7{grid-column:1;padding:28px 0 56px !important}
  /* the rail moves under the article: the tracks stay reachable, the in-page list moves to the top */
  html.b2-post body .b2-rail{grid-column:1;grid-row:2;position:static;max-height:none;overflow:visible;padding:0 0 64px}
  html.b2-post body #toc-sidebar,html.b2-post body.layout-v2 #toc-sidebar.col-sm-2{display:none !important}
  html.b2-post body #nav,html.b2-post body.layout-v2 #nav{display:block !important}
  html.b2-post body #content .b2-otp{display:block;margin:0 0 36px;padding:0;border:1px solid var(--pl);border-radius:12px;background:#FFFFFF;box-shadow:none}
  html.b2-post body #content .b2-otp>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:0;padding:0 16px;border:0;background:none;cursor:pointer;list-style:none;font-family:var(--sans) !important;font-size:15px;font-weight:600;color:var(--pi)}
  html.b2-post body #content .b2-otp[open]>summary{margin:0;border:0}
  html.b2-post body #content .b2-otp>summary::-webkit-details-marker{display:none}
  html.b2-post body #content .b2-otp>summary::after{content:"";width:8px;height:8px;margin-right:4px;border-right:1.6px solid var(--pm);border-bottom:1.6px solid var(--pm);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
  html.b2-post body #content .b2-otp[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
  html.b2-post body #content .b2-otp ol{margin:0;padding:4px 16px 14px;list-style:none;border-top:1px solid var(--pso)}
  html.b2-post body #content .b2-otp li{margin:0;line-height:1.4}
  html.b2-post body #content .b2-otp a{display:block;padding:9px 0;font-size:15px;color:var(--ps);text-decoration:none}
  html.b2-post body #content .b2-otp li+li a{border-top:1px solid var(--pso)}
}
@media (max-width:640px){
  html.b2-post body .container,html.b2-post body.layout-v2 .container{padding:0 20px}
  html.b2-post body main#content,html.b2-post body.layout-v2 #content.col-sm-7{padding:20px 0 40px !important}
  html.b2-post body #content,html.b2-post body.layout-v2 #content{font-size:17px}
  html.b2-post body #content .breadcrumb-nav{margin-bottom:22px;font-size:13px}
  html.b2-post body #content h1,html.b2-post body.layout-v2 #content h1{font-size:34px;line-height:1.1;letter-spacing:-.015em}
  html.b2-post body #content p.lead,html.b2-post body.layout-v2 #content p.lead{font-size:18px}
  html.b2-post body #content h2,html.b2-post body.layout-v2 #content h2,html.b2-post body.layout-v2 #content h2:first-of-type{margin:44px 0 14px;font-size:27px}
  html.b2-post body #content h3,html.b2-post body.layout-v2 #content h3{font-size:22px;margin-top:32px}
  html.b2-post body #content .actionbar{margin-bottom:28px}
  html.b2-post body #content .actionbar-sync{margin-left:0;width:100%}
  /* code reaches the screen edges so more of each line shows. The template clips
     #content (overflow-x:clip), which cut those 20px off: the first character of
     every output line and the "O" of OUTPUT (2026-11-08). html and body already
     clip, so the page still never scrolls sideways. */
  html.b2-post body #content{overflow-x:visible}
  html.b2-post body #content pre:not(.webr-output),html.b2-post body #content .webr-container{margin-left:-20px;margin-right:-20px;border-radius:0;border-left:0;border-right:0}
  html.b2-post body #content pre:not(.webr-output){padding:14px 20px;font-size:13px}
  /* phones: the cell starts 32px in, so its run number sits outside it (owner, 2026-11-08); the cell still reaches the right edge */
  html.b2-post body #content{--nb-gutter:46px}
  html.b2-post body #content .webr-code-block{margin-left:32px}
  html.b2-post body #content .webr-editor{border-radius:10px 0 0 10px;border-right:0}
  html.b2-post body #content .webr-run-btn,html.b2-post body #content .webr-run-btn.btn-primary{left:10px}
  html.b2-post body #content .nb-count{top:19px;left:-32px;width:30px;text-align:center;font-size:12px}
  html.b2-post body #content .webr-header-label{font-size:13px}
  html.b2-post body #content .callout{padding:16px 18px}
  html.b2-post body #content table{display:block;max-width:100%;overflow-x:auto;font-size:14px}
  html.b2-post body #content details{padding:0 16px}
  html.b2-post body #content details>summary{font-size:19px}
  html.b2-post body #content .prev-next-nav{grid-template-columns:1fr}
  html.b2-post body #content .pn-next{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  html.b2-post body #content details>summary::after,html.b2-post body #content .b2-otp>summary::after,html.b2-post body #content .pn-link{transition:none}
}