body{margin:0}
h1,h2{margin:0 0 .5rem}
ul{margin:0;padding-inline-start:1.1rem}
input[type=range]{inline-size:100%}
h3{margin:0 0 .42rem}
p{margin:0 0 1rem}
ol{margin:0;padding-inline-start:1.35rem}
dl{margin:0}
dt{margin:0}
dd{margin:0}
figure{margin:0}
figcaption{margin:.5rem 0 0}
table{border-collapse:collapse}
caption{text-align:start}
address{font-style:normal}
img,svg{max-inline-size:100%}
a{color:var(--coolAccent2)}
html{scroll-padding-block-start:4.6rem}

body{
  background:var(--coolBg);
  color:var(--coolInk);
  font-family:Onest,"Segoe UI",system-ui,sans-serif;
  font-weight:400;
  font-size:1rem;
  line-height:1.62;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

h1,h2{
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.015em;
  max-inline-size:22ch;
}
h1{font-size:1.62rem}
h2{font-size:1.35rem}
h3{
  font-weight:800;
  font-size:1.02rem;
  line-height:1.3;
  letter-spacing:-.008em;
  max-inline-size:34ch;
}

/* ================================================================
   top band: the mark, the reach, and the list of pages
   ================================================================ */
.coolSkip{
  position:absolute;
  inset-block-start:-4rem;
  inset-inline-start:.6rem;
  z-index:9;
  padding:.55rem .8rem;
  background:var(--coolAccent);
  color:var(--coolInk);
  font-weight:800;
  font-size:.84rem;
  text-decoration:none;
  transition:inset-block-start 120ms linear;
}
.coolSkip:focus{inset-block-start:.6rem}

.coolTopBand{
  background:var(--coolInk);
  color:var(--coolBg);
  border-block-end:6px solid var(--coolAccent);
}
.coolTopBandInner{
  max-inline-size:70rem;
  margin:0 auto;
  padding:.9rem 1.1rem 0;
}
.coolTopMark{
  margin:0 0 .35rem;
  font-weight:800;
  font-size:.94rem;
  letter-spacing:.04em;
}
.coolMarkDot{
  display:inline-block;
  inline-size:.62rem;
  block-size:.62rem;
  margin-inline-end:.5rem;
  background:var(--coolAccent);
  vertical-align:baseline;
}
.coolMarkPlace{
  display:block;
  font-weight:400;
  letter-spacing:0;
  font-size:.82rem;
  opacity:.78;
  margin-inline-start:1.12rem;
}
.coolTopReach{
  margin:0 0 .7rem;
  font-size:.84rem;
  line-height:1.5;
}
.coolTopReach a{
  color:var(--coolBg);
  font-weight:800;
  text-decoration-color:var(--coolAccent);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.coolTopPhone{
  display:block;
  opacity:.78;
  max-inline-size:46ch;
}
.coolNavList{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-block-start:1px solid rgba(174,184,194,.32);
}
.coolNavList li{flex:1 1 auto}
.coolNavList a{
  display:block;
  padding:.55rem .1rem .6rem;
  margin-inline-end:1.1rem;
  color:var(--coolBg);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.01em;
  text-decoration:none;
  border-block-end:3px solid transparent;
  transition:border-color 140ms linear,color 140ms linear;
}
.coolNavList a:hover,
.coolNavList a:focus-visible{
  color:#fff;
  border-block-end-color:var(--coolAccent);
}
.coolNavHere{border-block-end-color:var(--coolAccent2)}

/* ================================================================
   chapter index: a scroll strip on a phone, a fixed rail on a desk
   ================================================================ */
.coolIndex{
  background:var(--coolInk);
  border-block-start:1px solid rgba(174,184,194,.32);
}
.coolIndexList{
  margin:0;
  padding:.5rem 1.1rem .6rem;
  list-style:none;
  display:flex;
  gap:.3rem;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
}
.coolIndexLink{
  display:flex;
  align-items:baseline;
  gap:.42rem;
  white-space:nowrap;
  padding:.28rem .55rem .3rem;
  color:var(--coolBg);
  text-decoration:none;
  border:2px solid rgba(174,184,194,.3);
  transition:border-color 150ms linear,background-color 150ms linear,color 150ms linear;
}
.coolIndexLink:hover{
  border-color:var(--coolAccent);
  color:#fff;
}
.coolIndexNum{
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--coolAccent);
  font-variant-numeric:tabular-nums;
  transition:color 150ms linear;
}
.coolIndexName{
  font-size:.76rem;
  font-weight:400;
}

/* the marker: :target decides which entry on the rail is lit */
body:not(:has(.coolChapter:target)) .coolIndexList li:nth-child(1) .coolIndexLink,
body:has(#coolCh0:target) .coolIndexList li:nth-child(1) .coolIndexLink,
body:has(#coolCh1:target) .coolIndexList li:nth-child(2) .coolIndexLink,
body:has(#coolCh2:target) .coolIndexList li:nth-child(3) .coolIndexLink,
body:has(#coolCh3:target) .coolIndexList li:nth-child(4) .coolIndexLink,
body:has(#coolCh4:target) .coolIndexList li:nth-child(5) .coolIndexLink,
body:has(#coolCh5:target) .coolIndexList li:nth-child(6) .coolIndexLink,
body:has(#coolCh6:target) .coolIndexList li:nth-child(7) .coolIndexLink,
body:has(#coolCh7:target) .coolIndexList li:nth-child(8) .coolIndexLink{
  background:var(--coolAccent);
  border-color:var(--coolAccent);
  color:var(--coolInk);
}
body:not(:has(.coolChapter:target)) .coolIndexList li:nth-child(1) .coolIndexNum,
body:has(#coolCh0:target) .coolIndexList li:nth-child(1) .coolIndexNum,
body:has(#coolCh1:target) .coolIndexList li:nth-child(2) .coolIndexNum,
body:has(#coolCh2:target) .coolIndexList li:nth-child(3) .coolIndexNum,
body:has(#coolCh3:target) .coolIndexList li:nth-child(4) .coolIndexNum,
body:has(#coolCh4:target) .coolIndexList li:nth-child(5) .coolIndexNum,
body:has(#coolCh5:target) .coolIndexList li:nth-child(6) .coolIndexNum,
body:has(#coolCh6:target) .coolIndexList li:nth-child(7) .coolIndexNum,
body:has(#coolCh7:target) .coolIndexList li:nth-child(8) .coolIndexNum{
  color:var(--coolInk);
}

/* ================================================================
   the chapters themselves
   ================================================================ */
.coolDoc{
  max-inline-size:70rem;
  margin:0 auto;
  padding:0 1.1rem;
}
.coolChapter{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  padding:2.1rem 0 1.6rem;
  border-block-end:1px solid rgba(16,21,64,.24);
}
.coolChapter:last-of-type{border-block-end:0}
.coolChapterHead{
  display:flex;
  align-items:baseline;
  gap:.7rem;
  margin-block-end:.55rem;
}
.coolChapterNum{
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.16em;
  color:var(--coolAccent);
  font-variant-numeric:tabular-nums;
  padding-block-end:.18rem;
  border-block-end:3px solid var(--coolAccent);
}
.coolChapterKind{
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  opacity:.66;
}
.coolChapterBody{max-inline-size:66ch}
.coolChapterBodyWide{max-inline-size:none}
.coolChapterFoot{
  margin-block-start:auto;
  padding-block-start:1.1rem;
  font-size:.78rem;
  letter-spacing:.03em;
  opacity:.74;
}
.coolChapterFoot a{
  font-weight:800;
  text-decoration-color:var(--coolAccent);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  transition:color 150ms linear;
}
.coolChapterFoot a:hover{color:var(--coolAccent)}

.coolAside{
  margin:1.2rem 0 0;
  padding-inline-start:.9rem;
  border-inline-start:4px solid var(--coolAccent);
  font-size:.94rem;
  max-inline-size:52ch;
}
.coolLede{font-size:1.04rem;max-inline-size:58ch}

/* ================================================================
   set piece: the runbook board types itself out once
   ================================================================ */
.coolBoardWrap{margin-block-start:1.3rem}
.coolBoard{
  max-inline-size:29rem;
  border:3px solid var(--coolInk);
  background:var(--coolInk);
  color:var(--coolBg);
  padding:.85rem .95rem 1rem;
  overflow-x:auto;
}
.coolBoardTitle{
  margin:0 0 .7rem;
  padding-block-end:.55rem;
  border-block-end:1px solid rgba(174,184,194,.34);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--coolAccent);
}
.coolBoardLines{
  margin:0;
  padding:0;
  list-style:none;
  font-size:.82rem;
  line-height:1.85;
  letter-spacing:.015em;
  font-variant-numeric:tabular-nums;
}
.coolBoardRow{display:block}
.coolBoardHold{
  position:relative;
  display:inline-block;
  white-space:pre;
}
.coolBoardLine{
  display:inline-block;
  animation-name:coolType;
  animation-fill-mode:both;
  animation-timing-function:steps(28,end);
}
.coolBoardCaret{
  position:absolute;
  inset-block-start:.18em;
  inset-inline-start:0;
  inline-size:.52em;
  block-size:1.05em;
  background:var(--coolAccent);
  opacity:0;
  animation-name:coolRun;
  animation-timing-function:steps(28,end);
}
.coolBoardRow:nth-child(1) .coolBoardLine,
.coolBoardRow:nth-child(1) .coolBoardCaret{animation-delay:.30s;animation-duration:.62s;animation-timing-function:steps(29,end)}
.coolBoardRow:nth-child(2) .coolBoardLine,
.coolBoardRow:nth-child(2) .coolBoardCaret{animation-delay:.98s;animation-duration:.48s;animation-timing-function:steps(22,end)}
.coolBoardRow:nth-child(3) .coolBoardLine,
.coolBoardRow:nth-child(3) .coolBoardCaret{animation-delay:1.52s;animation-duration:.60s;animation-timing-function:steps(28,end)}
.coolBoardRow:nth-child(4) .coolBoardLine,
.coolBoardRow:nth-child(4) .coolBoardCaret{animation-delay:2.18s;animation-duration:.50s;animation-timing-function:steps(23,end)}
.coolBoardRow:nth-child(5) .coolBoardLine,
.coolBoardRow:nth-child(5) .coolBoardCaret{animation-delay:2.74s;animation-duration:.68s;animation-timing-function:steps(32,end)}
.coolBoardRow:nth-child(6) .coolBoardLine,
.coolBoardRow:nth-child(6) .coolBoardCaret{animation-delay:3.48s;animation-duration:.58s;animation-timing-function:steps(27,end)}
.coolBoardRow:nth-child(7) .coolBoardLine,
.coolBoardRow:nth-child(7) .coolBoardCaret{animation-delay:4.12s;animation-duration:.56s;animation-timing-function:steps(26,end)}
.coolBoardPark{
  display:inline-block;
  inline-size:.52em;
  block-size:1.05em;
  vertical-align:text-bottom;
  background:var(--coolAccent);
  opacity:0;
  animation:coolBlink .6s steps(1,end) 4.76s 6 both,coolRest .01s linear 8.4s forwards;
}
.coolBoardNote{
  margin:.85rem 0 0;
  font-size:.86rem;
  max-inline-size:46ch;
}

/* ================================================================
   as found, as handed over
   ================================================================ */
.coolWipeWrap{margin-block-start:1.3rem}
.coolWipePane{
  position:relative;
  inline-size:100%;
  aspect-ratio:600/340;
  border:3px solid var(--coolInk);
  background:var(--coolSurface);
  overflow:hidden;
  touch-action:pan-y;
  cursor:ew-resize;
}
.coolDiagram{
  position:absolute;
  inset:0;
  inline-size:100%;
  block-size:100%;
  display:block;
}
.coolDiagramHanded{clip-path:inset(0 0 0 var(--coolWipe))}
.coolWipeDivider{
  position:absolute;
  inset-block:0;
  inset-inline-start:var(--coolWipe);
  inline-size:3px;
  margin-inline-start:-1px;
  background:var(--coolAccent);
  pointer-events:none;
}
.coolWipeGrab{
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:50%;
  inline-size:2.2rem;
  block-size:2.2rem;
  margin:-1.1rem 0 0 -1.1rem;
  border:3px solid var(--coolInk);
  border-radius:50%;
  background:var(--coolAccent);
}
.coolWipeGrab::before,
.coolWipeGrab::after{
  content:"";
  position:absolute;
  inset-block-start:.45rem;
  inline-size:3px;
  block-size:.9rem;
  background:var(--coolInk);
}
.coolWipeGrab::before{inset-inline-start:.5rem}
.coolWipeGrab::after{inset-inline-end:.5rem}
.coolDiagramLabels{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin:.55rem 0 .9rem;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.coolDiagramLabel{
  opacity:.42;
  transition:opacity 160ms linear;
}
.coolLabelFound{opacity:1}
.coolPastMid .coolLabelFound{opacity:.42}
.coolPastMid .coolLabelHanded{opacity:1}
.coolWipeControl{
  margin:0 0 .4rem;
  max-inline-size:34rem;
}
.coolWipeControl label{
  display:block;
  font-size:.8rem;
  font-weight:800;
  margin-block-end:.3rem;
}
input[type=range]{
  accent-color:var(--coolAccent);
  block-size:2rem;
}

/* ================================================================
   the two panels that do arithmetic
   ================================================================ */
.coolSolver,
.coolPlanner{
  margin-block-start:1.3rem;
  border:3px solid var(--coolInk);
  background:var(--coolSurface);
  padding:1.1rem 1rem 1.2rem;
}
.coolSolverInputs,
.coolPlannerInputs{
  display:grid;
  gap:.9rem;
  margin-block-end:1.2rem;
}
.coolField{margin:0}
.coolField label{
  display:block;
  font-size:.82rem;
  font-weight:800;
  margin-block-end:.28rem;
}
.coolField input[type=number]{
  inline-size:100%;
  box-sizing:border-box;
  font:inherit;
  font-weight:800;
  padding:.5rem .6rem;
  color:var(--coolInk);
  background:var(--coolBg);
  border:2px solid var(--coolInk);
  transition:background-color 140ms linear,border-color 140ms linear;
}
.coolField input[type=number]:hover{background:#fff}
.coolFieldCheck{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
}
.coolFieldCheck label{
  margin:0;
  font-weight:400;
  font-size:.9rem;
}
.coolFieldCheck input[type=checkbox]{
  inline-size:1.15rem;
  block-size:1.15rem;
  margin:.16rem 0 0;
  accent-color:var(--coolAccent2);
}
.coolWorking{
  border-block-start:2px solid var(--coolInk);
  padding-block-start:.8rem;
}
.coolSolverRow{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.2rem 1rem;
  margin:0 0 .55rem;
  padding-block-end:.5rem;
  border-block-end:1px dotted rgba(16,21,64,.4);
  font-size:.9rem;
}
.coolSolverRow b{
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.coolSolverRowKey b{color:var(--coolAccent)}
.coolCapacity{margin-block-start:1.3rem}
.coolCapacityHead{
  margin:0 0 .7rem;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  max-inline-size:46ch;
}
.coolSolverNote{
  margin:1rem 0 0;
  font-size:.86rem;
  max-inline-size:60ch;
}

/* the shelf: three tiers drawn at their share of the whole */
.coolShelf{margin-block-start:1.3rem}
.coolShelfHead{
  margin:0 0 .55rem;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.coolShelfBar{
  display:flex;
  block-size:2.4rem;
  border:2px solid var(--coolInk);
  background:var(--coolBg);
  overflow:hidden;
}
.coolShelfSeg{
  display:block;
  block-size:100%;
  flex:0 0 auto;
  transition:flex-basis 240ms ease-out;
}
.coolSegDaily{flex-basis:var(--coolShareDaily,41.18%);background:var(--coolAccent)}
.coolSegWeekly{flex-basis:var(--coolShareWeekly,23.53%);background:var(--coolAccent2)}
.coolSegMonthly{flex-basis:var(--coolShareMonthly,35.29%);background:var(--coolInk)}
.coolShelfKeys{
  margin:.6rem 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.1rem;
  font-size:.8rem;
}
.coolShelfKeys li{
  display:flex;
  align-items:center;
  gap:.42rem;
}
.coolKeyChip{
  display:inline-block;
  inline-size:.85rem;
  block-size:.85rem;
  border:1px solid var(--coolInk);
}
.coolKeyDaily{background:var(--coolAccent)}
.coolKeyWeekly{background:var(--coolAccent2)}
.coolKeyMonthly{background:var(--coolInk)}

/* ================================================================
   the translation table, and the hours worked out beneath it
   ================================================================ */
.coolTableWrap{
  margin-block-start:1.2rem;
  overflow-x:auto;
  border:3px solid var(--coolInk);
  background:var(--coolSurface);
}
.coolTable{
  inline-size:100%;
  min-inline-size:33rem;
  font-size:.86rem;
}
.coolTable caption{
  padding:.75rem .9rem .6rem;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--coolInk);
  border-block-end:2px solid var(--coolInk);
}
.coolTable th,
.coolTable td{
  padding:.6rem .9rem .65rem;
  text-align:start;
  vertical-align:top;
  border-block-end:1px solid rgba(16,21,64,.28);
}
.coolTable thead th{
  font-weight:800;
  font-size:.74rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  background:var(--coolInk);
  color:var(--coolBg);
  border-block-end:0;
}
.coolTable tbody th{
  font-weight:800;
  inline-size:11rem;
  color:var(--coolAccent);
}
.coolTable tbody tr:last-child th,
.coolTable tbody tr:last-child td{border-block-end:0}
.coolTable tbody tr{transition:background-color 140ms linear}
.coolTable tbody tr:hover{background:var(--coolBg)}
.coolWhere{
  font-size:.78rem;
  letter-spacing:.03em;
  opacity:.8;
}

.coolCount{
  margin-block-start:1.4rem;
  border-inline-start:6px solid var(--coolAccent2);
  padding:.2rem 0 .2rem 1rem;
  max-inline-size:60ch;
}
.coolCountSum{
  margin:.6rem 0 0;
  padding:.7rem .85rem .75rem;
  background:var(--coolSurface);
  border:2px solid var(--coolInk);
  font-size:.88rem;
  font-variant-numeric:tabular-nums;
}
.coolCountSum b{font-weight:800;color:var(--coolAccent)}

/* ================================================================
   list shapes used across the chapters and the sub pages
   ================================================================ */
.coolWorkList{
  list-style:none;
  padding-inline-start:0;
  margin:1.25rem 0 0;
}
.coolWorkList li{
  padding:.85rem 0 .9rem .95rem;
  border-inline-start:4px solid var(--coolAccent2);
  border-block-start:1px solid rgba(16,21,64,.18);
  transition:border-color 150ms linear;
}
.coolWorkList li:hover{border-inline-start-color:var(--coolAccent)}
.coolWorkList li:last-child{border-block-end:1px solid rgba(16,21,64,.18)}
.coolWorkList b{display:block;font-weight:800}

.coolOrderList{
  list-style:none;
  padding-inline-start:0;
  margin:1.2rem 0 0;
}
.coolOrderList li{
  margin-block-end:.95rem;
  padding-block-end:.85rem;
  border-block-end:1px dashed rgba(16,21,64,.3);
}
.coolOrderMark{
  display:inline-block;
  min-inline-size:5.2rem;
  margin-inline-end:.6rem;
  font-weight:800;
  font-size:.74rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--coolAccent);
}

.coolHandoverList{
  list-style:none;
  padding-inline-start:0;
  margin:1.2rem 0 1.4rem;
}
.coolHandoverList li{
  margin-block-end:1rem;
  padding:.2rem 0 .2rem .95rem;
  border-inline-start:4px solid var(--coolInk);
}
.coolHandoverList b{font-weight:800}

.coolDefs{
  margin-block-start:1.2rem;
  border-block-start:2px solid var(--coolInk);
}
.coolDefs dt{
  padding-block-start:.85rem;
  font-weight:800;
  font-size:.92rem;
  color:var(--coolAccent);
}
.coolDefs dd{
  padding:.15rem 0 .85rem;
  border-block-end:1px solid rgba(16,21,64,.24);
  font-size:.95rem;
}

.coolSeq{
  list-style:none;
  padding-inline-start:0;
  margin:1.3rem 0 0;
  counter-reset:coolStep;
}
.coolSeq > li{
  position:relative;
  counter-increment:coolStep;
  padding:0 0 1.3rem 2.6rem;
  border-inline-start:3px solid rgba(16,21,64,.3);
  margin-inline-start:.85rem;
}
.coolSeq > li:last-child{border-inline-start-color:transparent;padding-block-end:.2rem}
.coolSeq > li::before{
  content:counter(coolStep,decimal-leading-zero);
  position:absolute;
  inset-inline-start:-.95rem;
  inset-block-start:0;
  inline-size:1.75rem;
  block-size:1.75rem;
  display:grid;
  place-content:center;
  background:var(--coolInk);
  color:var(--coolBg);
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.04em;
}
.coolSeqGate::before{background:var(--coolAccent)}
.coolSeq h3{margin-block-start:.1rem}

.coolRecord{
  margin-block-start:1.3rem;
  border:3px solid var(--coolInk);
  background:var(--coolSurface);
  padding:.9rem 1rem 1rem;
  max-inline-size:34rem;
}
.coolRecordTitle{
  margin:0 0 .7rem;
  padding-block-end:.5rem;
  border-block-end:2px solid var(--coolInk);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.coolRecordRow{
  display:flex;
  flex-wrap:wrap;
  gap:.1rem .8rem;
  margin:0 0 .5rem;
  font-size:.88rem;
}
.coolRecordRow span{
  flex:0 0 9.5rem;
  font-weight:800;
  font-size:.76rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.76;
}
.coolRecordRow b{font-weight:400}
.coolRecordNote{
  margin:.7rem 0 0;
  font-size:.84rem;
}

.coolPackList{
  list-style:none;
  padding-inline-start:0;
  margin:1.3rem 0 0;
  border-block-start:3px solid var(--coolInk);
}
.coolPackList li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.2rem .8rem;
  padding:.75rem 0 .8rem;
  border-block-end:1px solid rgba(16,21,64,.26);
}
.coolPackLeaf{
  flex:0 0 3.4rem;
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.12em;
  color:var(--coolAccent);
  font-variant-numeric:tabular-nums;
}
.coolPackWhat{flex:1 1 14rem;font-weight:800;font-size:.95rem}
.coolPackWho{flex:1 1 100%;font-size:.9rem}

/* ================================================================
   sub pages
   ================================================================ */
.coolPageMain{
  max-inline-size:70rem;
  margin:0 auto;
  padding:0 1.1rem;
}
.coolPageHead{
  padding:2.2rem 0 1.5rem;
  border-block-end:3px solid var(--coolInk);
  max-inline-size:60ch;
}
.coolPageKind{
  margin:0 0 .5rem;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--coolAccent);
}
.coolBlock{
  padding:1.9rem 0 1.6rem;
  border-block-end:1px solid rgba(16,21,64,.24);
  max-inline-size:66ch;
}
.coolBlockWide{max-inline-size:none}
.coolBlock:last-of-type{border-block-end:0}
.coolOnward{
  padding:1.6rem 0 2.2rem;
  font-size:.9rem;
}
.coolOnward a{
  font-weight:800;
  text-decoration-color:var(--coolAccent);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  transition:color 150ms linear;
}
.coolOnward a:hover{color:var(--coolAccent)}

/* legal page */
.coolPpDoc{max-inline-size:62ch;margin:0 auto;padding:2.2rem 1.1rem 2.6rem}
.coolPpHead{margin:0 0 1.6rem;padding-block-end:1.2rem;border-block-end:3px solid var(--coolInk)}
.coolPpClause{padding-block:1.6rem;border-block-end:1px solid rgba(16,21,64,.24)}
.coolPpClause h2{font-size:1.18rem;max-inline-size:32ch}
.coolPpLead{font-weight:800}
.coolPpBack{display:inline-block;margin-block-start:1.6rem;font-weight:800}

/* ================================================================
   footer
   ================================================================ */
.coolFooter{
  background:var(--coolInk);
  color:var(--coolBg);
  border-block-start:6px solid var(--coolAccent);
  margin-block-start:1.5rem;
}
.coolFooterInner{
  max-inline-size:70rem;
  margin:0 auto;
  padding:1.8rem 1.1rem 2.2rem;
}
.coolFooterName{
  margin:0 0 .7rem;
  font-weight:800;
  letter-spacing:.05em;
}
.coolFooterAddr,
.coolFooterFacts{
  margin:0 0 1rem;
  font-size:.88rem;
  line-height:1.62;
}
.coolFooterFacts{opacity:.86}
.coolFooterMail{margin:0 0 .8rem}
.coolFooterMail a,
.coolFooterLegal a,
.coolFooterPages a{
  color:var(--coolBg);
  font-weight:800;
  font-size:.9rem;
  text-decoration-color:var(--coolAccent);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  transition:color 150ms linear,text-decoration-color 150ms linear;
}
.coolFooterMail a:hover,
.coolFooterLegal a:hover,
.coolFooterPages a:hover{color:#fff;text-decoration-color:var(--coolAccent2)}
.coolFooterLegal{margin:0}
.coolFooterPages{
  margin:0 0 1rem;
  padding:0;
  list-style:none;
  font-size:.88rem;
}
.coolFooterPages li{margin-block-end:.35rem}

a:focus-visible,
input:focus-visible,
.coolNavList a:focus-visible,
.coolIndexLink:focus-visible{
  outline:3px solid var(--coolAccent);
  outline-offset:2px;
}

/* ================================================================
   wider viewports
   ================================================================ */
@media (min-width:40em){
  h1{font-size:2.05rem}
  h2{font-size:1.6rem}
  h3{font-size:1.1rem}
  .coolTopBandInner,.coolDoc,.coolFooterInner,.coolPageMain{padding-inline:2rem}
  .coolIndexList{padding-inline:2rem}
  .coolSolverInputs,.coolPlannerInputs{grid-template-columns:1fr 1fr;align-items:end}
  .coolFieldCheck{grid-column:1 / -1}
  .coolChapter{padding:2.7rem 0 2rem}
  .coolBlock{padding:2.4rem 0 2rem}
  .coolPageHead{padding-block:2.8rem 1.8rem}
  .coolRecordRow span{flex-basis:10.5rem}
}

@media (min-width:40em) and (min-height:46em){
  html{scroll-snap-type:y proximity}
  .coolChapter{
    min-block-size:100svh;
    scroll-snap-align:start;
    scroll-snap-stop:normal;
    padding-block:2.4rem 2rem;
  }
}

@media (min-width:62em){
  .coolTopBand{position:sticky;inset-block-start:0;z-index:4}
  html{scroll-padding-block-start:7rem}
  .coolTopBandInner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:2rem;
    padding-block:1.1rem 0;
  }
  .coolTopReach{text-align:right;margin-block-end:.9rem}
  .coolTopPhone{margin-inline-start:auto}
  .coolNav{grid-column:1 / -1}
  .coolNavList a{font-size:.82rem}
  .coolChapter{padding-block:3.2rem 2.4rem}
  .coolWipeWrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) 16rem;
    column-gap:2rem;
    align-items:start;
  }
  .coolWipePane{grid-row:1 / span 3}
  .coolDiagramLabels{
    flex-direction:column;
    gap:.4rem;
    margin-block-start:0;
    font-size:.9rem;
  }
  .coolSolver{
    display:grid;
    grid-template-columns:minmax(0,20rem) minmax(0,1fr);
    column-gap:2.2rem;
    padding:1.4rem 1.5rem 1.5rem;
  }
  .coolSolverInputs{grid-template-columns:minmax(0,1fr);margin-block-end:0}
  .coolFieldCheck{grid-column:auto}
  .coolSolver .coolWorking{border-block-start:0;padding-block-start:0}
  .coolCapacity{grid-column:2}
  .coolSolver .coolSolverNote{grid-column:1 / -1;border-block-start:2px solid var(--coolInk);padding-block-start:.9rem}
  .coolPlanner{
    display:grid;
    grid-template-columns:minmax(0,17rem) minmax(0,1fr);
    column-gap:2.2rem;
    padding:1.4rem 1.5rem 1.5rem;
  }
  .coolPlannerInputs{grid-template-columns:minmax(0,1fr);margin-block-end:0;align-content:start}
  .coolPlanner .coolWorking{border-block-start:0;padding-block-start:0}
  .coolShelf{grid-column:2;margin-block-start:.4rem}
  .coolPlanner .coolSolverNote{grid-column:1 / -1;border-block-start:2px solid var(--coolInk);padding-block-start:.9rem}
  .coolFooterInner{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:2rem;
  }
  .coolFooterName{grid-column:1 / -1}
  .coolFooterPages{grid-column:3;grid-row:2}
  .coolFooterMail{grid-column:3}
  .coolFooterLegal{grid-column:3}
}

@media (min-width:70em){
  .coolIndex{
    position:fixed;
    inset-inline-end:0;
    inset-block-start:50%;
    transform:translateY(-50%);
    z-index:5;
    background:transparent;
    border-block-start:0;
  }
  .coolIndexList{
    flex-direction:column;
    gap:.22rem;
    padding:.6rem .8rem .6rem .6rem;
    overflow-x:visible;
    background:var(--coolInk);
    border:3px solid var(--coolAccent);
    border-inline-end:0;
    max-inline-size:14.6rem;
  }
  .coolIndexLink{
    inline-size:100%;
    box-sizing:border-box;
    border-inline-start-width:4px;
  }
  .coolIndexName{white-space:normal}
  .coolDoc{padding-inline-end:17rem}
}

/* ================================================================
   motion: it runs once, and only where it is wanted
   ================================================================ */
@keyframes coolType{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0 0 0 0)}
}
@keyframes coolRun{
  from{inset-inline-start:0;opacity:1}
  to{inset-inline-start:100%;opacity:1}
}
@keyframes coolBlink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
@keyframes coolRest{
  to{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-snap-type:none;scroll-behavior:auto}
  .coolBoardLine{clip-path:none;animation:none}
  .coolBoardCaret{animation:none;opacity:0}
  .coolBoardPark{animation:none;opacity:1}
  .coolNavList a,
  .coolIndexLink,
  .coolIndexNum,
  .coolDiagramLabel,
  .coolShelfSeg,
  .coolWorkList li,
  .coolTable tbody tr,
  .coolChapterFoot a,
  .coolOnward a,
  .coolSkip,
  .coolField input[type=number],
  .coolFooterMail a,
  .coolFooterLegal a,
  .coolFooterPages a{transition:none}
}