:root{
  --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-header-h:70px; --pra-hairline:#F0F0F0;
  --pra-r-card:22px; --pra-r-pill:999px; --pra-r-input:12px;
  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  /* tokens used by the cs-popover component (tradefloor.html) */
  --bg-muted:#F1F1F3; --ink:#0E0E10; --ink-soft:#1F1F22; --ink-muted:#6B6B72; --ink-dim:#9B9BA0;
  --red:#EC3B3D; --red-soft:#FDECEC; --red-border:#F9D3D4; --hairline-strong:#D8D8DB;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--pra-font-sans);color:var(--pra-ink);background:var(--pra-bg);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- shared site chrome ---------- */
.pra-header-spacer{height:var(--pra-header-h)}
@media (max-width:1040px){.pra-header-spacer{display:none}}
.crumbs{font-family:var(--pra-font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--pra-muted);padding:22px 0 0}
.crumbs a{text-decoration:none}

.t-eyebrow{font-family:var(--pra-font-mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pra-muted);margin:0 0 12px}
.t-h1{font-weight:700;font-size:clamp(34px,5vw,52px);line-height:1.04;letter-spacing:-.022em;margin:0}
.t-h2{font-weight:700;font-size:clamp(24px,3vw,32px);line-height:1.12;letter-spacing:-.015em;margin:0}
.t-h3{font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.01em;margin:0}
.t-lead{font-size:18px;line-height:1.55;color:var(--pra-muted);margin:14px 0 0;max-width:62ch}
.t-body{font-size:16px;line-height:1.65}
.t-small{font-size:14px;line-height:1.55;color:var(--pra-muted)}
.data{font-family:var(--pra-font-mono);font-variant-numeric:tabular-nums}

.tag{display:inline-flex;align-items:center;padding:6px 12px;font-family:var(--pra-font-mono);font-size:12px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;border-radius:999px;background:var(--pra-soft);color:var(--pra-ink);text-decoration:none}
a.tag:hover{background:var(--pra-line)}
.tag-green{background:rgba(61,197,116,.12);color:#2A8F53}
.tag-red{background:rgba(236,59,61,.10);color:var(--pra-red)}
.card{background:#fff;border:1px solid var(--pra-line);border-radius:var(--pra-r-card);padding:28px}
.card-soft{background:var(--pra-soft);border:0;border-radius:var(--pra-r-card);padding:28px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;font-family:inherit;font-size:15px;font-weight:600;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:.16s}
.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)}
.section{padding-top:56px;padding-bottom:56px}
.section-tight{padding-top:34px;padding-bottom:34px}
.pos{color:#2A8F53} .neg{color:var(--pra-red)}
.muted{color:var(--pra-muted)}

/* ---------- listing ---------- */
.hero-l{padding-top:46px;padding-bottom:30px}
.count-row{display:flex;gap:28px;flex-wrap:wrap;margin-top:26px}
.count-row .c b{display:block;font-family:var(--pra-font-mono);font-size:26px;font-weight:700;letter-spacing:-.02em}
.count-row .c span{font-family:var(--pra-font-mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--pra-muted)}
.filters{border-top:1px solid var(--pra-line);border-bottom:1px solid var(--pra-line);padding:18px 0;background:#fff;margin-top:8px}
.frow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.frow:last-child{margin-bottom:0}
.flabel{font-family:var(--pra-font-mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pra-muted);width:82px;flex:0 0 82px}
.chip{font-family:inherit;font-size:13px;padding:6px 13px;border:1px solid var(--pra-line);border-radius:999px;background:#fff;cursor:pointer;transition:.14s;color:var(--pra-ink)}
.chip:hover{background:var(--pra-soft)}
.chip.on{background:var(--pra-ink);color:#fff;border-color:var(--pra-ink)}
.sortbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:20px 0 14px}
.qsearch{font-family:inherit;font-size:13px;padding:7px 14px;border:1px solid var(--pra-line);border-radius:999px;outline:none;min-width:220px}
.qsearch:focus{border-color:var(--pra-ink)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-family:var(--pra-font-mono);font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--pra-muted);
  text-align:right;padding:0 0 12px;border-bottom:1px solid var(--pra-line);white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{padding:15px 0;border-bottom:1px solid var(--pra-line);text-align:right;font-family:var(--pra-font-mono);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td:first-child{font-family:var(--pra-font-sans);white-space:normal;padding-right:16px}
.tbl td + td{padding-left:14px}
.sname{font-weight:600;font-size:16px;letter-spacing:-.01em;text-decoration:none;display:block}
.smeta{font-family:var(--pra-font-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--pra-muted);margin-top:4px}
.tbl tr:hover td{background:var(--pra-soft)}
.tbl tr.rowlink{cursor:pointer}
.pf{font-weight:700}
.best{font-family:var(--pra-font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pra-muted);margin-left:8px}

/* ---------- detail ---------- */
.det-head{padding:26px 0 8px}
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--pra-line);border:1px solid var(--pra-line);border-radius:var(--pra-r-card);overflow:hidden;margin-top:30px}
.stat{background:#fff;padding:20px 18px}
.stat b{display:block;font-family:var(--pra-font-mono);font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.stat span{display:block;margin-top:6px;font-family:var(--pra-font-mono);font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--pra-muted)}
/* minmax(0,…) not 1.55fr: a grid track defaults to a min-content floor, so one
   unwrappable child (a long code line, a nowrap frosted rule) widens the column
   past the page and the whole layout scrolls sideways. */
.two{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:44px;align-items:start}
.rules h4,.blk h4{font-family:var(--pra-font-mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pra-muted);margin:0 0 12px}
.rules ol{margin:0 0 24px;padding-left:20px}
.rules li{font-size:15.5px;line-height:1.65;margin-bottom:7px}
/* the locked rule keeps its number. Hiding the marker made the list jump
   1, 3 and read as if a rule were missing rather than withheld. */
.rules li.locked{margin-bottom:10px}
/* the locked rule IS the unlock control: a button, so it is reachable by
   keyboard and announced as one. min-width:0 lets it shrink inside the grid. */
.lockline{display:inline-flex;align-items:center;gap:12px;max-width:100%;min-width:0;width:100%;text-align:left;
  border:1px dashed var(--pra-line);background:var(--pra-soft);border-radius:10px;padding:6px 12px;font-size:13.5px;
  color:var(--pra-muted);font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.lockline:hover,.lockline:focus-visible{border-color:var(--pra-red);background:var(--red-soft,#FDECEC);color:var(--pra-ink)}
.lockline:focus-visible{outline:2px solid var(--pra-red);outline-offset:2px}
.lockline b{font-family:var(--pra-font-mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pra-red);flex:0 0 auto;display:inline-flex;align-items:center;gap:5px}
.lockline b svg{width:11px;height:11px}
/* the frosted rule: block characters at body size, blurred, so the line has
   the length and rhythm of the sentence underneath it */
.frosted{font-size:15.5px;line-height:1.65;color:#C9C9CE;letter-spacing:-.06em;overflow:hidden;text-overflow:clip;white-space:nowrap;
  filter:blur(2.5px);-webkit-filter:blur(2.5px);user-select:none;-webkit-user-select:none;min-width:0}
@media (max-width:620px){.frosted{font-size:13px}}
.code{background:#0E0E10;border-radius:var(--pra-r-card);padding:22px 24px;overflow:auto;position:relative}
.code pre{margin:0;font-family:var(--pra-font-mono);font-size:12.5px;line-height:1.75;color:#E8E8EA;white-space:pre}
.code .tk-c{color:#6B6B72} .code .tk-k{color:#EC3B3D} .code .tk-s{color:#7FD7A3} .code .tk-f{color:#9BC7FF} .code .tk-n{color:#E8E8EA}
.copy{position:absolute;top:14px;right:14px;font-family:var(--pra-font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:999px;padding:7px 12px;cursor:pointer}
.copy:hover{background:rgba(255,255,255,.2)}
.codelock{margin-top:18px;border-top:1px dashed rgba(255,255,255,.18);padding-top:20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.codelock .ph{height:9px;border-radius:5px;background:rgba(255,255,255,.1);width:100%}.codelock .ph.m{width:78%}.codelock .ph.s{width:55%}
.codelock p{margin:4px 0 0;color:#9B9BA0;font-size:13.5px}
.codelock .btn-primary{background:#fff;color:#0E0E10}
.kv{width:100%;border-collapse:collapse}
.kv td{padding:11px 0;border-bottom:1px solid var(--pra-line);font-size:14.5px;vertical-align:top}
.kv td:last-child{text-align:right;font-family:var(--pra-font-mono);font-variant-numeric:tabular-nums;padding-left:16px}
.kv td.txt{font-family:var(--pra-font-sans);font-size:13.5px;color:var(--pra-muted);max-width:60%}
.risks li{font-size:15.5px;line-height:1.65;margin-bottom:10px}
.faq{border-top:1px solid var(--pra-line)}
.faq details{border-bottom:1px solid var(--pra-line);padding:18px 0}
.faq summary{font-weight:600;font-size:16.5px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";float:right;color:var(--pra-muted);font-weight:400}
.faq details[open] summary::before{content:"\2212"}
.faq p{margin:12px 0 0;font-size:15.5px;line-height:1.65;color:var(--pra-muted);max-width:74ch}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.relc{border:1px solid var(--pra-line);border-radius:16px;padding:18px;text-decoration:none;display:block;transition:.15s}
.relc:hover{background:var(--pra-soft)}
.cta{background:var(--pra-soft);border-radius:var(--pra-r-card);padding:40px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.disc{padding:26px 0 60px;font-size:12.5px;line-height:1.6;color:var(--pra-muted);border-top:1px solid var(--pra-line);margin-top:34px}
.foot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot .links{display:flex;gap:16px;flex-wrap:wrap}.foot a{text-decoration:none}.foot a:hover{color:var(--pra-ink)}
.nullblk{border:1px dashed var(--pra-line);border-radius:16px;padding:18px;font-size:14px;color:var(--pra-muted);background:#fff}

/* ---------- charts ---------- */
.chart{position:relative}.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--pra-font-mono);font-size:11px;fill:var(--pra-muted)}
.chart .lab{fill:var(--pra-ink)}
.legend{display:flex;gap:18px;font-size:13px;color:var(--pra-muted);margin:0 0 10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.tip{position:absolute;pointer-events:none;background:#fff;border:1px solid var(--pra-line);border-radius:10px;padding:8px 10px;font-size:12px;box-shadow:0 2px 14px rgba(14,14,16,.06);display:none;white-space:nowrap;z-index:5}
.tip b{font-family:var(--pra-font-mono);font-weight:600}
.hit{fill:transparent}

/* ---------- waitlist popover: cs-popover from tradefloor.html ---------- */
.cs-popover{position:fixed;z-index:9999;width:440px;max-width:calc(100vw - 24px);background:#FFFFFF;border:1px solid var(--hairline-strong);border-radius:14px;padding:18px 18px 6px;
  box-shadow:0 16px 40px rgba(8,8,14,.16),0 2px 8px rgba(8,8,14,.06);display:flex;flex-direction:column;gap:12px;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
  transition:opacity .18s ease,transform .24s cubic-bezier(.16,1,.3,1),visibility 0s linear .24s}
.cs-popover.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .18s ease,transform .24s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s}
.cs-title{font-family:'Onest',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin:0;padding-right:32px}
.cs-alert{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--red-soft);border:1px solid var(--red-border);border-radius:10px}
.cs-alert-icon{flex-shrink:0;width:18px;height:18px;color:var(--red);margin-top:1px}
.cs-alert-text{font-family:'Onest',sans-serif;font-size:13px;line-height:1.4;color:var(--ink)}
.cs-alert-text strong{display:block;font-weight:700;margin-bottom:2px}
.cs-alert-text span{display:block;color:var(--ink-soft);font-weight:400}
/* the timing question, verbatim from tradefloor.html: pill radios, not a
   fieldset of checkboxes. Same class names so the two stay comparable. */
.wl-timing{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.wl-timing-q{font-size:12.5px;font-weight:500;color:#4A4A52;line-height:1.35}
.wl-timing-opts{display:flex;flex-wrap:wrap;gap:6px}
.wl-opt{position:relative;display:inline-flex}
.wl-opt input{position:absolute;opacity:0;width:0;height:0}
.wl-opt span{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;border:1px solid #E2E2E6;background:#FFFFFF;
  font-size:12.5px;line-height:1;color:#4A4A52;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.wl-opt span:hover{border-color:#D8D8DB}
.wl-opt input:checked + span{background:#0E0E10;border-color:#0E0E10;color:#FFFFFF}
.wl-opt input:focus-visible + span{outline:2px solid #EC3B3D;outline-offset:2px}
.wl-consent{margin:0;font-size:11px;line-height:1.45;color:#7A7A82}
.cs-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cs-close{position:absolute;top:8px;right:8px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:8px;color:var(--ink-muted);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.cs-close:hover{background:var(--bg-muted);color:var(--ink)}
.cs-close svg{width:14px;height:14px}
.cs-form-row{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:2px}
.cs-email{width:100%;height:44px;padding:0 14px;background:#FFFFFF;border:1px solid var(--hairline-strong);border-radius:10px;font-family:'Onest',sans-serif;font-size:14px;color:var(--ink);outline:none;transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none}
.cs-email::placeholder{color:var(--ink-dim)}
.cs-email:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(14,14,16,.06)}
.cs-email.is-invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(236,59,61,.10)}
.cs-submit{width:100%;height:44px;padding:0 16px;background:var(--ink);color:#FFFFFF;border:none;border-radius:10px;font-family:'Onest',sans-serif;font-size:14px;font-weight:700;letter-spacing:-.005em;cursor:pointer;transition:background-color .18s ease,transform .08s ease;-webkit-appearance:none;appearance:none}
.cs-submit:hover{background:var(--red)}
.cs-submit:active{transform:translateY(1px)}
.cs-submit:disabled{opacity:.55;cursor:not-allowed}
.cs-submit:disabled:hover{background:var(--ink)}
.cs-status{font-family:'Onest',sans-serif;font-size:12.5px;font-weight:500;line-height:1.4;opacity:0;max-height:0;overflow:hidden;transition:opacity .2s ease,max-height .2s ease}
.cs-status.is-visible{opacity:1;max-height:60px}
.cs-status.is-success{color:#1a8a4a}
.cs-status.is-error{color:var(--red)}

@media (max-width:900px){ .two{grid-template-columns:minmax(0,1fr);gap:30px} .stats{grid-template-columns:repeat(3,1fr)} .rel{grid-template-columns:1fr} }
@media (max-width:510px){
  .wrap{padding:0 16px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .tbl.list th:nth-child(4),.tbl.list td:nth-child(4),.tbl.list th:nth-child(5),.tbl.list td:nth-child(5),.tbl.list th:nth-child(6),.tbl.list td:nth-child(6){display:none}
  .tbl.runs th:nth-child(5),.tbl.runs td:nth-child(5),.tbl.runs th:nth-child(6),.tbl.runs td:nth-child(6),.tbl.runs th:nth-child(7),.tbl.runs td:nth-child(7){display:none}
  .flabel{width:100%;flex:0 0 100%;margin-bottom:2px}
  .cta{flex-direction:column;align-items:flex-start;padding:28px}
  .qsearch{min-width:0;width:100%}
}

/* ---------- canonical ProRealAlgos header ---------- */
/* ===========================================================================
   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 <div class="pra-header-spacer"></div> 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 <button>, 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}