/* The illustrated cards are plain paper, in a familiar tall screen proportion. */
.manual-page { --manual-paper: #f0f1f2; --manual-card-ratio: 9 / 19.5; background: var(--manual-paper); color: #292929; }
.manual-main { width: min(1080px, calc(100% - 176px)); margin: 0 auto; padding-top: 175px; }
.manual-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 80px; padding: 0 7%; margin-bottom: 115px; }
.manual-page .manual-intro h1 { font: 650 45px/1.2 var(--sans); letter-spacing: -.045em; margin: 0; }
.manual-intro p { margin: 0; color: #8a8d90; font-size: 15px; line-height: 1.8; white-space: pre-line; }
.manual-section { margin-bottom: 122px; scroll-margin-top: 110px; }
.manual-section > h2, .manual-cta h2 { text-align: center; font-size: clamp(25px, 2.3vw, 33px); font-weight: 600; letter-spacing: -.035em; line-height: 1.35; margin: 0 0 34px; text-wrap: balance; }
.manual-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.manual-card { min-width: 0; text-align: center; }
.manual-visual { background: #fff; border-radius: 25px; aspect-ratio: var(--manual-card-ratio); display: grid; place-items: center; overflow: hidden; }
.manual-visual svg { display: block; width: 85%; max-width: 275px; height: auto; fill: none; stroke: #191a1b; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.manual-visual svg text { fill: #17191a; stroke: none; font: 18px var(--sans); text-anchor: middle; }
.manual-visual svg .small { font-size: 12px; }
.manual-visual svg .big { font-size: 43px; font-weight: 550; letter-spacing: -.03em; }
.manual-visual svg .muted { stroke: #dadcde; }
.manual-visual svg .muted-text { fill: #909597; }
.manual-visual svg .solid { fill: #070808; stroke: #070808; }
.manual-visual svg .white { fill: #fff; }
.manual-card h3 { margin: 26px 8px 10px; font-size: 17px; line-height: 1.5; font-weight: 600; }
.manual-card p { margin: 0 auto; max-width: 280px; padding: 0 12px; font-size: 14px; line-height: 1.8; color: #909396; text-wrap: pretty; }
.manual-cta { text-align: center; padding: 25px 20px 125px; }
.manual-cta h2 { margin-bottom: 12px; }
.manual-cta p { color: #909396; font-size: 16px; line-height: 1.7; margin: 0 0 46px; }
/* Six silent chapter marks and a continuous reading line. No visible labels. */
.manual-toc { position: fixed; z-index: 35; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; padding: 14px 3px 14px 12px; border: 1px solid #dedfe180; border-radius: 30px; background: #ffffffdb; box-shadow: 0 3px 20px #00000003; }
.manual-toc a { position: relative; display: grid; place-items: center; width: 44px; height: 32px; border-radius: 16px; }
.toc-bar { display: block; height: 3px; width: 12px; border-radius: 3px; background: #c8cccf; transition: width 180ms ease, background-color 180ms ease; }
.manual-toc .is-read .toc-bar { background: #888e92; }
.manual-toc a[aria-current="location"] .toc-bar { width: 25px; background: #171b1e; }
.manual-toc a:hover .toc-bar, .manual-toc a:focus-visible .toc-bar { width: 25px; background: #171b1e; }
.manual-toc a:focus-visible { outline: 2px solid #697f8f; outline-offset: -3px; }
.toc-track { position: absolute; top: 29px; bottom: 29px; width: 2px; left: 10px; overflow: hidden; background: #e2e4e6; border-radius: 2px; }
.toc-progress { display: block; height: 100%; background: #626e77; transform: scaleY(0); transform-origin: top; }
@media (max-width:1100px) {
 .manual-main { padding-top: 200px; width: calc(100% - 150px); }
 .manual-intro { padding: 0 2%; gap: 45px; margin-bottom: 85px; }
 .manual-page .manual-intro h1 { font-size: 39px; }
 .manual-section { scroll-margin-top: 135px; }
 .manual-grid { gap: 12px; }
 .manual-visual { border-radius: 22px; }
 .manual-card p { padding: 0 5px; font-size: 13px; }
}
@media (max-width:760px) {
 .manual-main { width: calc(100% - 90px); margin: 0 0 0 24px; padding-top: 200px; }
 .manual-intro { grid-template-columns: 1fr; gap: 23px; padding: 0; margin-bottom: 72px; }
 .manual-page .manual-intro h1 { font-size: 38px; }
 .manual-intro p { font-size: 14px; }
 .manual-section { margin-bottom: 85px; scroll-margin-top: 160px; }
 .manual-section > h2 { font-size: 25px; margin-bottom: 28px; }
 .manual-grid { grid-template-columns: 1fr; gap: 42px; }
 .manual-visual { border-radius: 23px; }
 .manual-card h3 { font-size: 17px; margin-top: 22px; }
 .manual-card p { font-size: 14px; }
 .manual-toc { right: 7px; padding: 9px 0 9px 6px; }
 .manual-toc a { width: 44px; height: 40px; }
 .toc-track { left: 5px; top: 29px; bottom: 29px; }
 .toc-bar { width: 10px; }
 .manual-toc a[aria-current="location"] .toc-bar { width: 21px; }
 .manual-cta { padding: 10px 0 75px; }
 .manual-cta h2 { font-size: 27px; }
 .manual-cta p { font-size: 14px; }
 .manual-page .journal-footer { width: calc(100% - 90px); margin-left: 24px; }
}
@media (max-width:374px) {
 .manual-main { width: calc(100% - 83px); margin-left: 20px; padding-top: 225px; }
 .manual-page .manual-intro h1 { font-size: 33px; }
 .manual-section { scroll-margin-top: 205px; }
 .manual-page .journal-footer { width: calc(100% - 83px); margin-left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .toc-bar { transition: none; }
}