:root{
  --paper:#f4f7f8;--white:#fff;--ink:#142735;--muted:#566b78;--line:#d6e0e5;
  --blue:#0869c9;--blue-ink:#034887;--blue-pale:#e8f3ff;--cyan:#0d8d9c;
  --coral:#d6523d;--coral-pale:#fff0ec;--amber:#a46800;--amber-pale:#fff5dc;
  --green:#1c7a5b;--green-pale:#e8f6ef;--purple:#6c3fd4;--purple-pale:#f0e9ff;
  --shadow:0 10px 30px rgba(23,45,59,.08);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.48}
button,input,select,textarea{font:inherit}
button{color:inherit}
a{color:var(--blue-ink)}
.view{display:none}.view.active{display:block}
.page{max-width:1380px;margin:auto;padding:22px 22px 70px}

/* ---------- shared chrome ---------- */
.masthead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;padding:26px 0 20px;border-bottom:1px solid var(--line)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-ink);font-weight:600}
h1{font-family:var(--serif);font-size:clamp(34px,5.2vw,68px);line-height:.98;letter-spacing:-.035em;margin:8px 0 12px;max-width:850px;font-weight:650}
.lede{max-width:760px;font-size:18px;color:#3c5563;margin:0}
.mast-stats{display:grid;grid-template-columns:repeat(2,minmax(92px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);min-width:240px}
.stat{background:#fff;padding:16px}.stat b{display:block;font:650 28px/1 var(--serif);color:var(--blue-ink)}.stat span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.footer-note{padding:18px 0 0;color:#5d727e;font-size:13px;border-top:1px solid var(--line);margin-top:28px}.footer-note strong{color:#314b59}
.toast{position:fixed;right:18px;bottom:18px;max-width:360px;background:var(--ink);color:#fff;padding:12px 15px;border-radius:7px;box-shadow:var(--shadow);transform:translateY(20px);opacity:0;pointer-events:none;transition:.22s ease;z-index:50}.toast.show{transform:translateY(0);opacity:1}
mark{background:#ffe6a8;color:inherit;padding:0}
.btn{border:1px solid #b9c8d0;background:#fff;border-radius:7px;padding:10px 13px;font-weight:650;cursor:pointer;display:inline-flex;gap:8px;align-items:center;min-height:42px}.btn:hover{border-color:#7e96a3;background:#fafdff}.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}.btn.primary:hover{background:#213b4b}.btn.active{background:var(--blue-pale);border-color:#7db4e8;color:var(--blue-ink)}
.back-btn{margin:6px 0 0}
.micro{font:500 12px var(--mono);color:#637782}

/* ---------- hub ---------- */
.toolbar{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:12px;align-items:center;padding:18px 0}
.search{position:relative}.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#607580}.search input{width:100%;border:1px solid #becdd5;background:#fff;padding:13px 15px 13px 44px;border-radius:8px;outline:none}.search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,105,201,.12)}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:6px}
.tile{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 18px 16px;cursor:pointer;position:relative;box-shadow:0 5px 18px rgba(23,45,59,.045);transition:transform .12s ease, box-shadow .12s ease;text-align:left;width:100%}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.tile::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:5px;border-radius:0 4px 4px 0;background:var(--accent,var(--blue))}
.tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.tile-icon{font-size:30px;line-height:1}
.tile h2{font:650 24px/1.1 var(--serif);margin:0;letter-spacing:-.01em}
.tile .tagline{color:var(--muted);font-size:14px;margin:6px 0 12px}
.tile-meta{display:flex;justify-content:space-between;align-items:center;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.badge{font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.07em;padding:5px 9px;border-radius:20px}
.badge.ready{background:var(--green-pale);color:var(--green)}
.badge.soon{background:#eef1f3;color:#748894}
.pbar{height:8px;background:#e6edf0;border-radius:5px;overflow:hidden}
.pbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent,var(--blue)),var(--blue-ink));border-radius:5px;transition:width .3s ease}
.pct{font:600 12px var(--mono);color:var(--blue-ink)}
.global-results{margin-top:8px;display:grid;gap:8px}
.gr-hit{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 15px;cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.gr-hit:hover{border-color:var(--blue)}
.gr-hit .sub{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--blue-ink)}
.gr-hit h3{margin:2px 0;font-size:16px}
.gr-hit p{margin:0;color:var(--muted);font-size:13px}
.gr-empty{color:var(--muted);font-size:14px;padding:8px 2px}

/* ---------- subject view ---------- */
.layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:28px;align-items:start}
.rail{position:sticky;top:14px}.rail-card{background:#fff;border:1px solid var(--line);box-shadow:0 4px 16px rgba(23,45,59,.04)}
.rail-title{padding:14px 15px 8px;font:600 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.nav{display:flex;flex-direction:column;padding:4px 8px 10px;max-height:62vh;overflow:auto}.nav button{border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:6px;cursor:pointer;display:flex;gap:9px;justify-content:space-between;align-items:center;color:#344e5c}.nav button:hover,.nav button.current{background:var(--blue-pale);color:var(--blue-ink)}.nav small{color:#748894;font-family:var(--mono)}
.nav .tick{width:18px;height:18px;border-radius:50%;border:2px solid #b9c8d0;flex:0 0 auto}
.nav button.done .tick{background:var(--green);border-color:var(--green)}
.nav button.done .tick::after{content:"✓";color:#fff;font-size:11px;display:grid;place-items:center;height:100%}
.rule-card{margin-top:12px;padding:15px;background:var(--ink);color:#e8f0f4}.rule-card strong{font-family:var(--serif);font-size:19px}.rule-card p{font-size:13px;margin:7px 0 0;color:#c7d5dc}
.content{min-width:0}
.section{scroll-margin-top:18px;margin-bottom:18px;background:#fff;border:1px solid var(--line);box-shadow:0 5px 18px rgba(23,45,59,.045)}
.section-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.section-num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:white;font:600 13px var(--mono)}
.section.is-read .section-num{background:var(--green)}
.section-head h2{font:650 clamp(24px,3vw,34px)/1.05 var(--serif);letter-spacing:-.02em;margin:0}.section-head p{margin:3px 0 0;color:var(--muted);font-size:14px}
.section-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.section-count{font:600 12px var(--mono);color:var(--blue-ink)}
.read-toggle{border:1px solid #b9c8d0;background:#fff;border-radius:20px;padding:7px 12px;font:600 12px var(--mono);cursor:pointer;color:var(--muted)}
.read-toggle:hover{border-color:var(--green);color:var(--green)}
.section.is-read .read-toggle{background:var(--green-pale);border-color:var(--green);color:var(--green)}
.section-body{padding:20px}
.callout{display:grid;grid-template-columns:auto 1fr;gap:12px;background:var(--blue-pale);padding:15px 16px;border-left:4px solid var(--blue);margin-bottom:18px}.callout b{color:var(--blue-ink)}.callout p{margin:0;color:#36566a}.callout svg{margin-top:2px;color:var(--blue)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.fact.wide{grid-column:1/-1}.diagram{margin:15px 0 2px;padding:12px;background:var(--diagram-bg);border:1px solid var(--line);border-radius:6px;overflow:hidden}.diagram svg{display:block;width:100%;max-height:390px;height:auto;color:var(--ink)}.diagram text{fill:currentColor}.fig{margin:14px 0 2px;border-top:1px solid var(--line);padding-top:12px}.fig img{display:block;max-width:100%;height:auto;border-radius:6px;border:1px solid var(--line);background:#fff}.fig figcaption{margin-top:7px;font-size:12px;line-height:1.4;color:var(--muted)}
.figref{margin:12px 0 2px;padding:9px 12px;font-size:12.5px;line-height:1.45;color:var(--muted);background:var(--diagram-bg);border:1px dashed var(--line);border-radius:6px}.figref em{color:var(--ink);font-style:normal;font-weight:600}
.fact{position:relative;border:1px solid var(--line);border-radius:8px;padding:15px 16px;background:#fff;min-width:0;transition:box-shadow .4s}
.fact.flash{box-shadow:0 0 0 4px rgba(8,105,201,.35)}
.fact h3{font-size:18px;line-height:1.15;margin:0 0 8px}.fact p{margin:0;color:#455e6c}.fact ul{margin:8px 0 0;padding-left:19px;color:#3e5866}.fact li+li{margin-top:4px}
.fact .tag{display:inline-block;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--blue-ink);background:var(--blue-pale);padding:4px 6px;border-radius:4px;margin-bottom:9px}
.fact.warning{background:var(--coral-pale);border-color:#efc7be}.fact.warning .tag{background:#fff;color:#9e321f}
.fact.pearl{background:var(--amber-pale);border-color:#ead4a5}.fact.pearl .tag{background:#fff;color:#7e5103}
.fact.hidden-by-user{display:none}.edit-mode .hide-fact{display:flex}
.hide-fact{display:none;position:absolute;right:8px;top:8px;width:28px;height:28px;border:0;background:#fff;border-radius:50%;box-shadow:0 1px 5px rgba(0,0,0,.16);align-items:center;justify-content:center;cursor:pointer;color:#8b3829}.hide-fact:hover{background:#ffe6e0}
.enzyme-list{border:1px solid var(--line);border-bottom:0}
.enzyme-row{display:grid;grid-template-columns:1.1fr 1.3fr 1fr 1.5fr;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line);align-items:start}
.enzyme-row.head{background:#eef3f5;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:#506672}
.enzyme-row:not(.head):nth-child(odd){background:#f9fbfc}.enzyme-row strong{color:#173d56}
.cell-label{display:none}
.route{display:flex;align-items:stretch;gap:0;margin:14px 0;overflow:visible}
.route-step{flex:1;min-width:0;background:#f1f6f8;border:1px solid #cad8df;padding:11px 7px;text-align:center;font-weight:650;font-size:13px;line-height:1.25;overflow-wrap:anywhere;position:relative}
.route-step+.route-step{border-left:0}.route-step.key{background:var(--blue-pale);color:var(--blue-ink)}
.route-step small{display:block;font-weight:500;color:var(--muted);font-size:10px;line-height:1.25;margin-top:4px}
.compare{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:12px 0}.compare>div{padding:14px}.compare>div+div{border-left:1px solid var(--line)}.compare h4{font-size:16px;margin:0 0 7px;color:var(--blue-ink)}.compare ul{margin:0;padding-left:18px}
.mnemonic{border:1px dashed #91a7b3;padding:12px 14px;margin-top:10px;background:#f8fbfc}.mnemonic b{font-family:var(--mono);font-size:12px;color:var(--coral)}
.personal-empty{text-align:center;padding:34px 20px;border:1px dashed #9fb2bc;background:#f8fbfc}
.personal-empty h3{font:650 24px var(--serif);margin:0 0 6px}.personal-empty p{max-width:520px;margin:0 auto 15px;color:var(--muted)}
.personal-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.personal-fact{background:#fff9e9;border:1px solid #e6cf91;border-radius:8px;padding:15px;position:relative}
.personal-fact h3{margin:0 36px 6px 0;font-size:18px}.personal-fact p{margin:0;color:#4f5d61}
.personal-fact .delete-personal{position:absolute;right:8px;top:8px;border:0;background:transparent;color:#8b3829;cursor:pointer;padding:6px}
.editor{display:none;background:#eef6fa;border:1px solid #bcd5e2;padding:18px;margin-bottom:16px}.edit-mode .editor{display:block}
.editor h3{font:650 23px var(--serif);margin:0 0 5px}.editor-note{font-size:13px;color:#536c79;margin:0 0 13px}
.form-grid{display:grid;grid-template-columns:1fr 170px;gap:10px}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid #b5c7d0;background:#fff;border-radius:6px;padding:10px 11px;outline:none}
.form-grid textarea{grid-column:1/-1;min-height:78px;resize:vertical}
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,105,201,.12)}
.editor-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.file-input{display:none}
.no-results{display:none;text-align:center;padding:50px 20px;background:#fff;border:1px solid var(--line)}.no-results.show{display:block}.no-results h2{font:650 28px var(--serif);margin:0 0 5px}.no-results p{margin:0;color:var(--muted)}
.soon-empty{text-align:center;padding:70px 24px;background:#fff;border:1px solid var(--line);border-radius:10px;margin-top:18px}
.soon-empty .big{font-size:52px}
.soon-empty h2{font:650 32px var(--serif);margin:12px 0 8px}
.soon-empty p{max-width:520px;margin:0 auto 18px;color:var(--muted)}
@media(max-width:1020px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.layout{grid-template-columns:1fr}.rail{position:static}.rail-card{overflow:hidden}.nav{display:grid;grid-template-columns:repeat(4,1fr);max-height:none}.nav button{flex-direction:column;gap:4px;align-items:flex-start}.rule-card{display:none}.grid.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.page{padding:14px 12px 46px}.masthead{grid-template-columns:1fr;padding-top:15px}.mast-stats{min-width:0}.toolbar{grid-template-columns:1fr}.actions{justify-content:flex-start}.btn{flex:1;justify-content:center}.tiles{grid-template-columns:1fr}.layout{gap:14px}.nav{grid-template-columns:repeat(2,1fr)}.section-head{grid-template-columns:auto 1fr;padding:15px}.section-side{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between}.section-body{padding:14px}.grid,.grid.three,.personal-list{grid-template-columns:1fr}.enzyme-row,.enzyme-row.head{grid-template-columns:1fr;gap:5px}.enzyme-row.head{display:none}.enzyme-row{padding:13px}.enzyme-row>div{display:grid;grid-template-columns:108px 1fr;gap:8px}.cell-label{display:block;font:600 10px var(--mono);text-transform:uppercase;color:#70848f}.route{flex-direction:column}.route-step+.route-step{border-left:1px solid #cad8df;border-top:0}.compare{grid-template-columns:1fr}.compare>div+div{border-left:0;border-top:1px solid var(--line)}.form-grid{grid-template-columns:1fr}.form-grid textarea{grid-column:auto}.masthead h1{font-size:42px}.lede{font-size:16px}}
@media print{body{background:#fff}.page{max-width:none;padding:0}.toolbar,.rail,.editor,.hide-fact,.delete-personal,.read-toggle,.back-btn{display:none!important}.layout{display:block}.section{break-inside:avoid;box-shadow:none}.fact{break-inside:avoid}.masthead{padding-top:0}.masthead h1{font-size:40px}.section-head h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.toast{transition:none}}

/* ---------- 20th Notebook site additions ---------- */
:root{--diagram-bg:#f4f8fa}
.tile{text-decoration:none;color:inherit;display:block}
.tile[aria-disabled]{cursor:default}
.tile[aria-disabled]:hover{transform:none;box-shadow:0 5px 18px rgba(23,45,59,.045)}
.gr-hit{text-decoration:none;color:inherit}
.gr-hit h3{color:var(--ink)}

/* ---------- dark mode ---------- */
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0d171e;--white:#15242e;--ink:#e7eff4;--muted:#93a7b3;--line:#2a4254;
  --blue:#6fb0f2;--blue-ink:#a9cff7;--blue-pale:#152a3d;--cyan:#4cc3d1;
  --coral:#ec937f;--coral-pale:#3a2320;--amber:#d9ab55;--amber-pale:#38300f;
  --green:#55bd97;--green-pale:#14342a;--purple:#ab8cf2;--purple-pale:#2b2347;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --diagram-bg:#f4f8fa; /* diagrams keep a light box in dark mode: hand-drawn SVGs use hardcoded light-theme colors */
}
[data-theme="dark"] .diagram svg{color:#142735} /* currentColor labels stay dark-on-light inside the light diagram box */
[data-theme="dark"] .search input,
[data-theme="dark"] .form-grid input,
[data-theme="dark"] .form-grid select,
[data-theme="dark"] .form-grid textarea{background:var(--white);border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .btn{background:var(--white);border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .btn.primary{background:#e7eff4;border-color:#e7eff4;color:#0d171e}
[data-theme="dark"] .tile,[data-theme="dark"] .section,[data-theme="dark"] .fact,
[data-theme="dark"] .stat,[data-theme="dark"] .gr-hit,[data-theme="dark"] .rail-card,
[data-theme="dark"] .no-results,[data-theme="dark"] .soon-empty,
[data-theme="dark"] .personal-fact{background:var(--white);border-color:var(--line)}
[data-theme="dark"] .masthead,[data-theme="dark"] .section-head,[data-theme="dark"] .footer-note{border-color:var(--line)}
[data-theme="dark"] .nav button{color:#b9cdd8}
[data-theme="dark"] .nav button:hover,[data-theme="dark"] .nav button.current{background:var(--blue-pale);color:var(--blue-ink)}
[data-theme="dark"] .fact p,[data-theme="dark"] .fact ul,[data-theme="dark"] .lede,
[data-theme="dark"] .tile .tagline,[data-theme="dark"] .gr-hit p,[data-theme="dark"] .gr-hit h3{color:#a9bdc8}
[data-theme="dark"] .callout{background:var(--blue-pale)}
[data-theme="dark"] .callout p{color:#a9c6d8}
[data-theme="dark"] .section-num{background:#e7eff4;color:#0d171e}
[data-theme="dark"] .section.is-read .section-num{background:var(--green);color:#fff}
[data-theme="dark"] .rule-card{background:#080f15}
[data-theme="dark"] .toast{background:#000;color:#fff}
[data-theme="dark"] .fig img{background:var(--white);border-color:var(--line)}
[data-theme="dark"] .mnemonic{background:#15242e;border-color:var(--line)}
[data-theme="dark"] .route-step{background:#15242e;border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .route-step small{color:var(--muted)}
[data-theme="dark"] .route-step.key{background:var(--blue-pale);color:var(--blue-ink)}
[data-theme="dark"] .enzyme-row{border-color:var(--line)}
[data-theme="dark"] .enzyme-row.head{background:#0d171e}
[data-theme="dark"] .enzyme-row:not(.head):nth-child(odd){background:#111f29}
[data-theme="dark"] .enzyme-row strong{color:#cfe3ef}
[data-theme="dark"] .personal-empty{background:#15242e;border-color:var(--line)}
[data-theme="dark"] .editor{background:#12222c;border-color:var(--line)}
[data-theme="dark"] .read-toggle{background:var(--white);border-color:var(--line);color:var(--muted)}
[data-theme="dark"] .hide-fact{background:#1c2f3b;color:#ec937f}
[data-theme="dark"] .mast-stats{background:var(--line)}
[data-theme="dark"] mark{background:#6b5a1e;color:#fff}
[data-theme="dark"] a{color:var(--blue-ink)}
[data-theme="dark"] .badge.soon{background:#1c2f3b;color:var(--muted)}
[data-theme="dark"] .cell-label,[data-theme="dark"] .editor-note,[data-theme="dark"] .footer-note,
[data-theme="dark"] .micro,[data-theme="dark"] .nav small,[data-theme="dark"] .search svg{color:var(--muted)}
[data-theme="dark"] .personal-fact p{color:#c9d6dd}
[data-theme="dark"] .personal-fact .delete-personal{color:#ec937f}
[data-theme="dark"] .enzyme-row.head{color:#9db4c0}