#drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99999 !important;
  overflow-y: auto;
  width: min(460px, 100%);
  height: 100%;
  padding: 1rem 1.25rem 1.75rem;
  background: var(--rail);
  border-left: 1px solid var(--line-strong);
  transform: translateX(100%);
}

#drawer.open { transform: none; }

#drawer-close { float: right; margin-left: 12px; }

#drawer h2 { margin: 2px 0 4px; font: 600 15px var(--sans); color: var(--ink); }

#drawer-knob { margin: 0 0 14px; font: var(--note); color: var(--dim); }

#drawer-plain { font: 500 13.5px/1.65 var(--sans); color: var(--ink-2); }

#drawer details {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

#drawer summary,
#lesson-panel summary {
  font: var(--note);
  color: var(--signal);
  list-style: none;
  cursor: pointer;
}

#drawer summary::marker,
#lesson-panel summary::marker { content: ""; }

#drawer summary::before,
#lesson-panel summary::before { content: "\25B8\00a0"; }

#drawer details[open] summary::before,
#lesson-panel details[open] summary::before { content: "\25BE\00a0"; }

#drawer-depth {
  margin-top: 9px;
  font: 500 12.5px/1.6 var(--sans);
  color: var(--ink-3)
}

#drawer .katex-display,
#lesson-panel .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 10px 0;
  padding: 11px 13px;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

#drawer-docs { margin: 14px 0 0; font: var(--note); color: var(--dim); }

#lesson-panel { font: 500 13.5px/1.6 var(--sans); color: var(--ink-2); }

#lesson-panel h2 { margin: 0 0 8px; font: 600 13px var(--sans); color: var(--ink); }

#lesson-summary {max-width: 78ch; margin: 0 0 16px;}

#lesson-steps {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

#lesson-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  max-width: 78ch;
  margin: 0;
  padding: 0 0 4px 31px;
  counter-increment: step;
}

#lesson-steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font: var(--note);
  color: var(--dim);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

#lesson-steps li:has(> button)::before { color: var(--signal); border-color: var(--signal); }

div#lesson-panel ol#lesson-steps > li > strong { font: 600 13px var(--sans); color: var(--ink); }
#lesson-steps li > div { order: 1; }

#lesson-steps li > button {
  order: 2;
  margin: 1px 0 0;
  padding: 6px 14px;
  font: 600 11.5px var(--sans);
  color: var(--ground);
  background: var(--signal);
  border-color: var(--signal);
}

#lesson-steps li > button:hover {
  background: var(--signal-lift);
  border-color: var(--signal-lift)
}

#lesson-panel details {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

#lesson-look,
#lesson-saw {
  max-width: 78ch;
  margin-top: 10px;
  color: var(--ink-3);
}

#lesson-look ul,
#lesson-saw ul { margin: 0; padding-left: 18px; }

#lesson-look li,
#lesson-saw li { margin-bottom: 7px; }

#lesson-claims {
  margin: 12px 0 0;
  padding-left: 9px;
  font: 500 11.5px/1.55 var(--sans);
  color: var(--muted);
  border-left: 2px solid var(--line-strong);
}

#drawer { transition: transform 0.12s ease-out; }