:root{
  --ink:#172126;
  --muted:#66727a;
  --paper:#fffdf7;
  --paper-edge:#e8e2d5;
  --binder:#253d48;
  --binder-dark:#152831;
  --metal:#aeb8bb;
  --teal:#1f9289;
  --red:#b44c4c;
  --amber:#c4852f;
  --blue:#43789d;
  --purple:#6d5b91;
  --green:#507b62;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% 12%,#52677055,transparent 30%),
    linear-gradient(135deg,#25343b,#111c21 70%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.5;
}
button,input{font:inherit}
button{color:inherit}
.topbar{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:12px clamp(18px,4vw,58px);
  color:#fff;
  background:#111d22dd;
  border-bottom:1px solid #ffffff1c;
  backdrop-filter:blur(12px);
  position:sticky;
  top:0;
  z-index:20;
}
.brand{border:0;background:transparent;color:#fff;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;padding:0}
.brand-mark{width:38px;height:38px;border:1px solid #63cfc3;border-radius:8px;color:#63cfc3;display:grid;place-items:center;font-size:28px}
.brand strong,.brand small{display:block}
.brand strong{font-size:.94rem}
.brand small{font-size:.72rem;color:#aabcc4;letter-spacing:.12em;text-transform:uppercase}
.top-actions{display:flex;align-items:center;gap:18px}
.access-note{font-size:.75rem;color:#a8b9c0}
.find-button{border:1px solid #ffffff35;background:#ffffff0c;color:#eef5f6;border-radius:8px;padding:9px 12px;cursor:pointer}
kbd{margin-left:8px;font-size:.68rem;color:#b7c8ce;background:#ffffff12;border:1px solid #ffffff28;border-radius:4px;padding:3px 6px}
.workspace{padding:clamp(24px,4vw,54px) clamp(12px,4vw,58px) 34px}
.binder{
  width:min(1240px,calc(100vw - 190px));
  min-height:750px;
  margin:0 auto;
  display:grid;
  grid-template-columns:68px minmax(0,1fr);
  position:relative;
  background:linear-gradient(105deg,var(--binder-dark),var(--binder) 14%,#32515e);
  border:1px solid #55717c;
  border-radius:20px 10px 10px 20px;
  padding:22px 28px 22px 0;
  box-shadow:0 30px 80px #0008, inset 0 0 0 3px #ffffff0a;
}
.binder::after{content:"";position:absolute;inset:8px;border:1px solid #ffffff12;border-radius:14px 7px 7px 14px;pointer-events:none}
.binder-spine{display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:58px 0;z-index:2}
.binder-spine span{width:54px;height:14px;border-radius:999px;background:linear-gradient(#e4e9e9,#89979b 45%,#f5f7f7 58%,#707d81);box-shadow:0 3px 4px #0008;transform:translateX(18px)}
.binder-paper{
  min-width:0;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:6px 10px 10px 6px;
  box-shadow:0 7px 22px #0005,inset 12px 0 22px #c4beb042;
  position:relative;
  z-index:1;
}
.binder-paper::before{content:"";position:absolute;inset:10px 9px 10px 16px;border:1px solid #ded8cb;border-radius:3px;pointer-events:none}
.binder-page{min-height:704px;padding:clamp(32px,5vw,66px);position:relative}
.binder-tabs{position:absolute;top:44px;right:-108px;display:flex;flex-direction:column;gap:7px;z-index:3}
.binder-tab{
  width:130px;
  min-height:72px;
  border:0;
  border-radius:0 9px 9px 0;
  padding:11px 10px 11px 22px;
  color:#fff;
  font-weight:850;
  font-size:.76rem;
  line-height:1.15;
  letter-spacing:.04em;
  text-align:right;
  cursor:pointer;
  box-shadow:4px 5px 10px #0004;
  transition:transform .18s,filter .18s;
}
.binder-tab:hover,.binder-tab:focus-visible{transform:translateX(8px);filter:brightness(1.08)}
.binder-tab.active{transform:translateX(15px);box-shadow:6px 8px 18px #0006}
.binder-tab:nth-child(1){background:var(--red)}
.binder-tab:nth-child(2){background:var(--amber)}
.binder-tab:nth-child(3){background:var(--teal)}
.binder-tab:nth-child(4){background:var(--blue)}
.binder-tab:nth-child(5){background:var(--purple)}
.binder-tab:nth-child(6){background:var(--green)}
.cover-page{min-height:570px;display:grid;align-content:center;max-width:760px;margin:auto}
.cover-kicker,.eyebrow{margin:0 0 14px;color:var(--teal);font-size:.76rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.cover-page h1{font:400 clamp(2.8rem,6vw,5.6rem)/.96 Georgia,serif;letter-spacing:-.045em;margin:0;max-width:800px}
.cover-page .subtitle{font-size:clamp(1rem,2vw,1.25rem);color:#5c6970;max-width:650px;margin:28px 0}
.cover-rule{height:6px;width:128px;background:linear-gradient(90deg,var(--teal),#87d2ca);border-radius:99px;margin-bottom:24px}
.cover-instruction{display:flex;align-items:center;gap:12px;color:#47555c;font-weight:750}
.cover-instruction span{width:34px;height:34px;border-radius:50%;background:#e1f1ee;color:#187a73;display:grid;place-items:center}
.section-page{animation:pageTurn .28s ease-out}
@keyframes pageTurn{from{opacity:.35;transform:translateX(14px)}to{opacity:1;transform:none}}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;border-bottom:2px solid #ded7c9;padding-bottom:20px;margin-bottom:22px}
.section-head h1{font:400 clamp(2.3rem,4vw,4rem)/1 Georgia,serif;margin:0}
.section-head p{max-width:450px;color:var(--muted);margin:0}
.binder-tools{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.search{flex:1;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9d3c6;border-radius:7px;padding:0 14px;box-shadow:inset 0 1px 2px #0000000a}
.search input{width:100%;border:0;background:transparent;padding:13px 0;outline:0;color:var(--ink);font-size:1rem}
.back-cover{border:1px solid #d7d0c2;background:#f6f1e7;border-radius:7px;padding:11px 14px;cursor:pointer;font-weight:800}
.alphabet{display:flex;gap:4px;overflow-x:auto;padding:2px 2px 14px;margin-bottom:12px;border-bottom:1px solid #e3ddd1}
.letter-tab{min-width:32px;height:38px;border:1px solid #d7d0c2;background:#f8f4eb;border-radius:6px 6px 2px 2px;font-weight:850;color:#536168;cursor:pointer}
.letter-tab:hover:not(:disabled),.letter-tab:focus-visible:not(:disabled){border-color:#319b92;color:#177c74}
.letter-tab.active{background:var(--teal);border-color:var(--teal);color:#fff}
.letter-tab:disabled{opacity:.3;cursor:default}
.index-title{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px}
.index-title h2{font:400 1.6rem/1 Georgia,serif;margin:0}
.index-title span{font-size:.78rem;color:#718087}
.resource-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.resource-row{
  border:1px solid #ddd7ca;
  background:#fff;
  border-radius:7px;
  min-height:92px;
  padding:14px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  text-align:left;
  cursor:pointer;
  transition:.18s;
}
.resource-row:hover,.resource-row:focus-visible{border-color:#73afa9;box-shadow:0 7px 18px #253d4815;transform:translateY(-1px)}
.row-image{width:76px;height:64px;object-fit:contain;background:#eef4f3;border-radius:6px;padding:6px}
.row-letter{width:42px;height:42px;border-radius:5px;background:#edf1f0;color:#287c75;display:grid;place-items:center;font:700 1.3rem Georgia,serif}
.row-copy{min-width:0}
.row-copy strong,.row-copy small{display:block}
.row-copy strong{font:700 1rem/1.2 Georgia,serif}
.row-copy small{font-size:.76rem;color:#748188;margin-top:6px}
.row-arrow{font-size:1.25rem;color:#1e8a82}
.empty{padding:50px;text-align:center;color:#718087;border:1px dashed #cec7b8;border-radius:8px}
.safety-footer{max-width:1080px;margin:24px auto 0;color:#c8d3d7;font-size:.82rem;text-align:center}
.safety-footer strong{color:#fff}
dialog{border:0;border-radius:14px;padding:0;width:min(780px,calc(100% - 32px));max-height:min(88vh,920px);box-shadow:0 30px 80px #0009}
dialog::backdrop{background:#061015d9;backdrop-filter:blur(4px)}
dialog form{padding:38px;position:relative;background:#fffdf8}
.close{position:absolute;right:16px;top:12px;border:0;background:transparent;font-size:28px;color:#58717e;cursor:pointer}
dialog h2{font:400 clamp(2rem,4vw,3rem)/1.05 Georgia,serif;margin:0}
.done{margin-top:24px;background:var(--binder-dark);color:#fff;border:0;border-radius:7px;padding:12px 22px;font-weight:800;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
[hidden]{display:none!important}
@media(max-width:900px){
  .binder{width:calc(100vw - 32px);grid-template-columns:45px;padding:18px 18px 82px 0}
  .binder-spine span{width:44px;transform:translateX(13px)}
  .binder-tabs{top:auto;right:10px;left:10px;bottom:9px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
  .binder-tab{width:auto;min-height:49px;border-radius:6px;padding:7px 5px;text-align:center;box-shadow:none;font-size:.68rem}
  .binder-tab.active,.binder-tab:hover,.binder-tab:focus-visible{transform:translateY(-3px)}
  .resource-list{grid-template-columns:1fr}
  .section-head{display:block}.section-head p{margin-top:13px}
}
@media(max-width:640px){
  .topbar{position:static}.brand strong{font-size:.84rem}.access-note{display:none}.find-button{font-size:.78rem}kbd{display:none}
  .workspace{padding:14px 8px 28px}
  .binder{width:calc(100vw - 24px);min-height:720px;display:block;padding:12px 12px 74px;border-radius:13px}
  .binder-spine{display:none}
  .binder-paper{min-height:620px}
  .binder-page{min-height:620px;padding:30px 22px}
  .binder-tabs{top:auto;right:8px;left:8px;bottom:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;z-index:3}
  .binder-tab{width:auto;min-height:45px;border-radius:6px;padding:7px 5px;text-align:center;box-shadow:none}
  .binder-tab.active,.binder-tab:hover,.binder-tab:focus-visible{transform:translateY(-3px)}
  .cover-page{min-height:500px}
  .cover-page h1{font-size:clamp(2.7rem,13vw,4.3rem)}
  .binder-tools{display:block}.back-cover{margin-bottom:10px}.search{width:100%}
  .alphabet{gap:5px}.letter-tab{min-width:34px}
  .resource-row{grid-template-columns:auto 1fr auto;padding:11px;gap:10px}
  .row-image{width:60px;height:58px}
  dialog form{padding:34px 22px}
}