/* ===================================================================
   Tokens
   =================================================================== */
:root{
  --bg:#f7f8fc;
  --surface:#ffffff;
  --surface-2:#f0f2f8;
  --surface-3:#e7eaf3;
  --border:#e3e6f0;
  --border-strong:#ccd1e2;
  --text:#161925;
  --text-muted:#585d73;
  --text-faint:#8b90a6;
  --brand:#4f46e5;
  --brand-soft:#eceafe;
  --jee:#2563eb;
  --neet:#0d9488;
  --mnemonic:#c2650a;
  --shortcut:#2563eb;
  --formula:#7c3aed;
  --proof:#0d9488;
  --shadow-sm:0 1px 2px rgba(18,20,40,.05);
  --shadow:0 1px 3px rgba(18,20,40,.06), 0 8px 20px rgba(18,20,40,.05);
  --topbar-h:60px;
  --sidebar-w:274px;
  color-scheme:light;
}

:root[data-theme="dark"]{
  --bg:#0e1016; --surface:#161922; --surface-2:#1d212c; --surface-3:#262b39;
  --border:#272c39; --border-strong:#3a4054;
  --text:#eceff8; --text-muted:#9aa0b6; --text-faint:#737990;
  --brand:#818cf8; --brand-soft:#232441;
  --jee:#60a5fa; --neet:#2dd4bf;
  --mnemonic:#fbbf24; --shortcut:#60a5fa; --formula:#c4b5fd; --proof:#2dd4bf;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 1px 3px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.32);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1016; --surface:#161922; --surface-2:#1d212c; --surface-3:#262b39;
    --border:#272c39; --border-strong:#3a4054;
    --text:#eceff8; --text-muted:#9aa0b6; --text-faint:#737990;
    --brand:#818cf8; --brand-soft:#232441;
    --jee:#60a5fa; --neet:#2dd4bf;
    --mnemonic:#fbbf24; --shortcut:#60a5fa; --formula:#c4b5fd; --proof:#2dd4bf;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow:0 1px 3px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.32);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
/* An explicit `display` in author CSS beats the UA rule for [hidden],
   so enforce it — .chapter-list and .flist both set display:flex. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}

/* ===================================================================
   Top bar
   =================================================================== */
.topbar{
  position:sticky; top:0; z-index:60; height:var(--topbar-h);
  background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:18px; padding:0 18px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; flex-shrink:0;}
.brand-mark{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),#a855f7);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:.82rem; letter-spacing:-.02em;
}
.brand-text strong{display:block; font-size:.92rem; font-weight:800; letter-spacing:-.01em; line-height:1.2;}
.brand-text small{display:block; font-size:.69rem; color:var(--text-faint); font-weight:500;}

/* min-width:0 lets the input shrink below its intrinsic width; without it a
   flex item refuses to shrink and pushes the page wider than the viewport. */
.topbar-search{position:relative; flex:1; min-width:0; max-width:560px;}
.topbar-search input{
  width:100%; height:38px; padding:0 34px 0 36px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--surface-2); color:var(--text); font-size:.875rem; font-family:inherit;
}
.topbar-search input::placeholder{color:var(--text-faint)}
.topbar-search input:focus{background:var(--surface); border-color:var(--brand); outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent);}
.search-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; fill:none; stroke:var(--text-faint); stroke-width:2; stroke-linecap:round;
  pointer-events:none;
}
.search-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:0; background:var(--surface-3); color:var(--text-muted);
  width:20px; height:20px; border-radius:50%; cursor:pointer; font-size:.9rem; line-height:1;
}
.search-clear:hover{background:var(--border-strong)}

.topbar-actions{display:flex; align-items:center; gap:8px; margin-left:auto;}
.btn-icon{
  width:36px; height:36px; border-radius:9px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.btn-icon:hover{border-color:var(--brand-strong,var(--brand)); color:var(--brand);}

.btn-drawer{
  display:none; align-items:center; gap:7px; height:36px; padding:0 13px;
  border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text);
  border-radius:9px; font-size:.82rem; font-weight:600; cursor:pointer;
}
.btn-drawer svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
.drawer-badge{
  background:var(--brand); color:#fff; border-radius:999px;
  font-size:.68rem; font-weight:700; padding:1px 6px; min-width:18px; text-align:center;
}

/* ===================================================================
   Shell
   =================================================================== */
.shell{
  display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  max-width:1420px; margin:0 auto; align-items:start;
}

/* ===================================================================
   Sidebar
   =================================================================== */
.sidebar{
  position:sticky; top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));
  overflow-y:auto; overscroll-behavior:contain;
  padding:20px 6px 40px 18px;
  border-right:1px solid var(--border);
}
.sidebar::-webkit-scrollbar{width:9px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:9px;}
.sidebar::-webkit-scrollbar-track{background:transparent}

.sidebar-head{display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-right:12px;}
.sidebar-head h2{font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; color:var(--text-faint); margin:0; font-weight:700;}
.btn-link{
  margin-left:auto; border:0; background:none; color:var(--brand);
  font-size:.78rem; font-weight:600; cursor:pointer; padding:2px 0;
}
.btn-link:hover{text-decoration:underline}
.btn-drawer-close{display:none}

.fgroup{margin-bottom:22px; padding-right:12px;}
.fgroup-title{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-faint); font-weight:700; margin:0 0 8px;
  display:flex; align-items:baseline; gap:6px;
}
.fgroup-hint{font-size:.68rem; text-transform:none; letter-spacing:0; color:var(--text-faint); font-weight:500;}

.flist{display:flex; flex-direction:column; gap:1px;}

/* Filter row: checkbox + label + count */
.fitem{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:7px 9px; border:0; border-radius:8px;
  background:none; color:var(--text-muted); cursor:pointer;
  font-size:.855rem; font-weight:500; text-align:left; line-height:1.35;
}
.fitem:hover{background:var(--surface-2); color:var(--text);}
.fbox{
  width:15px; height:15px; border-radius:4px; flex-shrink:0;
  border:1.5px solid var(--border-strong); background:var(--surface);
  position:relative; transition:background .12s ease, border-color .12s ease;
}
.fitem[aria-pressed="true"]{background:var(--brand-soft); color:var(--text); font-weight:600;}
.fitem[aria-pressed="true"] .fbox{background:var(--brand); border-color:var(--brand);}
.fitem[aria-pressed="true"] .fbox::after{
  content:''; position:absolute; left:4px; top:1px;
  width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.fname{flex:1; min-width:0}
.fcount{
  font-size:.72rem; font-weight:600; color:var(--text-faint);
  font-variant-numeric:tabular-nums; flex-shrink:0;
}
.fitem[aria-pressed="true"] .fcount{color:var(--brand)}
.fitem.is-empty{opacity:.38}
.fitem.is-empty:hover{background:none}

.fitem .swatch{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.swatch-mnemonic{background:var(--mnemonic)}
.swatch-shortcut{background:var(--shortcut)}
.swatch-formula{background:var(--formula)}
.swatch-proof{background:var(--proof)}
.swatch-jee{background:var(--jee)}
.swatch-neet{background:var(--neet)}

/* Chapter tree */
.chapter-search input{
  width:100%; height:32px; padding:0 10px; margin-bottom:8px;
  border:1px solid var(--border); border-radius:8px;
  background:var(--surface-2); color:var(--text); font-size:.8rem; font-family:inherit;
}
.chapter-search input:focus{background:var(--surface); border-color:var(--brand); outline:none;}
.chapter-tree{display:flex; flex-direction:column; gap:3px;}
.chapter-group{border-radius:8px;}
.chapter-head{
  display:flex; align-items:center; gap:7px; width:100%;
  padding:7px 9px; border:0; border-radius:8px; background:none;
  color:var(--text); font-size:.8rem; font-weight:700; cursor:pointer; text-align:left;
}
.chapter-head:hover{background:var(--surface-2)}
.chapter-head .caret{
  font-size:.6rem; color:var(--text-faint); transition:transform .15s ease; flex-shrink:0;
}
.chapter-head[aria-expanded="true"] .caret{transform:rotate(90deg)}
.chapter-head .fcount{margin-left:auto}
.chapter-list{
  display:flex; flex-direction:column; gap:1px;
  margin:2px 0 6px; padding-left:9px; border-left:1px solid var(--border);
}
.chapter-list .fitem{font-size:.82rem; padding:6px 9px;}

/* ===================================================================
   Content
   =================================================================== */
.content{padding:24px 26px 60px; min-width:0;}

.intro{margin-bottom:26px;}
.intro h1{font-size:clamp(1.4rem,2.4vw,1.9rem); letter-spacing:-.022em; margin:0 0 9px; line-height:1.22;}
.intro p{color:var(--text-muted); margin:0 0 18px; max-width:660px; font-size:.925rem;}

.stat-row{display:flex; gap:10px; flex-wrap:wrap;}
.stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:11px;
  padding:9px 15px; min-width:92px; box-shadow:var(--shadow-sm);
}
.stat-card b{display:block; font-size:1.15rem; letter-spacing:-.02em; line-height:1.2;}
.stat-card span{font-size:.71rem; color:var(--text-faint); font-weight:500;}

.toolbar{
  position:sticky; top:var(--topbar-h); z-index:20;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 0; margin-bottom:6px;
  background:linear-gradient(var(--bg) 76%, transparent);
  border-bottom:1px solid var(--border);
}
.toolbar-left{display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1; min-width:0;}
.result-count{font-size:.85rem; font-weight:700; color:var(--text); white-space:nowrap;}

.active-pills{display:flex; gap:6px; flex-wrap:wrap;}
.pill{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--brand-soft); color:var(--brand);
  border-radius:999px; padding:3px 5px 3px 11px; font-size:.755rem; font-weight:600;
  max-width:230px;
}
.pill-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pill button{
  border:0; background:none; color:inherit; cursor:pointer;
  font-size:.95rem; line-height:1; padding:0 3px; opacity:.65;
}
.pill button:hover{opacity:1}

.toolbar-right{display:flex; align-items:center; gap:9px; flex-shrink:0;}
.btn-select-all{
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text-muted);
  border-radius:9px; padding:6px 13px; font-size:.79rem; font-weight:600; cursor:pointer; white-space:nowrap;
}
.btn-select-all:hover{border-color:var(--brand); color:var(--brand);}

.segmented{display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:2px; flex-shrink:0;}
.seg{
  border:0; background:none; color:var(--text-muted); cursor:pointer;
  padding:5px 13px; border-radius:7px; font-size:.79rem; font-weight:600;
}
.seg[aria-pressed="true"]{background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm);}

/* Results */
/* Masonry-style column flow: cards vary a lot in height (a one-line mnemonic
   next to a nine-row formula table), and a grid would leave holes under the
   short ones. Columns pack tight and balance their own heights. */
.grid{column-width:330px; column-gap:14px;}
.card{break-inside:avoid; margin-bottom:14px;}
.grouped{display:block}

.subject-block{margin-bottom:34px;}
.subject-bar{
  display:flex; align-items:center; gap:10px; margin:26px 0 2px;
  padding-bottom:10px; border-bottom:2px solid var(--border);
}
.subject-bar h2{font-size:1.16rem; letter-spacing:-.018em; margin:0;}
.subject-bar .tally{
  font-size:.7rem; font-weight:700; color:var(--text-faint);
  background:var(--surface-2); border-radius:999px; padding:2px 9px;
}
.chapter-label{
  display:flex; align-items:center; gap:9px;
  font-size:.735rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-faint); font-weight:700; margin:22px 0 10px;
}
.chapter-label::after{content:''; flex:1; height:1px; background:var(--border);}

.card{
  position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:15px 40px 14px 16px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:8px;
  transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.card:hover{box-shadow:var(--shadow); border-color:var(--border-strong); transform:translateY(-1px);}
.card.is-picked{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), var(--shadow-sm);}

/* Tick a card to add it to the printable revision sheet */
.card-pick{
  position:absolute; top:12px; right:12px; z-index:2;
  width:19px; height:19px; border-radius:5px; cursor:pointer; padding:0;
  border:1.5px solid var(--border-strong); background:var(--surface);
  transition:background .12s ease, border-color .12s ease;
}
.card-pick:hover{border-color:var(--brand)}
.card-pick[aria-pressed="true"]{background:var(--brand); border-color:var(--brand);}
.card-pick[aria-pressed="true"]::after{
  content:''; position:absolute; left:6px; top:2px;
  width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);
}

.card-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.7rem; font-weight:600;}
.tag-type{display:inline-flex; align-items:center; gap:5px; text-transform:uppercase; letter-spacing:.04em;}
.tag-type .dot{width:6px; height:6px; border-radius:50%;}
.tag-type-mnemonic{color:var(--mnemonic)} .tag-type-mnemonic .dot{background:var(--mnemonic)}
.tag-type-shortcut{color:var(--shortcut)} .tag-type-shortcut .dot{background:var(--shortcut)}
.tag-type-formula{color:var(--formula)} .tag-type-formula .dot{background:var(--formula)}
.tag-type-proof{color:var(--proof)} .tag-type-proof .dot{background:var(--proof)}
.meta-sep{color:var(--border-strong)}
.meta-dim{color:var(--text-faint); font-weight:500;}
.tag-exam{border-radius:5px; padding:1px 6px; font-size:.66rem; letter-spacing:.03em;}
.tag-exam-jee{color:var(--jee); background:color-mix(in srgb,var(--jee) 12%,transparent);}
.tag-exam-neet{color:var(--neet); background:color-mix(in srgb,var(--neet) 12%,transparent);}

.card h3{margin:0; font-size:.955rem; line-height:1.35; letter-spacing:-.012em; font-weight:700;}
.card .body{font-size:.865rem; color:var(--text-muted); line-height:1.6;}
.card .body b{color:var(--text); font-weight:700;}
.card .body i{color:var(--text); font-style:italic;}

/* Proofs — a claim line, then numbered steps with the result set apart */
.proof-claim{
  font-size:.83rem; color:var(--text-muted); font-style:italic;
  padding:7px 10px; border-left:2px solid var(--proof);
  background:color-mix(in srgb, var(--proof) 7%, transparent);
  border-radius:0 6px 6px 0;
}
.proof-steps{
  margin:2px 0 0; padding-left:20px;
  font-size:.855rem; color:var(--text-muted); line-height:1.55;
}
.proof-steps li{margin-bottom:5px; padding-left:2px;}
.proof-steps li::marker{color:var(--proof); font-weight:700; font-size:.78rem;}
.proof-steps li:last-child{
  margin-bottom:0; color:var(--text); font-weight:600;
}
.proof-steps b{color:var(--text); font-weight:700;}
.proof-steps i{font-style:italic;}

.rows-table{width:100%; border-collapse:collapse; font-size:.83rem; margin-top:1px;}
.rows-table tr{border-top:1px solid var(--border)}
.rows-table tr:first-child{border-top:none}
.rows-table td{padding:6px 0; vertical-align:top;}
.rows-table td:first-child{color:var(--text-muted); width:43%; padding-right:12px;}
.rows-table td:last-child{
  font-family:'JetBrains Mono',Consolas,monospace; font-size:.785rem;
  color:var(--text); word-break:break-word;
}

.empty-state{
  text-align:center; padding:64px 20px; color:var(--text-muted);
  background:var(--surface); border:1px dashed var(--border-strong); border-radius:14px;
}
.empty-state h3{margin:0 0 6px; font-size:1rem; color:var(--text);}
.empty-state p{margin:0 0 16px; font-size:.875rem;}
.btn-primary{
  border:0; background:var(--brand); color:#fff; border-radius:9px;
  padding:9px 18px; font-size:.85rem; font-weight:600; cursor:pointer;
}
.btn-primary:hover{filter:brightness(1.08)}

.site-footer{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--border);
  color:var(--text-faint); font-size:.8rem; text-align:center;
}
.site-footer .footer-note{margin-top:8px; font-size:.74rem; opacity:.8; max-width:620px; margin-left:auto; margin-right:auto;}
/* The studio credit styles itself (see the .stunity-credit block in index.html);
   this only stops the site footer's centred text rules fighting its layout. */
.site-footer .stunity-credit{text-align:left;}
.site-footer a{color:var(--brand); font-weight:600; text-decoration:none;}
.site-footer a:hover{text-decoration:underline}

/* ===================================================================
   Selection bar
   =================================================================== */
.select-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  background:var(--surface); border-top:1px solid var(--border);
  box-shadow:0 -4px 24px rgba(10,12,20,.16);
  padding:10px 18px;
}
.select-bar-inner{
  max-width:1420px; margin:0 auto;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.sel-count{font-size:.85rem; color:var(--text-muted);}
.sel-count b{color:var(--text); font-size:1rem;}
.sel-spacer{flex:1}
.btn-ghost{
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text-muted);
  border-radius:9px; padding:8px 14px; font-size:.82rem; font-weight:600; cursor:pointer; white-space:nowrap;
}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand);}
.btn-print{
  border:0; background:var(--brand); color:#fff; border-radius:9px;
  padding:9px 18px; font-size:.84rem; font-weight:700; cursor:pointer; white-space:nowrap;
}
.btn-print:hover{filter:brightness(1.08)}
/* Keep the last cards clear of the fixed bar */
body.has-selection .content{padding-bottom:96px}

.to-top{
  position:fixed; right:20px; bottom:20px; z-index:50;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  box-shadow:var(--shadow); font-size:1rem;
}
.to-top:hover{color:var(--brand); border-color:var(--brand);}
body.has-selection .to-top{bottom:76px}

/* ===================================================================
   Responsive — sidebar becomes a drawer
   =================================================================== */
@media (max-width:1000px){
  :root{--sidebar-w:0px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .btn-drawer{display:flex}
  .btn-drawer-close{display:flex}
  .brand-text small{display:none}

  .sidebar{
    position:fixed; top:0; left:0; z-index:80;
    width:290px; height:100vh; padding:18px 8px 40px 18px;
    background:var(--surface); border-right:1px solid var(--border);
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:none;
  }
  body.drawer-open .sidebar{transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.28);}
  .drawer-scrim{
    position:fixed; inset:0; z-index:70;
    background:rgba(10,12,20,.5); border:0;
  }
  .content{padding:20px 18px 60px}
  .toolbar{top:var(--topbar-h)}
}

/* ===================================================================
   Print — a compact revision sheet, nothing else
   =================================================================== */
.print-sheet{display:none}

@media print{
  /* The studio credit component sets its own @page margin-bottom for the
     running footer, so only size and the other three margins are set here. */
  @page{size:A4; margin:9mm 8mm}

  .topbar,.sidebar,.drawer-scrim,.toolbar,.intro,.site-footer,
  .to-top,.select-bar,#grid{display:none !important}
  .shell{display:block; max-width:none}
  .content{padding:0 !important}

  html,body{background:#fff !important; color:#000 !important;}

  .print-sheet{
    display:block !important;
    font-family:'Inter',system-ui,sans-serif;
    font-size:8pt; line-height:1.34; color:#000;
  }

  /* The studio credit ships with a position:fixed print rule. On a long
     multi-column sheet Chrome repeats a fixed element on only a couple of
     pages, and when it does repeat it paints over the last line of copy. So
     the credit is instead cloned into this table's footer group, which the
     browser repeats on every page and reserves space for. The original
     #stunityCredit is therefore hidden in print to avoid a doubled footer;
     it is untouched on screen. */
  #stunityCredit{display:none !important}
  .ps-wrap{width:100%; border-collapse:collapse;}
  .ps-wrap > tbody > tr > td, .ps-wrap > tfoot > tr > td{padding:0;}
  .ps-wrap tfoot{display:table-footer-group;}
  .ps-runfoot{
    margin:0; padding:2.5mm 0 0; max-width:none;
    border-top:.2mm solid #c9c9c9; font-size:7.5pt; color:#5b5b5b;
  }
  /* The columns live inside the table cell, below the header line */
  .ps-cols{column-count:2; column-gap:6mm;}
  /* No trailing whitespace after the last tip or around the sheet */
  .ps-cols > *:last-child{margin-bottom:0 !important}
  .print-sheet,.ps-wrap{margin:0}

  /* One compact line, not a title block */
  .ps-head{
    column-span:all; font-size:7.2pt; color:#444;
    border-bottom:1pt solid #000; padding-bottom:2pt; margin-bottom:4pt;
  }
  .ps-head b{font-size:8.4pt; color:#000;}

  /* Subject bands span both columns so each subject reads as one clear
     section rather than two half-columns of unrelated material. */
  .ps-subject{
    column-span:all;
    font-size:9pt; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
    margin:7pt 0 3pt; padding:1.5pt 2mm;
    background:#ececec; border-top:1pt solid #000; border-bottom:.5pt solid #999;
    break-after:avoid; break-inside:avoid;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .ps-subject:first-of-type{margin-top:0}

  /* Chapter headings sit inside the column flow, one line each */
  .ps-chapter{
    font-size:6.9pt; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
    color:#444; margin:3.5pt 0 1.5pt; padding-bottom:.8pt;
    border-bottom:.3pt dotted #b0b0b0;
    break-after:avoid; break-inside:avoid;
  }
  .ps-chapter:first-child{margin-top:0}

  /* Title runs inline with the text — saves a line on every tip */
  .ps-tip{break-inside:avoid; margin:0 0 3.4pt;}
  .ps-title{font-weight:700}
  .ps-tip b{font-weight:700}
  .ps-tip i{font-style:italic}

  /* Empty box to tick off once the tip is memorised */
  .ps-tick{
    display:inline-block; width:6pt; height:6pt; margin-right:3pt;
    border:.6pt solid #888; border-radius:1pt; vertical-align:baseline;
  }

  /* Proof steps stay numbered on paper, tight enough to keep the density */
  .ps-steps{margin:1pt 0 0; padding-left:12pt; font-size:7.8pt; line-height:1.32;}
  .ps-steps li{margin-bottom:1pt;}
  .ps-steps li:last-child{font-weight:700;}

  .ps-rows{width:100%; border-collapse:collapse; font-size:7.4pt; margin-top:1pt;}
  .ps-rows td{padding:.8pt 0; vertical-align:top;}
  .ps-rows td:first-child{width:43%; padding-right:4pt; color:#333;}
  .ps-rows td:last-child{font-family:'JetBrains Mono',Consolas,monospace; font-size:7.1pt;}

}

@media (max-width:680px){
  .topbar{gap:10px; padding:0 12px;}
  .brand-text{display:none}
  .topbar-search{max-width:none}
  .topbar-search input{font-size:.83rem; padding-left:33px;}
  .btn-drawer span.label{display:none}
  .grid{grid-template-columns:1fr}
  .stat-card{flex:1; min-width:78px; padding:8px 11px;}
  .intro h1{font-size:1.28rem}
  .toolbar{gap:9px}
}