/* ===========================================================================
The canonical ProRealAlgos header. One menu, five sites.
Ported from WebApplication2/site/_build/shell.py on 2026-10-14, when the
second nav row was replaced by the Free Library mega panel. Keep the two in
step: this file and shell.py are the same header written twice.
A consuming page only has to define --pra-header-h and --pra-hairline.
Every other token is used with a literal fallback, because an undefined
var() makes the WHOLE declaration invalid at computed-value time, it does
not fall through to the next name in the list, and this header is dropped
into pages whose token sets differ.
The header floats over the first section (margin-bottom pulls the page up
under it) until it is scrolled or the panel is open. A page that should not
have it floating puts right after it
and styles that div to --pra-header-h.
=========================================================================== */
.pra-header{position:sticky;top:0;z-index:900;background:transparent;
border-bottom:1px solid transparent;
transition:background .25s ease,backdrop-filter .25s ease,border-color .25s ease;
margin-bottom:calc(-1 * var(--pra-header-h))}
.pra-scrolled .pra-header{background:rgba(255,255,255,.95);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border-bottom-color:var(--pra-hairline,#F0F0F0)}
/* An open panel is a white sheet, so the bar above it has to be white too.
Frosted glass over a panel that is itself over the hero reads as a smear. */
.pra-header.pra-lib-open{background:#FFFFFF;-webkit-backdrop-filter:none;backdrop-filter:none}
.pra-header-inner{display:flex;align-items:center;gap:18px;
height:var(--pra-header-h);padding:0 29px}
/* ---- the logo lockup ----------------------------------------------------
.pra-logo is a column, not a row: the wordmark sits above the founding
line. The line starts at the P of the wordmark, not at the candles.
logo-header.png is 333x94 and the wordmark's first ink column is x=130, so
the indent is height * (333/94) * (130/333) = height * 1.383. The negative
margin-top tucks it under the baseline: the ink stops at row 71 of 94, so
23.4% of the rendered height below it is empty space inside the image.
Reclaim that and leave 2px. Both offsets follow --pra-logo-h, so every
breakpoint moves one number and the line cannot drift out of alignment.
The mono stack is written out rather than var(--pra-font-mono) for the
reason given at the top of this file. */
.pra-logo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;
flex:0 0 auto;text-decoration:none;--pra-logo-h:36px}
.pra-logo img{height:var(--pra-logo-h);width:auto;display:block}
.pra-since{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
font-size:7px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
color:#9B9BA0;line-height:1;white-space:nowrap;
margin-left:calc(var(--pra-logo-h) * 1.383);
margin-top:calc(var(--pra-logo-h) * -0.234 + 2px)}
/* ---- the nav ---- */
.topnav{display:flex;align-items:center;flex:1 1 0%;min-width:0}
.nav-panel{display:flex;align-items:center}
.nav-group{display:inline-flex;align-items:center;gap:2px}
.nav-div{width:1px;height:18px;background:var(--pra-line,#E8E8EA);margin:0 14px;flex:0 0 auto}
.navlink{position:relative;display:inline-flex;align-items:center;
padding:10px 13px;font-family:var(--pra-font-sans,'Onest',system-ui,sans-serif);
font-size:15.5px;font-weight:500;color:var(--pra-ink,#0E0E10);
text-decoration:none;white-space:nowrap;transition:color .15s ease}
.navlink::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;
background:var(--pra-ink,#0E0E10);transform:scaleX(0);transform-origin:left;
transition:transform .18s ease}
.navlink:hover::after,.navlink:focus-visible::after{transform:scaleX(1)}
.navlink:focus-visible{outline:2px solid #EC3B3D;outline-offset:2px}
.navlink[aria-current="page"]{font-weight:600}
.navlink[aria-current="page"]::after{transform:scaleX(1)}
/* The Free Library trigger. A real , because it opens a panel rather
than going anywhere, so a screen reader and the keyboard both get the truth. */
.lib-btn{appearance:none;background:none;border:0;cursor:pointer;
font-family:inherit;gap:7px;color:var(--pra-muted,#6B6B72)}
.lib-btn:hover,.pra-lib-open .lib-btn{color:var(--pra-ink,#0E0E10)}
.lib-btn svg{width:11px;height:11px;transition:transform .2s ease}
.pra-lib-open .lib-btn svg{transform:rotate(180deg)}
.pra-lib-open .lib-btn::after{transform:scaleX(1)}
/* On a subdomain the page you are on is a card inside the panel, not a link in
the bar, so the trigger carries the underline on its behalf. */
.pra-header:has(.pra-lib-card[aria-current="page"]) .lib-btn::after{transform:scaleX(1)}
/* ---- the mega panel ---- */
.pra-lib{position:absolute;left:0;right:0;top:100%;
background:var(--pra-bg,#FFFFFF);border-bottom:1px solid var(--pra-line,#E8E8EA);
box-shadow:0 16px 40px rgba(14,14,16,.06);display:none}
.pra-header.pra-lib-open .pra-lib{display:block}
.pra-lib-in{max-width:1512px;margin:0 auto;padding:24px 29px 28px;
display:flex;gap:40px;align-items:flex-start}
.pra-lib-books{flex:0 0 364px;display:flex;flex-direction:column;gap:12px}
.pra-lib-eyebrow{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
color:var(--pra-muted,#6B6B72)}
.pra-lib-covers{display:flex;gap:14px}
.pra-lib-book{display:flex;flex-direction:column;gap:7px;width:112px;
text-decoration:none;color:var(--pra-ink,#0E0E10)}
.pra-lib-book img{display:block;width:100%;height:auto;border-radius:10px;
border:1px solid var(--pra-line,#E8E8EA);
transition:transform .18s ease,box-shadow .18s ease}
.pra-lib-book:hover img{transform:translateY(-2px);box-shadow:0 10px 26px rgba(14,14,16,.14)}
.pra-lib-book .lang{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#EC3B3D}
.pra-lib-book .ttl{font-size:12px;font-weight:600;line-height:1.25}
.pra-lib-book:focus-visible{outline:2px solid #EC3B3D;outline-offset:4px;border-radius:12px}
/* equal rows, so six cards read as one set of six buttons rather than two
rows of different heights. A two line title no longer makes its card
taller than the one beside it. */
.pra-lib-grid{flex:1 1 auto;min-width:0;display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;grid-auto-rows:1fr}
/* Soft fill, not white. Six white cards on a white sheet read as empty space
with lines around it; the fill is what makes them look like something you
can press. Hover lifts them to white, which is the press in reverse. */
.pra-lib-card{border:1px solid var(--pra-line,#E8E8EA);border-radius:16px;
padding:14px 16px;display:flex;flex-direction:column;gap:4px;
text-decoration:none;color:var(--pra-ink,#0E0E10);background:var(--pra-soft,#F6F6F7);
transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.pra-lib-card:hover{background:var(--pra-bg,#FFFFFF);border-color:#D4D4D9;
transform:translateY(-2px);box-shadow:0 8px 22px rgba(14,14,16,.06)}
.pra-lib-card:focus-visible{outline:2px solid #EC3B3D;outline-offset:2px}
.pra-lib-card[aria-current="page"]{border-color:var(--pra-ink,#0E0E10)}
/* figure left, mark right, on one line, so every title starts at the same
height whatever the card says. The ink card ships an empty one to match.
The marks are monochrome and 15px: recognition before reading, not five
coloured badges inside a menu. */
.pra-lib-card .hd{display:flex;align-items:center;justify-content:space-between;
gap:8px;min-height:30px}
.pra-lib-card .n{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1}
/* the mark sits in a tile of its own, so the card has one thing on it that is
not type. The tile is the inverse of the card: white on the soft fill, soft
on the white hover state. */
.pra-lib-card .ic{display:inline-flex;align-items:center;justify-content:center;
flex:none;width:30px;height:30px;border-radius:9px;
background:var(--pra-bg,#FFFFFF);border:1px solid var(--pra-line,#E8E8EA);
color:var(--pra-muted,#6B6B72);
transition:color .15s ease,background .15s ease,border-color .15s ease}
.pra-lib-card .ic svg{width:17px;height:17px;display:block}
.pra-lib-card:hover .ic,.pra-lib-card:focus-visible .ic{color:var(--pra-ink,#0E0E10);
background:var(--pra-soft,#F6F6F7);border-color:#DEDEE2}
/* on the ink card the mark is white, hover included: the hover rules above
would otherwise paint it near-black on a near-black card. */
.pra-lib-card.is-ink .ic,.pra-lib-card.is-ink:hover .ic{color:#FFFFFF;
background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
.pra-lib-card .t{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.pra-lib-card .d{font-size:12px;line-height:1.4;color:var(--pra-muted,#6B6B72)}
.pra-lib-card.is-ink{background:var(--pra-ink,#0E0E10);border-color:var(--pra-ink,#0E0E10);color:#FFFFFF}
.pra-lib-card.is-ink .d{color:rgba(255,255,255,.62)}
.pra-lib-card.is-ink:hover{background:#000000;border-color:#000000}
.pra-lib-card .go{display:inline-flex;align-items:center;gap:6px}
.pra-lib-card .go svg{width:13px;height:13px;flex:none}
/* ---- account, CTA, burger ---- */
.pra-account{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:50%;
background:var(--pra-soft,#F6F6F7);border:1px solid var(--pra-line,#E8E8EA);
color:var(--pra-muted,#6B6B72);text-decoration:none;
transition:background .15s ease,color .15s ease,border-color .15s ease}
.pra-account:hover{background:#EFEFF1;color:var(--pra-ink,#0E0E10);border-color:#D9D9DD}
.pra-account:focus-visible{outline:2px solid #EC3B3D;outline-offset:2px}
.pra-account svg{width:18px;height:18px;display:block}
.pra-cta{flex:0 0 auto;display:inline-flex;align-items:center;height:44px;
padding:0 22px;border-radius:999px;
background:var(--pra-ink,#0E0E10);color:#FFFFFF;text-decoration:none;
font-family:var(--pra-font-sans,'Onest',system-ui,sans-serif);
font-size:15px;font-weight:600;white-space:nowrap;
transition:background .15s ease,transform .1s ease}
.pra-cta:hover{background:#000000}
.pra-cta:active{transform:scale(.98)}
.pra-cta:focus-visible{outline:2px solid #EC3B3D;outline-offset:2px}
.nav-toggle{display:none;order:3;width:40px;height:40px;padding:0;
background:none;border:0;cursor:pointer;border-radius:10px;
align-items:center;justify-content:center;flex:0 0 auto}
.nav-toggle:focus-visible{outline:2px solid #EC3B3D;outline-offset:2px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--pra-ink,#0E0E10);
position:relative;transition:background .15s ease}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;
width:20px;height:2px;background:var(--pra-ink,#0E0E10);transition:transform .2s ease}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.pra-nav-open .nav-toggle span{background:transparent}
.pra-nav-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
.pra-nav-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
/* ---- the language pill ----
Literal colours: this block sits alongside scoped page CSS where the :root
custom properties are not guaranteed to resolve. */
.pra-lang{display:flex;align-items:center;flex:0 0 auto;margin-left:8px}
.pra-lang-pill{display:inline-flex;align-items:center;gap:8px;height:34px;
padding:0 13px 0 5px;box-sizing:border-box;
font-family:'Onest',system-ui,sans-serif;font-size:13.5px;font-weight:500;
color:#6B6B72;text-decoration:none;white-space:nowrap;
background:#F6F6F7;border:1px solid #E8E8EA;border-radius:999px;
transition:background .15s ease,color .15s ease,border-color .15s ease}
.pra-lang-pill:hover{background:#EFEFF1;color:#0E0E10;border-color:#D9D9DD}
.pra-lang-pill:focus-visible{outline:2px solid #EC3B3D;outline-offset:2px}
.pra-lang-pill[hidden]{display:none}
.pra-flag{width:24px;height:24px;display:block;flex:0 0 auto;border-radius:50%}
@media (max-width:1400px){
.pra-header-inner{padding:0 18px;gap:14px}
.navlink{padding:10px 11px;font-size:15px}
.navlink::after{left:11px;right:11px}
.nav-div{margin:0 10px}
.pra-logo{--pra-logo-h:32px}
.pra-lib-in{gap:30px;padding:22px 18px 26px}
.pra-lib-books{flex-basis:318px}
.pra-lib-book{width:97px}
}
@media (max-width:1180px){
/* One more notch of tightening before the hamburger, the same one
shell.py makes: German and Spanish run about 80px wider than English. */
.pra-header-inner{gap:10px}
.navlink{padding:10px 8px;font-size:14px}
.navlink::after{left:8px;right:8px}
.nav-div{margin:0 8px}
.pra-lang-name{display:none}
.pra-lang-pill{width:34px;padding:0;justify-content:center}
.pra-lib-books{flex-basis:276px}
.pra-lib-book{width:83px}
.pra-lib-grid{gap:9px}
.pra-lib-card{padding:12px 14px}
}
/* Below here the nav collapses behind the hamburger. The mega panel stops
being a panel and becomes a section of the dropdown: same markup, same
links, no covers, because two book jackets in a phone menu are decoration
nobody scrolled for. */
@media (max-width:1040px){
.pra-header{background:rgba(255,255,255,.95);
border-bottom-color:var(--pra-hairline,#F0F0F0);margin-bottom:0}
.pra-header-inner{flex-wrap:wrap;height:auto;min-height:var(--pra-header-h);padding:10px 16px}
.pra-logo{margin-right:auto;--pra-logo-h:30px}
.nav-toggle{display:inline-flex}
.topnav{order:4;flex-basis:100%}
.nav-panel{display:none;width:100%;flex-direction:column;align-items:stretch;padding:4px 0 10px}
.pra-nav-open .nav-panel{display:flex}
.nav-group{flex-direction:column;align-items:stretch;gap:0}
.navlink{padding:13px 6px;font-size:16px}
.navlink::after{left:6px;right:auto;width:22px;bottom:8px}
.nav-div{width:100%;height:1px;margin:8px 0}
.lib-btn{justify-content:space-between;color:var(--pra-ink,#0E0E10)}
.pra-lib{position:static;display:none;box-shadow:none;border-bottom:0;
border-top:1px solid var(--pra-line,#E8E8EA);margin-top:8px}
.pra-header.pra-lib-open .pra-lib{display:none}
.pra-nav-open .pra-header.pra-lib-open .pra-lib{display:block}
.pra-lib-in{display:block;padding:14px 0 6px}
.pra-lib-books{display:none}
.pra-lib-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pra-lib-card{padding:14px 16px;border-radius:16px}
.pra-lib-card .n{font-size:17px}
.pra-lib-card .d{display:none}
/* the spacer is for a floating header; below here the header is in flow */
.pra-header-spacer{display:none}
}
@media (max-width:510px){
.pra-header-inner{padding:8px 14px;gap:10px}
.pra-logo{--pra-logo-h:27px}
.pra-account{width:30px;height:30px}
.pra-cta{height:40px;padding:0 16px;font-size:14px}
.pra-lib-grid{grid-template-columns:minmax(0,1fr)}
.pra-lib-card .d{display:block}
}
/* ---- the fit cascade, from pra-header.js --------------------------------
A fixed breakpoint cannot know how wide a translation is: the same links
run wider in German and Dutch than in English. pra-header.js measures the
nav against the room it actually has and applies these in order, cheapest
first, before the burger ever has to take over. */
/* Step one: the pill drops its name and keeps its flag, worth about 67px. */
.pra-lang-tight .pra-lang-name{display:none}
.pra-lang-tight .pra-lang-pill{width:34px;padding:0;justify-content:center}
/* Step two: tighter than any breakpoint goes on its own, so that it still
buys width below 1400px where the first reduction has already been made. */
.pra-nav-dense .pra-header-inner{gap:10px}
.pra-nav-dense .navlink{padding:10px 8px;font-size:14px}
.pra-nav-dense .navlink::after{left:8px;right:8px}
.pra-nav-dense .nav-div{margin:0 6px}
/* Step three: the burger, at whatever width the links stop fitting. Everything
the 1040px block does is repeated here so the two paths collapse to exactly
the same header, the spacer included: a cramped header is in flow, and a
spacer under one puts 70px of white at the top of the page. */
.pra-nav-cramped .pra-header{background:rgba(255,255,255,.95);
border-bottom-color:var(--pra-hairline,#F0F0F0);margin-bottom:0}
.pra-nav-cramped .pra-header-spacer{display:none}
.pra-nav-cramped .pra-header-inner{flex-wrap:wrap;height:auto;
min-height:var(--pra-header-h);padding:10px 16px}
.pra-nav-cramped .pra-logo{margin-right:auto;--pra-logo-h:30px}
.pra-nav-cramped .nav-toggle{display:inline-flex}
.pra-nav-cramped .topnav{order:4;flex-basis:100%}
.pra-nav-cramped .nav-panel{display:none;width:100%;flex-direction:column;
align-items:stretch;padding:4px 0 10px}
.pra-nav-cramped.pra-nav-open .nav-panel{display:flex}
.pra-nav-cramped .nav-group{flex-direction:column;align-items:stretch;gap:0}
.pra-nav-cramped .navlink{padding:13px 6px;font-size:16px}
.pra-nav-cramped .navlink::after{left:6px;right:auto;width:22px;bottom:8px}
.pra-nav-cramped .nav-div{width:100%;height:1px;margin:8px 0}
.pra-nav-cramped .lib-btn{justify-content:space-between;color:var(--pra-ink,#0E0E10)}
.pra-nav-cramped .pra-lib{position:static;display:none;box-shadow:none;border-bottom:0;
border-top:1px solid var(--pra-line,#E8E8EA);margin-top:8px}
.pra-nav-cramped .pra-header.pra-lib-open .pra-lib{display:none}
.pra-nav-cramped.pra-nav-open .pra-header.pra-lib-open .pra-lib{display:block}
.pra-nav-cramped .pra-lib-in{display:block;padding:14px 0 6px}
.pra-nav-cramped .pra-lib-books{display:none}
.pra-nav-cramped .pra-lib-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pra-nav-cramped .pra-lib-card{padding:14px 16px;border-radius:16px}
.pra-nav-cramped .pra-lib-card .d{display:none}
.pra-header-spacer{height:var(--pra-header-h)}
:root{--pra-header-h:70px;--pra-hairline:#F0F0F0;
--pra-bg:#FFFFFF; --pra-ink:#0E0E10; --pra-red:#EC3B3D; --pra-green:#3DC574;
--pra-muted:#6B6B72; --pra-line:#E8E8EA; --pra-soft:#F6F6F7;
--pra-font-sans:'Onest',system-ui,-apple-system,sans-serif;
--pra-font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
--pra-r-card:22px; --pra-r-pill:999px; --pra-r-input:12px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--pra-font-sans);color:var(--pra-ink);background:var(--pra-bg);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
/* Header */
.global-nav-embed{flex:1;min-width:0;height:44px;overflow:hidden;display:flex;align-items:center}
.global-nav-embed iframe{display:block;width:100%;height:67px;border:0}
.site-header{border-bottom:1px solid var(--pra-line);background:var(--pra-bg);position:sticky;top:0;z-index:50}
.site-header-inner{display:flex;align-items:center;gap:32px;padding:12px 50px;max-width:none;margin:0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand-mark{width:28px;height:28px;border-radius:7px;background:var(--pra-ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;font-family:var(--pra-font-mono)}
.brand-dot{width:6px;height:6px;border-radius:50%;background:var(--pra-red);display:inline-block;margin-left:2px}
.primary-nav{display:flex;gap:4px;flex:1;margin-left:8px}
.primary-nav a{padding:8px 14px;border-radius:var(--pra-r-pill);font-size:14px;font-weight:500;color:var(--pra-muted)}
.primary-nav a:hover{color:var(--pra-ink);background:var(--pra-soft)}
.primary-nav a.active{color:var(--pra-ink);background:var(--pra-soft)}
.header-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.header-search{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--pra-r-input);border:1px solid var(--pra-line);background:var(--pra-bg);color:var(--pra-muted);font-size:13px;min-width:260px;cursor:text;position:relative}
.header-search:hover,.header-search:focus-within{border-color:var(--pra-ink)}
.header-search input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--pra-ink);min-width:0}
.header-search input::placeholder{color:var(--pra-muted)}
.hs-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--pra-bg);border:1px solid var(--pra-line);border-radius:12px;box-shadow:0 8px 24px rgba(14,14,16,.08);max-height:320px;overflow-y:auto;display:none;z-index:60}
.hs-results.open{display:block}
.hs-results a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 14px;font-size:13px;color:var(--pra-ink);text-decoration:none;font-family:var(--pra-font-mono)}
.hs-results a:hover,.hs-results a.sel{background:var(--pra-soft)}
.hs-results .hs-cat{font-size:10px;color:var(--pra-muted);text-transform:uppercase;letter-spacing:.08em}
.hs-empty{padding:10px 14px;font-size:12px;color:var(--pra-muted)}
.brand{text-decoration:none;color:inherit}
.brand img{height:45px;width:auto;display:block}
.kbd{padding:2px 6px;border-radius:4px;background:var(--pra-soft);border:1px solid var(--pra-line);font-size:11px;color:var(--pra-muted);font-family:var(--pra-font-mono)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;font-family:var(--pra-font-sans);font-size:14px;font-weight:600;border-radius:var(--pra-r-pill);border:0;cursor:pointer;transition:transform 160ms ease,box-shadow 160ms ease;text-decoration:none}
.btn-primary{background:var(--pra-ink);color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(14,14,16,.18)}
.btn-secondary{background:transparent;color:var(--pra-ink);border:1px solid var(--pra-line)}
.btn-secondary:hover{background:var(--pra-soft)}
/* Doc page layout */
.doc-layout{display:grid;grid-template-columns:260px minmax(0,1fr) 220px;gap:48px;max-width:1400px;margin:0 auto;padding:40px 24px 80px}
/* The reference tells you what an instruction does. It cannot tell you whether
the strategy is worth writing, so every page points at the programme that
can. Left rail on wide screens, inline under the body on a phone. */
.learnbox{display:block;margin-top:28px;padding:16px 18px;border:1px solid var(--pra-line);border-radius:14px;text-decoration:none}
.learnbox:hover{background:var(--pra-soft)}
.learnbox .lb-k{font-family:var(--pra-font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--pra-red);margin:0 0 6px}
.learnbox .lb-t{font-size:14px;font-weight:600;margin:0;color:var(--pra-ink)}
.learnbox .lb-d{font-size:12.5px;line-height:1.5;color:var(--pra-muted);margin:5px 0 0}
.toc-left{position:sticky;top:90px;align-self:start;font-size:14px;max-height:calc(100vh - 110px);overflow-y:auto}
.toc-left h4{font-family:var(--pra-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pra-muted);margin:0 0 10px;font-weight:500}
.toc-left ul{list-style:none;padding:0;margin:0 0 24px}
.toc-left li a{display:block;padding:5px 10px;border-radius:8px;color:var(--pra-muted);font-size:13px}
.toc-left li a:hover{background:var(--pra-soft);color:var(--pra-ink)}
.toc-left li a.active{background:var(--pra-ink);color:#fff}
.breadcrumb{font-size:13px;color:var(--pra-muted);margin-bottom:24px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.breadcrumb a{color:var(--pra-muted)}
.breadcrumb a:hover{color:var(--pra-ink)}
.breadcrumb .sep{color:var(--pra-line)}
.breadcrumb .current{color:var(--pra-ink)}
.hero{margin-bottom:36px}
.eyebrow{font-family:var(--pra-font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pra-muted);margin-bottom:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.eyebrow .sep{opacity:.4}
h1.doc-title{font-family:var(--pra-font-mono);font-weight:600;font-size:clamp(48px,6vw,72px);line-height:1;letter-spacing:-.02em;margin:0 0 16px}
.lede{font-size:18px;color:var(--pra-muted);max-width:680px;margin:0;line-height:1.5}
/* Sections in doc body */
.doc-body{font-size:16px;line-height:1.7}
.doc-body h2{font-family:var(--pra-font-sans);font-weight:700;font-size:28px;letter-spacing:-.015em;margin:48px 0 16px;line-height:1.2;scroll-margin-top:96px}
.doc-body h3{font-weight:600;font-size:18px;margin:28px 0 10px;letter-spacing:-.01em}
.doc-body p{margin:0 0 14px;color:var(--pra-ink)}
.doc-body ul{margin:8px 0 20px;padding-left:22px;color:var(--pra-ink)}
.doc-body ul li{margin:8px 0}
.doc-body a.inline,.doc-body p a,.doc-body li a{color:var(--pra-ink);border-bottom:1px solid var(--pra-line)}
.doc-body a:hover{border-bottom-color:var(--pra-ink)}
.doc-body code{font-family:var(--pra-font-mono);font-size:.86em;background:var(--pra-soft);padding:1px 6px;border-radius:5px;border:1px solid var(--pra-line)}
.doc-body a.rel-link{border-bottom:0}
.doc-body a.rel-link code{color:var(--pra-red);border-color:var(--pra-red);background:var(--pra-bg);cursor:pointer;transition:background .12s,color .12s}
.doc-body a.rel-link:hover code{background:var(--pra-red);color:#fff;border-color:var(--pra-red)}
.doc-body strong{font-weight:600;color:var(--pra-ink)}
/* Callouts */
.callout{display:flex;flex-direction:column;gap:6px;padding:18px 22px;border-radius:var(--pra-r-card);border:1px solid var(--pra-line);margin:20px 0;background:var(--pra-soft)}
.callout-tldr{background:rgba(61,197,116,.06);border-color:rgba(61,197,116,.3)}
.callout-tldr .callout-label{color:var(--pra-green)}
.callout-scope{background:rgba(236,59,61,.05);border-color:rgba(236,59,61,.3)}
.callout-scope .callout-label{color:var(--pra-red)}
.callout-label{font-family:var(--pra-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.callout-body{font-size:15px;line-height:1.55;color:var(--pra-ink)}
.callout-body code{background:rgba(255,255,255,.7);border:1px solid var(--pra-line)}
/* Code blocks */
.code-block{margin:18px 0;border:1px solid var(--pra-line);border-radius:14px;overflow:hidden;background:var(--pra-bg)}
.code-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--pra-soft);border-bottom:1px solid var(--pra-line);font-family:var(--pra-font-mono);font-size:11px;letter-spacing:.06em;color:var(--pra-muted);text-transform:uppercase}
.code-copy{font-family:var(--pra-font-sans);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;padding:4px 12px;border-radius:var(--pra-r-pill);border:1px solid var(--pra-line);background:var(--pra-bg);color:var(--pra-ink);cursor:pointer}
.code-copy:hover{background:var(--pra-ink);color:#fff;border-color:var(--pra-ink)}
.code-block pre{margin:0;padding:16px 18px;overflow:auto;font-family:var(--pra-font-mono);font-size:14px;line-height:1.6;background:var(--pra-bg)}
.code-block code{padding:0;background:transparent;border:0;font-size:14px;color:var(--pra-ink)}
.tk-kw{color:var(--pra-red);font-weight:500}
.tk-fn{color:#1a73e8}
.tk-num{color:#0E0E10;font-weight:500}
.tk-com{color:var(--pra-muted);font-style:italic}
/* Table */
.table-wrap{margin:16px 0;border:1px solid var(--pra-line);border-radius:14px;overflow:hidden}
.doc-body table{width:100%;border-collapse:collapse;font-size:14px}
.doc-body th{text-align:left;padding:12px 16px;background:var(--pra-soft);font-family:var(--pra-font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--pra-muted);border-bottom:1px solid var(--pra-line)}
.doc-body td{padding:12px 16px;border-bottom:1px solid var(--pra-line);vertical-align:top;color:var(--pra-ink)}
.doc-body tr:last-child td{border-bottom:0}
.doc-body td:first-child{font-family:var(--pra-font-mono);font-size:13px}
.doc-body td code{background:var(--pra-bg);border:0;padding:0}
/* Right TOC */
.toc-right{position:sticky;top:90px;align-self:start;font-size:13px}
.toc-right h4{font-family:var(--pra-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pra-muted);margin:0 0 12px;font-weight:500}
.toc-right ul{list-style:none;padding:0;margin:0}
.toc-right li a{display:block;padding:6px 0 6px 14px;font-size:13px;color:var(--pra-muted);border-left:2px solid var(--pra-line)}
.toc-right li a:hover{color:var(--pra-ink);border-left-color:var(--pra-ink)}
/* Footer */
.page-footer{border-top:1px solid var(--pra-line);padding:32px 24px;font-size:13px;color:var(--pra-muted);max-width:1400px;margin:0 auto}
.page-footer p{margin:4px 0}
.page-footer a{border-bottom:1px solid var(--pra-line)}
.page-footer a:hover{border-bottom-color:var(--pra-ink);color:var(--pra-ink)}
/* Index page */
.index-hero{padding:80px 24px 28px;text-align:center;max-width:900px;margin:0 auto}
.index-hero .eyebrow{justify-content:center}
.index-hero h1{font-family:var(--pra-font-sans);font-weight:700;font-size:clamp(40px,5vw,64px);line-height:1.05;letter-spacing:-.02em;margin:0 0 18px}
.index-hero .red{color:var(--pra-red)}
.index-hero p{font-size:18px;color:var(--pra-muted);max-width:600px;margin:0 auto 32px;line-height:1.5}
.index-search{display:flex;align-items:center;gap:12px;max-width:580px;margin:0 auto;padding:14px 20px;border-radius:var(--pra-r-pill);border:1px solid var(--pra-line);background:var(--pra-bg);box-shadow:0 2px 14px rgba(14,14,16,.04)}
.index-search input{flex:1;border:0;outline:0;font:inherit;background:transparent;font-size:16px;color:var(--pra-ink)}
.index-search input::placeholder{color:var(--pra-muted)}
.index-search-icon{color:var(--pra-muted)}
.index-search .kbd{flex-shrink:0}
.facets{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px auto 0;max-width:900px;padding:0 24px}
.facets + .index-section{padding-top:24px}
.facet{padding:8px 14px;border-radius:var(--pra-r-pill);font-family:var(--pra-font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--pra-soft);color:var(--pra-ink);cursor:pointer;border:0;font-weight:500}
.facet:hover{background:var(--pra-ink);color:#fff}
.facet.active{background:var(--pra-ink);color:#fff}
.facet .count{margin-left:6px;opacity:.55}
.index-section{max-width:1200px;margin:0 auto;padding:48px 24px}
.section-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;gap:16px}
.section-title{font-family:var(--pra-font-sans);font-weight:700;font-size:22px;letter-spacing:-.01em;margin:0}
.section-count{font-family:var(--pra-font-mono);font-size:12px;color:var(--pra-muted);letter-spacing:.04em}
.keyword-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.kw-card{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;border-radius:12px;border:1px solid var(--pra-line);background:var(--pra-bg);transition:border-color 120ms ease,transform 120ms ease}
.kw-card:hover{border-color:var(--pra-ink);transform:translateY(-1px)}
.kw-card.live{border-color:var(--pra-ink)}
.kw-card .kw-name{font-family:var(--pra-font-mono);font-size:13px;font-weight:500;color:var(--pra-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kw-card .kw-badge{font-family:var(--pra-font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--pra-muted);flex-shrink:0}
.kw-card.live .kw-badge{color:var(--pra-green);font-weight:500}
.intro-note{max-width:680px;margin:0 auto 48px;padding:18px 22px;border-radius:var(--pra-r-card);background:var(--pra-soft);font-size:14px;color:var(--pra-muted);text-align:center}
.intro-note strong{color:var(--pra-ink);font-weight:600}
/* Mobile */
@media (max-width: 1200px){
.site-header-inner{flex-wrap:wrap}
.brand{order:1}
.header-right{order:2;margin-left:auto}
.global-nav-embed{order:3;flex:0 0 100%;height:52px}
}
@media (max-width: 1024px){
.doc-layout{grid-template-columns:200px minmax(0,1fr);gap:32px}
.toc-right{display:none}
}
@media (max-width: 640px){
.global-nav-embed{height:108px}
}
@media (max-width: 510px){
.site-header-inner{gap:12px;padding:10px 20px}
.brand img{height:36px}
.header-search{min-width:0;flex:1}
.doc-layout{grid-template-columns:1fr;padding:24px 20px 64px;gap:24px}
.toc-left{display:none}
h1.doc-title{font-size:40px}
.index-hero{padding:48px 20px 36px}
.index-section{padding:32px 20px}
.keyword-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
}