html { --phone-header-bottom: var(--site-header-bottom); --phone-surface: #000; background: var(--phone-surface); color-scheme: dark; }
body { margin: 0; background: var(--phone-surface); color: #fff; font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
/* Keep the page edges black; the only light sits in the sticky model area.
   No transform/filter on ancestors: the model and reading pins retain their anchors. */
#site-page { isolation: isolate; }
.phone-page, .phone-page *, .phone-page *::before, .phone-page *::after { box-sizing: border-box; }
.phone-page { display: grid; grid-template-columns: 44% 56%; align-items: start; padding: 0; width: min(1320px, 100%); margin: 0 auto; overflow-anchor: none; }
.phone-page::before { content: ""; position: fixed; inset: 0 0 auto; height: var(--phone-header-bottom); background: var(--phone-surface); z-index: 3; pointer-events: none; }
.phone-viewport { position: sticky; top: var(--phone-header-bottom); height: calc(100svh - var(--phone-header-bottom)); overflow: hidden;
  background: radial-gradient(ellipse 44% 46% at 50% 48%, rgba(91, 118, 156, .25), rgba(43, 59, 82, .12) 45%, transparent 100%), var(--phone-surface);
}
.phone-viewport::before {
  content: "";
  position: absolute;
  inset: 24px 0 50px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(184, 204, 233, .16) .8px, transparent 1.2px) center / 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 38% 38% at 50% 50%, #000 10%, rgba(0, 0, 0, .5) 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 38% 38% at 50% 50%, #000 10%, rgba(0, 0, 0, .5) 50%, transparent 100%);
}
.phone-stage { position: absolute; inset: 24px 0 50px; z-index: 1; margin: 0; }
.phone-copy { padding: 0 32px 0 24px; min-width: 0; }
.phone-scroll-hint { position: fixed; z-index: 4; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; color: #9da1a8; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 11px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 8px #000; transform: translateX(-50%); pointer-events: none; }
.phone-scroll-hint[hidden] { display: none; }
.phone-chapter { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--phone-header-bottom)); padding: 80px 0; scroll-margin-top: 0; }
.phone-chapter--feature { min-height: calc((100svh - var(--phone-header-bottom)) * .86); }
.phone-chapter--origins { display: block; padding-top: clamp(64px, 8vh, 96px); padding-bottom: 100px; }
.phone-title { margin: 0 0 48px; font-weight: 600; }
.phone-title span { display: block; }
.phone-title--future { color: #f7f8fa; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(34px, 3.8vw, 52px); line-height: 1.1; letter-spacing: -.045em; text-wrap: balance; }
.phone-chapter.is-reading-chapter { display: block; min-height: 0; }
.phone-reading-frame, .phone-reading-content { position: relative; }
.phone-reading-content { display: flow-root; padding: 8px 0 12px; }
.phone-reading-frame.is-reading { height: var(--reading-height); overflow: clip; overflow-clip-margin: 12px; }
.phone-reading-line { display: block; }
.phone-reading-source { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: pre-line; }
.story-prose { max-width: 39ch; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: clamp(16px, 1.4vw, 20px); font-weight: 400; line-height: 1.7; color: #f4f4f4; }
.story-prose p { margin: 0 0 24px; }
.story-prose p:last-of-type { margin-bottom: 0; }
#phone-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
#phone-canvas:active { cursor: grabbing; }
#phone-canvas:focus-visible { outline: 1px solid #555; outline-offset: -4px; }
#phone-status, .phone-noscript { position: absolute; top: 45%; left: 10%; width: 80%; text-align: center; color: #888; pointer-events: none; }
.phone-story { position: relative; margin: 0 0 48px; }
.phone-story:last-child { margin-bottom: 0; }
.phone-notes { box-sizing: border-box; width: min(480px, calc(100% - 48px)); margin: 0 auto; padding: 0 0 48px; color: #9097a3; font-size: 12px; line-height: 1.7; }
.phone-notes p { margin: 0; }
.phone-notes a { text-underline-offset: 3px; }
.phone-credits { margin-top: 8px; }
.phone-credits summary { width: fit-content; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.phone-credits summary::-webkit-details-marker { display: none; }
.phone-credits summary:hover { color: #fff; }
.phone-credits summary:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.phone-credits p { margin-top: 8px; }

.story-cta { display: inline-flex; align-items: center; gap: 24px; margin-top: 28px; padding: 12px 20px; border: 0; border-radius: 999px; background: #fff; color: #000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; font-weight: 600; line-height: 1.5; text-decoration: none; pointer-events: auto; cursor: pointer; }
.story-cta:hover { background: #ddd; }
.story-cta:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.story-action { margin-top: 28px; }
.story-action .story-cta { margin-top: 0; }
.story-cta-note { display: block; margin-top: 12px; color: #9097a3; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; line-height: 1.5; }

.story-verse { margin: 0; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: clamp(14px, 1.12vw, 17px); font-weight: 400; line-height: 1.65; color: #f4f4f4; }
.story-verse span { display: block; }
@media (max-width: 700px) { .story-verse { font-size: 13px; line-height: 1.6; } }

@media (max-width: 700px) {
  .phone-page { display: block; --phone-mobile-stage: clamp(210px, 36svh, 330px); }
  .phone-viewport { z-index: 2; top: var(--phone-header-bottom); height: var(--phone-mobile-stage); }
  .phone-viewport::before { inset: 0; background-size: 14px 14px; opacity: .7; }
  .phone-stage { inset: 0; }
  .phone-copy { padding: 0 24px 60px; }
  .phone-chapter { min-height: calc(100svh - var(--phone-header-bottom) - var(--phone-mobile-stage)); padding: 48px 0 80px; scroll-margin-top: var(--phone-mobile-stage); }
  .phone-chapter--feature { min-height: calc((100svh - var(--phone-header-bottom) - var(--phone-mobile-stage)) * .86); }
  .phone-chapter--origins { padding-top: 30px; }
  .phone-title { margin-bottom: 36px; }
  .phone-title--future { font-size: clamp(29px, 8.2vw, 42px); }
  .phone-story { margin-bottom: 32px; }
  .story-prose { font-size: 15px; max-width: none; }
  .story-verse { font-size: 13px; line-height: 1.65; }
}