.return-section { padding:var(--section-space) 0; background:#203b32; color:var(--paper); }
.return-section>.wrap { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:center; }
.map-introduction { max-width:420px; }
.map-introduction .section-kicker { color:#d1d8c7; margin:0 0 20px; }
.map-introduction h2 em { color:#d3daba; }
.map-introduction>p:not(.section-kicker) { max-width:38ch; margin:24px 0 0; color:#d1d8c7; font-size:var(--body-size); line-height:1.65; }
.reader-demo { min-width:0; width:100%; max-width:720px; margin:auto; border:1px solid #ffffff26; border-radius:12px; background:#efefe9; color:#293c31; overflow:visible; }
.reader-demo-bar { height:48px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #d9ded2; font-size:12px; color:#667060; }
.reader-demo-bar>span:first-child { display:flex; align-items:center; gap:8px; }
.reader-demo-bar .icon { width:15px; height:15px; }
.reader-page-count { font-variant-numeric:tabular-nums; }
.reader-demo-body { --rail-size:86px; position:relative; display:grid; grid-template-columns:var(--rail-size) minmax(0,1fr); }
.reader-map { --line-left:22px; position:relative; height:400px; margin-block:12px; }
.reader-map-lines { height:100%; display:grid; grid-template-rows:repeat(20,1fr); }
.map-row-button { position:relative; width:100%; height:20px; padding:0; appearance:none; border:0; border-radius:3px; background:transparent; }
.map-row-button i { position:absolute; left:var(--line-left); top:9px; display:block; width:var(--length,10px); height:2px; background:#496e58; opacity:var(--line-opacity,.18); border-radius:1px; transition:width 160ms cubic-bezier(.2,0,0,1),opacity 160ms ease; pointer-events:none; }
.map-row-button[aria-current="true"] i { height:2.5px; }
.map-row-button:focus-visible { outline-offset:-2px; }
.map-note-button { position:absolute; left:calc(var(--line-left) + 1.5px + var(--note-slot) * 12px); top:calc((var(--note-row) + .5) * 20px); transform:translateY(-50%); width:12px; height:20px; padding:0; display:grid; place-items:center; appearance:none; border:0; border-radius:3px; background:transparent; }
.map-note-button>span { display:block; width:5px; height:5px; border-radius:50%; background:#78947e; box-shadow:0 0 0 1px #efefe9; transition:background 130ms ease,box-shadow 130ms ease; pointer-events:none; }
.map-note-button:hover>span,.map-note-button:focus-visible>span { background:#3d634a; box-shadow:0 0 0 1px #efefe9,0 0 0 3px #708c7033; }
.map-note-button[aria-current="true"]>span { background:#42694e; }
.map-note-button:focus-visible { outline-offset:0; }
.map-note-button:disabled,.map-row-button:disabled { cursor:default; }
.sample-document { height:424px; overflow:auto; scrollbar-width:thin; scrollbar-color:#b8c2b0 transparent; padding:12px 14px 12px 0; scroll-behavior:auto; position:relative; outline-offset:-3px; }
.sample-document:focus-visible,.scratchpad-example [role="tabpanel"]:focus-visible { outline:2px solid #79916b; }
.sample-paper { min-height:478px; position:relative; background:#fafaf7; padding:32px 26px 46px; margin-bottom:14px; border:1px solid #e2e4db; }
.sample-paper:last-child { margin-bottom:0; }
.sample-running-title { margin-bottom:25px; color:#858d7e; font-size:10px; letter-spacing:.035em; }
.document-section-title { margin:0 0 17px; color:#77816e; font-size:13px; line-height:1.5; font-weight:500; }
.document-map-section { padding:10px 0; min-height:94px; }
.document-map-section:first-of-type { padding-top:0; }
.document-lines { display:grid; gap:9px; margin-block:22px; }
.document-lines i { display:block; width:var(--line-width); height:4px; border-radius:1px; background:#dcded7; }
.document-note { margin:20px -27px; padding:19px 25px; border-block:1px solid #d4decd; color:#496f51; background:#edf2e8; font-size:15px; line-height:1.5; scroll-margin:0; transition:background 160ms ease; }
.document-note.is-current { background:#e5eddf; }
.document-note:focus { outline:2px solid #79916b; outline-offset:-2px; }
.sample-page-number { position:absolute; bottom:17px; left:0; right:0; text-align:center; color:#929a8b; font-size:10px; }
.map-note-preview { z-index:3; position:absolute; top:var(--preview-y,70px); left:70px; width:min(260px,calc(100% - 84px)); padding:15px 18px; border:1px solid #d6ddce; border-radius:8px; background:#fffef9; box-shadow:0 5px 20px #293c3114; }
.map-preview-page { color:#6a765e; font-size:11px; }
.map-note-preview p { font-size:14px; line-height:1.5; margin-top:7px; }
.reader-demo-hint { padding:13px 16px; border-top:1px solid #d9ded2; font-size:12px; line-height:1.5; color:#616b5b; text-align:center; }
@media(max-width:1100px) { .return-section>.wrap { gap:36px; } }
@media(max-width:950px) {
 .return-section>.wrap { grid-template-columns:minmax(0,1fr); gap:32px; }
 .map-introduction { max-width:620px; margin:auto; text-align:center; }
 .map-introduction>p:not(.section-kicker) { max-width:50ch; margin-inline:auto; }
 .reader-demo { max-width:640px; }
}
@media(max-width:600px) {
 .map-introduction { text-align:left; margin:0; }
 .reader-demo-body { --rail-size:80px; }
 .reader-map { --line-left:28px; }
 .sample-document { padding-right:9px; }
 .sample-paper { padding-inline:16px; }
 .document-note { margin-inline:-17px; padding:17px 16px; font-size:14px; }
 .reader-demo-bar { padding-inline:16px; }
 .map-note-preview { left:64px; width:min(244px,calc(100% - 77px)); }
 .reader-demo-hint { font-size:11px; padding-inline:10px; }
}
@media(prefers-reduced-motion:reduce) { .map-row-button i,.map-note-button>span,.document-note { transition:none; } }
@media(prefers-contrast:more) { .map-row-button i { opacity:.8; } .map-note-button>span { background:#263e35; } }
@media print { .return-section { background:white; color:#263e35; } .map-introduction p,.map-introduction h2 em { color:#263e35!important; } .sample-document { height:auto; overflow:visible; } .reader-map,.reader-demo-hint { display:none; } .reader-demo-body { display:block; } }

/* Center the discovery hint on the highlighted note itself. */
.map-discovery-hint { position:absolute; z-index:4; padding:8px 11px; border:1px solid #d6ddce; border-radius:8px; background:#fffef9; box-shadow:0 3px 12px #293c3110; color:#385a43; font-size:12px; font-weight:500; line-height:1.2; white-space:nowrap; pointer-events:none; transform:translate(-50%,-100%); transition:opacity 180ms ease,transform 180ms ease; }
.map-discovery-hint::after { content:""; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; background:#fffef9; border-right:1px solid #d6ddce; border-bottom:1px solid #d6ddce; transform:translateX(-50%) rotate(45deg); }
.reader-demo[data-hint-dismissed] .map-discovery-hint { opacity:0; transform:translate(-50%,calc(-100% - 4px)); }
@media(prefers-reduced-motion:reduce) { .map-discovery-hint { transition:none; } }

/* A quiet discovery pulse centered on the highlighted note; never changes dot geometry. */
.map-note-button.is-pinging>span { background:#3f6a4b; box-shadow:0 0 0 2px #efefe9,0 0 0 4px #76966b38; }
.map-note-button.is-pinging::before,.map-note-button.is-pinging::after { content:""; box-sizing:border-box; position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border:1.75px solid #466b51; border-radius:50%; opacity:0; pointer-events:none; animation:note-radar 3.2s ease-out infinite; animation-play-state:paused; }
.map-note-button.is-pinging::after { animation-delay:520ms; }
.reader-demo[data-map-visible="true"] .map-note-button.is-pinging::before,.reader-demo[data-map-visible="true"] .map-note-button.is-pinging::after { animation-play-state:running; }
@keyframes note-radar {
  0%,5% { transform:scale(.65); opacity:0; }
  24% { opacity:.8; }
  50% { opacity:.45; }
  82%,100% { transform:scale(3.2); opacity:0; }
}
@media(prefers-reduced-motion:reduce) {
 .map-note-button.is-pinging::before { animation:none; transform:scale(1.45); opacity:.45; }
 .map-note-button.is-pinging::after { display:none; animation:none; }
}