/* 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; }
/* Preserve source PNGs; clip the emulator title, system status and navigation bars in layout. */
.manual-visual-app { padding: 14px; aspect-ratio: auto; background: #fafbfc; box-shadow: inset 0 0 0 1px #ffffff, 0 8px 28px #263f5610; }
.manual-screenshot-window { position: relative; width: 100%; aspect-ratio: 648 / 1320; overflow: hidden; border-radius: 19px; box-shadow: 0 0 0 1px #dce3e9; background: #f2f4f6; }
.manual-screenshot-window img { display: block; position: absolute; width: 100%; height: auto; top: -7.272727%; left: 0; }
.manual-entry-section .manual-card p { max-width: none; text-align: left; white-space: pre-line; color: #697078; line-height: 1.9; }
.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: 32px; }
.manual-cta p { color: #909396; font-size: 16px; line-height: 1.7; margin: 0 0 46px; }
/* Chapter marks follow the remaining sections, with a continuous reading line. */
.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; }
}