.theory-shell { max-width: 1120px; margin: 0 auto; padding: 56px 32px 80px; font-size: 17px; line-height: 1.85; }
.theory-shell, .theory-shell * { box-sizing: border-box; }
.theory-shell a { color: var(--theory-accent); text-decoration: none; }
.theory-shell a:hover { color: var(--link-hover); background: none; }
.theory-shell p { color: inherit; white-space: normal; }
.theory-grid { display: grid; grid-template-columns: minmax(0, 720px) minmax(190px, 1fr); gap: 64px; align-items: start; }
.theory-reading, .theory-article { min-width: 0; }
.theory-masthead { margin: 0 0 40px; padding: 8px 0 40px; border-bottom: 1px solid var(--theory-line); text-align: center; }
.theory-masthead .theory-category { color: var(--theory-muted); font-size: 14px; }
.theory-masthead h1 { margin: 14px 0 0; font-size: 32px; font-weight: 650; line-height: 1.4; letter-spacing: -.035em; }

.theory-shell .theory-index { list-style: none; padding: 0; margin: 36px 0 0; }
.theory-index > li { margin: 0; border-top: 1px solid var(--theory-line); }
.theory-index > li:last-child { border-bottom: 1px solid var(--theory-line); }
.theory-index__link { display: block; padding: 28px 0; }
.theory-index__link h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; line-height: 1.5; }
.theory-index__link p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.theory-index__link:hover h2 { color: var(--theory-accent); }

.theory-sidebar { position: sticky; top: 40px; min-width: 0; padding-left: 24px; border-left: 1px solid var(--theory-line); font-size: 14px; line-height: 1.6; }
.theory-count { margin-left: auto; padding-left: 4px; color: var(--faint); font-size: 12px; font-weight: 400; }
.theory-list { max-height: calc(100vh - 140px); padding: 4px; margin-left: -4px; overflow-y: auto; }
.theory-list__overview { display: block; padding: 4px 0 12px; color: var(--muted) !important; font-size: 12px; }
.theory-tree summary { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 0; cursor: pointer; list-style: none; color: var(--ink); font-weight: 500; }
.theory-tree summary::-webkit-details-marker { display: none; }
.theory-tree summary::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .15s ease; }
.theory-tree details[open] > summary::before { transform: rotate(45deg); }
.theory-tree summary:hover { color: var(--link-hover); }
.theory-shell .theory-tree__children { list-style: none; margin: 0 0 0 3px; padding: 0 0 0 16px; }
.theory-tree__children > li { position: relative; margin: 0; }
/* Each branch ends with an elbow, including the last child. */
.theory-tree__children > li::before { content: ""; position: absolute; top: 0; left: -16px; width: 11px; height: 20px; border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); border-bottom-left-radius: 3px; }
.theory-tree__children > li:not(:last-child)::after { content: ""; position: absolute; top: 20px; bottom: 0; left: -16px; border-left: 1px solid var(--line-strong); }
.theory-list__entry { display: block; min-height: 40px; padding: 9px 0; color: var(--muted) !important; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; word-break: keep-all; }
.theory-list a:hover { color: var(--ink) !important; text-decoration: underline; text-underline-offset: 4px; }
.theory-list a.is-current { color: var(--ink) !important; font-weight: 600; }
.theory-list__entry.is-current { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }

.theory-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--theory-line); }
.theory-pagination a { display: flex; flex-direction: column; gap: 6px; }
.theory-pagination span { color: var(--faint); font-size: 12px; }
.theory-pagination strong { color: var(--muted); font-size: 15px; font-weight: 500; line-height: 1.6; }
.theory-pagination a:hover strong { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.theory-pagination__next { grid-column: 2; text-align: right; }
@media (max-width: 1020px) {
  .theory-grid { grid-template-columns: minmax(0, 1fr) 190px; gap: 36px; }
  .theory-sidebar { padding-left: 20px; }
}
@media (max-width: 820px) {
  .theory-shell { max-width: 760px; padding: 20px 20px 60px; }
  .theory-grid { display: flex; flex-direction: column; gap: 32px; }
  .theory-sidebar { position: static; order: -1; width: 100%; border-left: 0; border-bottom: 1px solid var(--theory-line); padding: 0; }
  .theory-list__overview { padding-bottom: 0; }
  .theory-list { max-height: 360px; padding-bottom: 12px; }
  .theory-list__entry { padding: 10px 0; font-size: 14px; }
  .theory-reading { width: 100%; }
  .theory-masthead { padding: 8px 0 32px; margin-bottom: 32px; }
  .theory-masthead h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .theory-tree summary::before { transition: none; } }
@media (max-width: 520px) {
  .theory-shell { font-size: 16px; }
  .theory-masthead h1 { font-size: 26px; }
  .theory-content h2 { font-size: 22px; }
  .theory-content h3, .theory-index__link h2 { font-size: 19px; }
  .theory-content pre { padding: 16px; font-size: 13px; }
  .theory-pagination { gap: 20px; }
  .theory-pagination strong { font-size: 14px; }
}