.app-manual main > .wrap { width: min(calc(100% - 3rem), 1160px); padding-left: 224px; }
.app-manual-header { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 1.5rem; align-items: start; margin: 2rem 0 2.5rem; }
.app-manual-header > img { width: 80px; height: 80px; border-radius: 18px; }
.app-manual-header .kicker { font-size: .8rem; color: var(--ember); margin-bottom: .3rem; }
.app-manual-header h1 { font-size: 2.5rem; margin-bottom: .75rem; overflow-wrap: anywhere; }
.app-manual-header .lede { font-size: 1rem; line-height: 1.65; margin: 0; }
.manual-toc { position: sticky; top: 1.5rem; float: left; width: 192px; margin-left: -224px; max-height: calc(100svh - 3rem); overflow-y: auto; padding-right: 1.25rem; border-right: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.manual-toc a { display: block; padding: .6rem .65rem; color: var(--dim); font-size: .84rem; line-height: 1.4; text-decoration: none; border-left: 2px solid transparent; }
.manual-toc a:hover, .manual-toc a[aria-current="location"] { color: var(--ember); border-left-color: var(--ember); background: var(--ember-soft); }
.manual-section { display: flow-root; padding: 2.25rem 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.manual-section h2 { margin: 0 0 1.5rem; font-size: 1.65rem; line-height: 1.3; }
.manual-section h3 { margin-top: 1.5rem; }
.manual-section > p, .manual-section > ul, .manual-section > ol { font-size: .98rem; color: var(--dim); }
.manual-section li { margin-bottom: .65rem; }
.manual-section li:last-child { margin-bottom: 0; }
.manual-shot { float: right; width: 250px; max-width: 42%; margin: 0 0 1.25rem 2rem; }
.manual-shot img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 6px; background: transparent; }
.manual-shot figcaption { font-size: .75rem; line-height: 1.5; margin-top: .65rem; }
.manual-section:has(.manual-shot) > .table-scroll { clear: both; }
.manual-section .note { overflow: hidden; }
.manual-related { clear: both; border-top: 1px solid var(--line); padding-top: 2rem; margin-top: 1rem; }
.manual-related h2 { font-size: 1.4rem; margin: 0 0 1rem; }
.manual-related a { display: inline-block; margin: 0 1.5rem .75rem 0; }
.manual-source { font-size: .82rem; color: var(--muted); margin: 1.25rem 0 0; }
@media (max-width: 960px) {
  .app-manual main > .wrap { width: min(calc(100% - 2.5rem), 760px); padding-left: 0; }
  .manual-toc { float: none; display: flex; gap: .25rem; top: 0; width: auto; max-height: none; margin: 0 -1.25rem; padding: .35rem 1.25rem; overflow-x: auto; overflow-y: hidden; z-index: 10; background: var(--bg); border-right: 0; border-block: 1px solid var(--line); }
  .manual-toc a { flex: none; display: flex; align-items: center; min-height: 44px; white-space: nowrap; padding: .65rem .75rem; border-left: 0; border-bottom: 2px solid transparent; }
  .manual-toc a:hover, .manual-toc a[aria-current="location"] { border-bottom-color: var(--ember); background: transparent; }
  .manual-section { padding-top: 2rem; scroll-margin-top: 1rem; }
  .manual-section:first-of-type { border-top: 0; }
}
@media (max-width: 600px) {
  .app-manual-header { grid-template-columns: 60px minmax(0, 1fr); gap: 1rem; margin: 1.5rem 0 2rem; }
  .app-manual-header > img { width: 60px; height: 60px; border-radius: 14px; }
  .app-manual-header h1 { font-size: 1.75rem; line-height: 1.2; }
  .app-manual-header .lede { font-size: .9rem; }
  .manual-section h2 { font-size: 1.4rem; }
  .manual-shot { float: none; width: min(100%, 260px); max-width: 100%; margin: 0 auto 1.5rem; }
  .manual-related a { display: block; margin-right: 0; }
}