.pra-header{position:sticky;top:0;z-index:900;background:transparent;border-bottom:1px solid transparent;transition:background .25s,backdrop-filter .25s,border-color .25s;margin-bottom:calc(-1 * var(--pra-header-h))}
.pra-scrolled .pra-header{background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom-color:var(--pra-hairline)}
.pra-header-inner{display:flex;align-items:center;gap:18px;height:var(--pra-header-h);padding:0 29px}
.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}
/* the founding line under the wordmark. Mono, tracked out and quiet, so it
   reads as a maker's mark and not a second nav item. The stack is written out
   rather than var(--pra-font-mono): a consuming page only has to define
   --pra-header-h and --pra-hairline, and an undefined var() makes the WHOLE
   font-family invalid at computed-value time, it does not fall through to the
   next name in the list.
   The indent puts the line under the P of the wordmark instead of under the
   candles. logo-header.png is 333x94 and the wordmark's first ink column is
   x=130, so the offset is height * (333/94) * (130/333) = height * 1.383.
   The negative margin-top tucks it under the baseline: the wordmark's ink
   stops at row 71 of the 94-row file, so 23.4% of the rendered height below it
   is empty space inside the image. Reclaim that and leave 2px.
   Every breakpoint moves --pra-logo-h and both offsets follow. */
.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)}
.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}
.navlink{position:relative;display:inline-flex;align-items:center;padding:10px 16px;font-family:var(--pra-font-sans);font-size:15px;font-weight:500;letter-spacing:-.005em;color:var(--pra-ink);text-decoration:none;white-space:nowrap;border-radius:999px;transition:color .15s,background .15s}
.navlink::after{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:rgb(236,59,61);transform:scaleX(0);transform-origin:center center;transition:transform .18s}
.navlink:hover::after,.navlink:focus-visible::after{transform:scaleX(1)}
.navlink:focus-visible{outline:rgb(236,59,61) solid 2px;outline-offset:2px}
.navlink[aria-current="page"]{font-weight:600}
.navlink[aria-current="page"]::after{transform:scaleX(1)}
.nav-secondary .navlink{font-size:14px;font-weight:500;color:var(--pra-muted);padding:10px 13px}
.nav-secondary .navlink:hover,.nav-secondary .navlink:focus-visible{color:var(--pra-ink)}
.nav-secondary .navlink::after{left:13px;right:13px}
/* the count pill. Quiet by default and only as loud as the label on hover,
   so the menu reads as words first and numbers second. The figures are the
   real ones: 177 is the strategies build's own count, 200+ covers the 204
   statistics pages, 20+ covers 18 research papers and 3 books. */
.navlink .navn{display:inline-block;margin-left:7px;padding:3px 8px;border-radius:999px;background:var(--pra-soft);color:var(--pra-muted);font-family:var(--pra-font-mono);font-size:10.5px;font-weight:500;letter-spacing:.02em;line-height:1.5;font-variant-numeric:tabular-nums;transition:background .15s,color .15s}
.navlink:hover .navn,.navlink:focus-visible .navn,.navlink[aria-current="page"] .navn{background:#E7E7EB;color:var(--pra-ink)}
/* in the burger panel the row is full width, so the pill goes to the end */
@media (max-width:1560px){.nav-panel.is-open .navlink{justify-content:flex-start}.nav-panel.is-open .navlink .navn{margin-left:auto}}
.navlink .ext{display:inline-flex;margin-left:6px;color:var(--pra-muted);transition:color .15s}
.navlink .ext svg{width:12px;height:12px;display:block}
.navlink:hover .ext,.navlink:focus-visible .ext{color:var(--pra-ink)}
.nav-div{width:1px;height:20px;background:var(--pra-line);margin:0 16px;flex:0 0 auto}
.pra-cta{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px;background:rgb(51,51,51);color:#fff;font-family:var(--pra-font-sans);font-size:14px;font-weight:700;letter-spacing:-.005em;text-decoration:none;border-radius:10px;white-space:nowrap;transition:background .15s,transform .08s}
.pra-cta:hover{background:#000}
.pra-cta:active{transform:scale(.98)}
.pra-cta:focus-visible{outline:rgb(236,59,61) solid 2px;outline-offset:2px}
.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);color:var(--pra-muted);text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.pra-account:hover{background:rgb(239,239,241);color:var(--pra-ink);border-color:rgb(217,217,221)}
.pra-account:focus-visible{outline:rgb(236,59,61) solid 2px;outline-offset:2px}
.pra-account svg{width:18px;height:18px;display:block}
.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:rgb(236,59,61) solid 2px;outline-offset:2px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--pra-ink);position:relative;transition:background .15s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--pra-ink);transition:transform .2s}
.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)}
.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:rgb(107,107,114);text-decoration:none;white-space:nowrap;background:rgb(246,246,247);border:1px solid rgb(232,232,234);border-radius:999px;transition:background .15s,color .15s,border-color .15s}
.pra-lang-pill:hover{background:rgb(239,239,241);color:var(--pra-ink);border-color:rgb(217,217,221)}
.pra-lang-pill:focus-visible{outline:rgb(236,59,61) solid 2px;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:1560px){
  .pra-header-inner{padding:0 18px;gap:12px}
  .navlink{padding:10px 11px;font-size:14.5px}
  .navlink::after{left:11px;right:11px}
  .pra-logo{--pra-logo-h:32px}
  .nav-div{margin:0 10px}
}
/* The pill keeps its name down to 1180px, the same as prorealalgos.com.
   Collapsing it with the nav at 1560 made every subdomain show a bare
   flag while the main site still said Svenska. */
@media (max-width:1180px){
  .pra-lang-name{display:none}
  .pra-lang-pill{width:34px;padding:0;justify-content:center}
}
@media (max-width:1340px){
  .pra-header-inner{gap:10px}
  .navlink{padding:10px 8px;font-size:14px}
  .navlink::after{left:8px;right:8px}
  .nav-secondary .navlink{font-size:13.5px;padding:10px 7px}
  .nav-secondary .navlink::after{left:7px;right:7px}
  .navlink .ext{margin-left:4px}
  .nav-div{margin:0 6px}
}
/* Step two of the fit cascade in pra-header.js: the pill drops its name and
   keeps its flag, the same shape it takes below 1180px. */
.pra-lang-tight .pra-lang-name{display:none}
.pra-lang-tight .pra-lang-pill{width:34px;padding:0;justify-content:center}

/* Step three of the fit cascade: the reduction the 1340px breakpoint makes,
   available at any width when a translated nav needs it. */
.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-secondary .navlink{font-size:13.5px;padding:10px 7px}
.pra-nav-dense .nav-secondary .navlink::after{left:7px;right:7px}
.pra-nav-dense .navlink .ext{margin-left:4px}
.pra-nav-dense .nav-div{margin:0 6px}

/* Step four of the fit cascade: the external link arrows go. The links still
   carry target=_blank and rel=noopener; only the glyph is gone. */
.pra-nav-noext .navlink .ext{display:none}

/* The burger breakpoint below is tuned to the English nav. German and Dutch
   run the same five links 200px wider, so at 1440px "200 kostenlose
   Strategien" was drawn straight over the language pill and the CTA. A fixed
   breakpoint cannot know how wide a translation is, so pra-header.js measures
   the nav against the space it actually has and sets .pra-nav-cramped on
   <body> when it does not fit. Everything inside the media query below is
   repeated here so the two paths collapse to exactly the same header. */
.pra-nav-cramped .pra-header{background:rgba(255,255,255,.95);border-bottom-color:var(--pra-hairline);margin-bottom:0}
.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-secondary .navlink{font-size:15px;padding:12px 6px}
.pra-nav-cramped .nav-secondary .navlink::after{left:6px;right:auto}
.pra-nav-cramped .nav-div{width:100%;height:1px;margin:8px 0}
@media (max-width:1220px){
  .pra-header{background:rgba(255,255,255,.95);border-bottom-color:var(--pra-hairline);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-secondary .navlink{font-size:15px;padding:12px 6px}
  .nav-secondary .navlink::after{left:6px;right:auto}
  .nav-div{width:100%;height:1px;margin:8px 0}
}
@media (max-width:400px){
  .pra-header-inner{padding:8px 12px;gap:6px}
  .pra-account{width:30px;height:30px}
  .pra-logo{--pra-logo-h:27px}
  .pra-cta{height:38px;padding:0 14px;font-size:13px}
}

.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}
}