@charset "UTF-8";

:root {
  color-scheme: dark;
  --page-black: #000000;
  --page-surface: #121212;
  --page-midnight: #0a0e27;
  --page-text: #e0e0e0;
  --page-muted: #b8b8b8;
  --page-green: #39ff14;
  --page-blue: #0080ff;
  --page-gold: #ffd700;
  --page-purple: #bf00ff;
  --page-rule: #343434;
  --page-gap: clamp(4rem, 8vw, 8rem);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; }
html { background: var(--page-black); scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--page-black); color: var(--page-text); font-size: 1rem; line-height: 1.6; }
body, input, button, textarea { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
[hidden] { display: none !important; }
a { color: var(--page-text); text-decoration-thickness: 1px; text-underline-offset: .25em; }
a, button { -webkit-tap-highlight-color: transparent; }
a:hover { color: var(--page-green); }
:focus-visible { outline: 3px solid var(--page-gold); outline-offset: 5px; }
::selection { background: var(--page-green); color: var(--page-black); }
h1, h2, h3, p, ul, figure { margin: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.15; color: var(--page-text); }
h1 { font-size: 2.25rem; letter-spacing: -.045em; max-width: 23ch; text-wrap: balance; }
h2 { font-size: 1.5rem; letter-spacing: -.025em; max-width: 38ch; text-wrap: balance; }
p, li { max-width: 72ch; }
button { color: inherit; font-size: 1rem; cursor: pointer; }
.page-shell { width: min(100%, 1280px); margin-inline: auto; padding-inline: 1.5rem; }
.page-skip { position: absolute; top: .5rem; left: 1.5rem; z-index: 5; min-height: 48px; padding: .75rem 1rem; background: var(--page-green); color: var(--page-black); border-radius: 4px; transform: translateY(-180%); }
.page-skip:focus { transform: translateY(0); }
.page-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; }
.page-name { display: inline-flex; align-items: center; gap: 1rem; min-height: 48px; font-size: 1.125rem; font-weight: 700; letter-spacing: -.025em; text-decoration: none; }
.page-name-place { font-weight: 400; color: var(--page-muted); }
.page-mark { position: relative; width: 24px; height: 24px; border-left: 3px solid var(--page-green); border-top: 3px solid var(--page-green); transform: rotate(-6deg); flex: 0 0 auto; }
.page-mark::after { content: ""; position: absolute; width: 12px; height: 12px; right: -4px; bottom: -4px; border-right: 2px solid var(--page-blue); border-bottom: 2px solid var(--page-blue); }
.page-guide-label, .page-eyebrow, .page-margin-label, .page-source-label { font-size: .875rem; font-weight: 500; letter-spacing: .025em; color: var(--page-muted); }
.page-question-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--page-rule); border-radius: 4px; overflow: hidden; }
.page-tab { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: .75rem 1rem; font-size: 1rem; font-weight: 500; line-height: 1.35; text-align: center; text-decoration: none; background: var(--page-surface); border-right: 1px solid var(--page-rule); transition: background-color 200ms ease; }
.page-tab:last-child { border-right: 0; }
.page-tab:hover { background: #1b1b1b; }
.page-tab[aria-current="page"] { color: var(--page-green); box-shadow: inset 0 -3px 0 var(--page-green); background: var(--page-black); }
.page-tab:focus-visible { outline-offset: -5px; }
.page-main { padding-bottom: var(--page-gap); }
.page-hero { padding-block: clamp(3rem, 6vw, 5.5rem) var(--page-gap); }
.page-hero-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.page-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); max-width: 16ch; margin-block: 1.5rem; }
.page-eyebrow { display: block; color: var(--page-green); }
.page-intro { font-size: 1rem; margin-top: 1.25rem; max-width: 56ch; }
.page-state-note { margin-top: 2rem; padding-left: 1.25rem; border-left: 2px solid var(--page-gold); color: var(--page-text); max-width: 55ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.page-action { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1rem; border: 1px solid var(--page-rule); border-radius: .5rem; background: var(--page-surface); color: var(--page-text); font-size: 1rem; font-weight: 500; line-height: 1.4; text-align: left; text-decoration: none; transition: transform 200ms ease, border-color 200ms ease; }
.page-actions .page-action:first-child { background: var(--page-green); border-color: var(--page-green); color: var(--page-black); }
.page-action:hover { transform: translateY(-2px); border-color: var(--page-green); color: var(--page-green); }
.page-actions .page-action:first-child:hover { color: var(--page-black); }
.page-action-quiet { background: transparent; }
.page-collage { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-top: 1rem; }
.page-collage-scene { position: relative; width: 100%; aspect-ratio: 1 / 1.04; isolation: isolate; overflow: hidden; background: var(--page-black); }
.page-paper { position: absolute; box-shadow: 0 18px 24px #000000b3; }
.page-paper-back { top: 6%; left: 3%; width: 77%; height: 70%; background: #171717; transform: rotate(-9deg); clip-path: polygon(2% 0, 97% 1%, 100% 98%, 0 100%); }
.page-paper-back::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(91deg, transparent 0 4px, #ffffff05 4px 5px); }
.page-paper-route { top: 16%; left: 14%; width: 76%; height: 65%; background: var(--page-midnight); transform: rotate(7deg); clip-path: polygon(0 1%, 100% 0, 97% 97%, 2% 100%); border-top: 1px solid #29416d; }
.page-paper-route::after { content: ""; position: absolute; top: 14%; right: 8%; width: 38%; height: 55%; border-top: 1px solid #375889; border-right: 1px solid #375889; }
.page-paper-fold { top: 27%; left: 7%; width: 71%; height: 57%; background: #303030; transform: rotate(-4deg); clip-path: polygon(0 5%, 92% 0, 100% 12%, 100% 94%, 6% 100%); }
.page-paper-fold::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(18deg, transparent 0 3px, #00000008 3px 4px); }
.page-paper-fold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(86deg, transparent 48%, #00000026 49%, #ffffff09 50%, transparent 53%); }
.page-paper-cut { width: 72%; height: 32%; left: 13%; top: 44%; background: #1c251d; border-top: 1px solid #4d684e; transform: rotate(-12deg); clip-path: polygon(0 74%, 8% 64%, 12% 39%, 22% 34%, 26% 0, 43% 15%, 46% 45%, 59% 47%, 75% 38%, 85% 31%, 95% 56%, 100% 69%, 97% 75%, 100% 90%, 80% 88%, 56% 94%, 21% 100%, 2% 95%); }
.page-paper-tab { right: 5%; top: 25%; width: 10%; height: 21%; background: #30213a; border-right: 2px solid var(--page-purple); transform: rotate(7deg); }
.page-route-line { position: absolute; left: 26%; top: 29%; width: 34%; height: 44%; border-left: 2px dashed #6a8169; border-bottom: 2px dashed #6a8169; border-radius: 0 0 0 30%; transform: rotate(-12deg); }
.page-route-point { position: absolute; width: 16px; height: 16px; background: var(--page-green); border: 5px solid var(--page-black); border-radius: 50%; outline: 1px solid #71936b; }
.page-route-point-a { left: 19%; top: 27%; }
.page-route-point-b { left: 32%; top: 66%; }
.page-route-point-c { left: 62%; top: 70%; background: var(--page-gold); outline-color: #75642f; }
.page-tape { position: absolute; top: 20%; left: 28%; width: 32%; height: 7%; background: #655b378c; transform: rotate(-3deg); clip-path: polygon(1% 5%, 98% 0, 100% 94%, 0 100%); }
.page-collage-caption { display: block; color: var(--page-muted); font-size: 1rem; text-align: center; padding-top: 1rem; }
.page-chapter-heading { padding-block: clamp(3rem, 6vw, 5rem) var(--page-gap); max-width: 72ch; margin-left: 26%; }
.page-chapter-heading h1 { margin-top: 1.5rem; }
.page-feature-row { display: grid; grid-template-columns: minmax(0, .35fr) minmax(0, 1fr); gap: 3rem; padding-top: 2rem; border-top: 1px solid var(--page-rule); margin-top: var(--page-gap); }
.page-feature-row:first-of-type { margin-top: 0; }
.page-hero + .page-feature-row { margin-top: 0; }
.page-prose { max-width: 72ch; min-width: 0; }
.page-prose p, .page-answer p { margin-top: 1.25rem; }
.page-margin { min-width: 0; }
.page-margin-label { position: relative; padding-left: 1rem; }
.page-margin-label::before { position: absolute; left: 0; top: .5rem; width: 4px; height: 4px; content: ""; background: var(--page-gold); }
.page-paper-swatch { display: block; margin: 2rem 1rem; width: 80px; height: 100px; background: #1b1b1b; border-left: 1px solid #3b3b3b; transform: rotate(-7deg); clip-path: polygon(0 2%, 95% 0, 100% 96%, 1% 100%); }
.page-feature-row:nth-child(even) .page-paper-swatch { width: 104px; height: 72px; transform: rotate(9deg); background: var(--page-midnight); border-top: 1px solid #305a89; }
.page-start .page-feature-row { grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); gap: 5rem; }
.page-start .page-feature-row:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, .55fr); }
.page-start .page-feature-row:nth-of-type(even) .page-margin { grid-column: 2; grid-row: 1; }
.page-start .page-feature-row:nth-of-type(even) .page-prose { grid-column: 1; grid-row: 1; }
.page-source-notes { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin-top: 2rem; padding-top: .75rem; border-top: 1px solid var(--page-rule); }
.page-source-notes .page-source-label { width: 100%; margin-top: 0; }
.page-source-link { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 0; max-width: 100%; font-size: 1rem; }
.page-question-list { margin-top: 1.5rem; padding-left: 1.25rem; }
.page-question-list li { padding-left: .5rem; margin-top: .75rem; font-size: 1rem; }
.page-question-list li::marker { color: var(--page-green); }
.page-next { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: var(--page-gap); padding-top: 2rem; border-top: 1px solid var(--page-rule); margin-left: 26%; }
.page-next-link { display: inline-flex; align-items: center; gap: 1.5rem; min-height: 48px; padding-block: .75rem; font-size: 1rem; text-decoration: none; max-width: 100%; }
.page-next-link::after { content: "→"; color: var(--page-green); font-size: 1.5rem; }
.page-footer { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: 5rem; padding-block: 3rem 4rem; border-top: 1px solid var(--page-rule); background: var(--page-black); }
.page-footer-note p { font-size: 1rem; color: var(--page-muted); max-width: 38ch; }
.page-chapter-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1.5rem; align-items: start; }
.page-chapter-map h2 { grid-column: 1 / -1; font-size: 1.5rem; margin-bottom: 1rem; }
.page-footer-link { display: flex; align-items: center; min-height: 48px; padding-block: .5rem; font-size: 1rem; color: var(--page-muted); text-decoration: none; line-height: 1.4; }
.page-footer-link:hover { color: var(--page-green); }
.page-checklist-section { margin-top: var(--page-gap); margin-left: 26%; max-width: 72ch; }
.page-checklist-section > p { margin-top: 1.25rem; }
.page-checklist { border: 0; padding: 0; margin: 2rem 0 0; min-inline-size: 0; }
.page-checklist legend { font-size: 1rem; color: var(--page-muted); padding: 0 0 1rem; }
.page-question-choice { display: flex; align-items: center; gap: 1.25rem; padding: 1rem; min-height: 76px; background: var(--page-surface); border: 1px solid var(--page-rule); border-bottom: 0; font-size: 1rem; cursor: pointer; }
.page-question-choice:first-of-type { border-radius: .5rem .5rem 0 0; }
.page-question-choice:last-child { border-bottom: 1px solid var(--page-rule); border-radius: 0 0 .5rem .5rem; }
.page-question-choice:hover { background: #1b1b1b; }
.page-question-choice:has(input:checked) { border-left: 3px solid var(--page-green); padding-left: calc(1rem - 2px); }
.page-question-choice input { appearance: none; position: relative; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; border: 1px solid #808080; border-radius: 4px; background: var(--page-black); color: var(--page-green); cursor: pointer; }
.page-question-choice input:checked { border-color: var(--page-green); }
.page-question-choice input:checked::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--page-green); font-size: 1.75rem; font-weight: 700; line-height: 1; }
.page-checklist-tools { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.page-checklist-status { min-height: 3.25rem; color: var(--page-muted); font-size: 1rem; margin-top: 1.25rem; }
.page-copy-fallback label { display: block; font-size: 1rem; padding-bottom: .75rem; }
.page-copy-fallback textarea { width: 100%; min-height: 160px; padding: 1rem; border: 1px solid var(--page-rule); border-radius: 4px; background: var(--page-surface); color: var(--page-text); font-size: 1rem; line-height: 1.6; resize: vertical; }
.page-answers { margin-left: 26%; max-width: 72ch; }
.page-answer { border-top: 1px solid var(--page-rule); padding-top: 2rem; margin-top: clamp(3rem, 6vw, 5rem); }
.page-answer:first-child { margin-top: 0; }
.page-answer .page-source-notes { margin-top: 1.5rem; }
.page-missing .page-chapter-heading { padding-bottom: 1rem; }

@media (min-width: 900px) {
  .page-hero-copy, .page-chapter-heading { animation: page-fade-rise 420ms ease-out; }
}
@keyframes page-fade-rise {
  from { opacity: .92; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 899px) {
  .page-hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 1.5rem; }
  .page-topbar { padding-block: 1rem; }
  .page-tab { padding-inline: .5rem; }
  .page-feature-row, .page-start .page-feature-row { grid-template-columns: minmax(0, .25fr) minmax(0, 1fr); gap: 2rem; }
  .page-start .page-feature-row:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, .25fr); }
  .page-chapter-heading, .page-next, .page-checklist-section, .page-answers { margin-left: 21%; }
  .page-footer { gap: 2rem; }
}
@media (max-width: 639px) {
  .page-guide-label { max-width: 7ch; text-align: right; line-height: 1.3; }
  .page-name { font-size: 1rem; gap: .75rem; }
  .page-name-place { display: block; }
  .page-question-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-tab { min-height: 48px; padding: .75rem .5rem; border-bottom: 1px solid var(--page-rule); }
  .page-tab:nth-child(even) { border-right: 0; }
  .page-tab:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .page-hero-split { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .page-hero { padding-top: 3rem; }
  .page-hero h1 { font-size: 2.5rem; max-width: 15ch; margin-top: 1rem; }
  .page-collage { padding-top: 0; }
  .page-collage-scene { max-width: 350px; margin-inline: auto; aspect-ratio: 1 / .88; }
  .page-chapter-heading, .page-next, .page-checklist-section, .page-answers { margin-left: 0; }
  .page-chapter-heading { padding-top: 3rem; }
  .page-feature-row, .page-start .page-feature-row, .page-start .page-feature-row:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .page-start .page-feature-row:nth-of-type(even) .page-prose, .page-start .page-feature-row:nth-of-type(even) .page-margin { grid-column: 1; grid-row: auto; }
  .page-paper-swatch { display: none; }
  .page-footer { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .page-footer-note p { max-width: 72ch; }
  .page-chapter-map { column-gap: 1rem; }
  .page-question-choice { gap: 1rem; padding: .75rem; }
  .page-question-choice:has(input:checked) { padding-left: calc(.75rem - 2px); }
  .page-checklist-tools { flex-direction: column; align-items: stretch; }
  .page-checklist-tools .page-action { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .page-action:hover { transform: none; }
}
@media print {
  .page-header, .page-footer, .page-collage, .page-checklist-tools, .page-skip { display: none; }
  .page-shell { width: 100%; padding-inline: 0; }
  .page-chapter-heading, .page-next, .page-checklist-section, .page-answers { margin-left: 0; }
  .page-feature-row { display: block; break-inside: avoid; }
  .page-margin { display: none; }
}