/* Isolated prototype. Production styles and scripts are deliberately not loaded. */
:root {
  color-scheme: light dark;
  --background: #FBFAF8; --surface: #FFFFFF; --sunken: #F4F2EE;
  --ink: #16140F; --secondary: #5D584F; --border: #E2DED6;
  --accent: #1B7C8D; --accent-wash: #EAF4F5;
  --shadow: 0 2px 3px #16140f08, 0 20px 42px -18px #16140f30;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --reveal: 55%; --header-height: 76px; --controls-height: 150px;
}
@media (prefers-color-scheme: dark) {
  :root { --background: #0E0D0C; --surface: #171614; --sunken: #1D1B19; --ink: #F5F3EF; --secondary: #A9A399; --border: #38352F; --accent: #4FC3D4; --accent-wash: #14282C; --shadow: 0 2px 4px #0004, 0 22px 48px -16px #0009; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--background); color: var(--ink); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
button, input, summary { font: inherit; }
button, a, summary, input { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; }
button, summary, a { touch-action: manipulation; }
button { border: 0; background: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
h1:focus, h2:focus { outline: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2 { font-weight: 640; letter-spacing: -.05em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: clamp(56px, 6.3vw, 90px); }
h2 { font-size: clamp(38px, 4.4vw, 62px); }
h3 { font-size: 18px; line-height: 1.3; font-weight: 620; letter-spacing: -.025em; }
img { display: block; max-width: 100%; height: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 100; top: -90px; left: 20px; padding: 12px 20px; background: var(--surface); border: 1px solid var(--accent); border-radius: 8px; }
.skip:focus { top: 12px; }
.enhanced-only { display: none; }
.header { position: relative; z-index: 20; height: var(--header-height); padding: 0 4.2vw; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 28px; border-bottom: 1px solid var(--border); background: var(--background); }
.wordmark { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 620; letter-spacing: -.025em; flex-shrink: 0; min-height: 44px; }
.wordmark img { border-radius: 8px; }
.experiment { grid-column: 2; display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 6px 13px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--secondary); font-size: 11px; font-weight: 540; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 8px 24px -20px #16140f80; }
.experiment::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, #E85D5D, #F6D45A 34%, #5F9FD9 67%, #9A7BC8); }
.header-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 20px; }
.view-toggle { color: var(--secondary); font-size: 12px; min-height: 44px; padding: 0; }
.view-toggle:hover, .text-link:hover, .end-links a:hover { color: var(--accent); }
.button { min-height: 48px; padding: 12px 20px; display: inline-flex; justify-content: center; align-items: center; gap: 18px; background: var(--ink); color: var(--background); border-radius: 99px; font-size: 13px; font-weight: 600; transition: opacity .18s; }
.button:hover { opacity: .82; }
.button.small { min-height: 44px; padding: 8px 18px; font-size: 12px; }
.section-menu { position: relative; }
.section-menu summary { display: flex; align-items: center; gap: 14px; min-height: 44px; cursor: pointer; list-style: none; font-size: 13px; }
.section-menu summary::-webkit-details-marker { display: none; }
.section-menu[open] summary > span { transform: rotate(45deg); }
.section-menu .menu-panel { position: absolute; max-height: calc(100svh - 100px); overflow-y: auto; width: 268px; right: 0; top: 52px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.section-menu nav a { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 12px; font-size: 14px; border-radius: 8px; }
.section-menu nav a span { color: var(--secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.section-menu nav a:hover, .section-menu nav a[aria-current] { background: var(--accent-wash); color: var(--accent); }
.chapter { padding: 60px 6vw; scroll-margin-top: 20px; }
.chapter-content { width: min(1120px, 100%); margin: auto; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(36px, 5vw, 90px); }
.copy { min-width: 0; }
.eyebrow { display: block; color: var(--accent); font-size: 10px; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 20px; }
.chapter-number { color: var(--secondary); font-variant-numeric: tabular-nums; margin-right: 16px; font-size: 10px; }
.rainbow { background: linear-gradient(105deg, #BB603B 0%, #9B7230 20%, #397A50 40%, #26768C 60%, #656CB1 80%, #A05484 100%); color: transparent; background-clip: text; -webkit-background-clip: text; }
@media (prefers-color-scheme: dark) { .rainbow { background-image: linear-gradient(105deg, #E9AA7C, #E6C778, #9ACF91, #8CCDDD, #AFB5EA, #DEA6CF); } }
.tagline { font-size: clamp(19px, 2vw, 24px); font-weight: 590; letter-spacing: -.025em; line-height: 1.3; margin-top: 22px; }
.lead { color: var(--secondary); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; max-width: 43ch; margin-top: 22px; }
.secondary-lead { margin-top: 12px; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; margin: 25px 0 14px; }
.text-link { font-size: 13px; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: 12px; }
.note, figcaption { color: var(--secondary); font-size: 11px; line-height: 1.65; }
.note { margin-top: 15px; }
.art-composition { position: relative; min-width: 0; }
.paper { background: white; border: 6px solid white; border-radius: 3px; box-shadow: var(--shadow); object-fit: contain; }
.art-composition figcaption { text-align: center; margin-top: 18px; font-size: 10px; letter-spacing: .025em; }
.hero-art { height: 480px; }
.hero-art .paper { position: absolute; height: 88%; width: auto; }
.hero-art .back-page { top: 0; left: 0; height: 78%; }
.hero-art .front-page { right: 0; top: 5%; }
.hero-art figcaption { position: absolute; bottom: -8px; width: 100%; display: flex; flex-direction: column; gap: 9px; align-items: center; }
.swatches { display: inline-flex; gap: 7px; }
.swatches i { display: block; width: 9px; height: 9px; border-radius: 50%; }
.castle-swatches i:nth-child(1) { background: #E85D5D; }.castle-swatches i:nth-child(2) { background: #F29A4B; }.castle-swatches i:nth-child(3) { background: #F6D45A; }.castle-swatches i:nth-child(4) { background: #7BBB6A; }.castle-swatches i:nth-child(5) { background: #5F9FD9; }.castle-swatches i:nth-child(6) { background: #9A7BC8; }
.creation-steps { list-style: none; padding: 0; margin: 28px 0 10px; }
.creation-steps li { display: flex; gap: 18px; padding: 15px 0; border-top: 1px solid var(--border); }
.creation-steps li > span { padding-top: 3px; color: var(--accent); font-size: 11px; }
.creation-steps p { margin-top: 6px; color: var(--secondary); font-size: 13px; }
.create-art blockquote { font-size: 22px; line-height: 1.3; font-weight: 550; letter-spacing: -.02em; max-width: 28ch; padding: 22px 24px; margin-bottom: 28px; border-left: 2px solid var(--accent); }
.paired-pages { display: flex; align-items: center; gap: 20px; }
.paired-pages > img, .paired-pages > div { width: calc(50% - 10px); min-width: 0; }
.paired-pages > :last-child { margin-top: 50px; }
.art-label { display: block; text-align: center; color: var(--secondary); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-top: 14px; }
.prompt { padding: 20px 0 0 20px; border-left: 2px solid var(--accent); font-size: 18px; font-weight: 520; line-height: 1.4; margin-top: 24px; }
.prompt .eyebrow { margin-bottom: 10px; font-size: 9px; }
.disclosure { border-bottom: 1px solid var(--border); margin-top: 6px; }
.disclosure summary { min-height: 44px; cursor: pointer; font-size: 13px; font-weight: 560; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after { content: "+"; font-size: 18px; font-weight: 400; color: var(--accent); }
.disclosure[open] summary::after { content: "−"; }
.disclosure p { font-size: 12px; color: var(--secondary); margin-bottom: 15px; max-width: 44ch; }
.feature-list { margin-top: 20px; }
.device { padding: 11px; border: 1px solid #494844; border-radius: 28px; background: #242321; box-shadow: var(--shadow); }
.device-screen { height: 345px; background: #E5E2D9; border-radius: 18px; padding: 20px 54px 20px 22px; position: relative; display: flex; justify-content: center; overflow: hidden; }
.device-screen img { width: auto; height: 100%; object-fit: contain; box-shadow: 0 3px 15px #0002; }
.paint-rail { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); border-radius: 30px; background: #FBFAF8; padding: 9px; display: grid; gap: 10px; }
.paint-rail i { width: 17px; height: 17px; border-radius: 50%; background: #A9BF9B; }.paint-rail i:nth-child(2) { background: #F2D98A; }.paint-rail i:nth-child(3) { background: #C97B54; }.paint-rail i:nth-child(4) { background: #F5EBD5; border: 1px solid #ddd; }.paint-rail i:nth-child(5) { background: #8A6544; }
.reveal-paper { position: relative; width: min(310px, 85%); margin: auto; overflow: hidden; }
.reveal-paper img { width: 100%; }
.colored-layer { position: absolute; top: 0; left: 0; height: 100%; clip-path: inset(0 0 0 var(--reveal)); }
.reveal-divider { position: absolute; top: 0; bottom: 0; left: var(--reveal); width: 1px; background: #fff; box-shadow: 0 0 0 1px #0002; }
.reveal-control { margin-top: 30px; max-width: 340px; }
.reveal-control label { font-size: 12px; display: flex; justify-content: space-between; gap: 12px; }
.reveal-control output { font-variant-numeric: tabular-nums; color: var(--accent); }
.reveal-control input { display: block; width: 100%; min-height: 44px; margin: 2px 0; accent-color: var(--accent); cursor: ew-resize; touch-action: pan-y; }
.range-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--secondary); }
.library-art { height: 455px; }
.library-page { position: absolute; display: block; width: 43%; transition: translate .2s; }
.library-page:hover { translate: 0 -8px; }
.library-page img { width: 100%; }
.library-page span { display: block; font-size: 10px; color: var(--secondary); margin-top: 9px; text-align: center; }
.library-one { left: 0; top: 5%; z-index: 1; }.library-two { left: 25%; top: 32%; z-index: 3; }.library-three { right: 0; top: 0; z-index: 2; }
.pricing-heading { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; margin-bottom: 24px; }
.pricing-heading h2 { font-size: clamp(30px, 3vw, 44px); }
.pricing-heading .eyebrow { margin-bottom: 14px; }
.pricing-heading > p { color: var(--secondary); font-size: 14px; }
.plans { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; }
.plan { padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.plan.plus { background: var(--accent-wash); border-color: var(--accent); }
.plan-heading { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.plan-heading .eyebrow { margin: 0; }
.price { font-size: 27px; font-weight: 620; letter-spacing: -.04em; white-space: nowrap; }
.price small { font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--secondary); }
.plan p, .plan ul { font-size: 12px; color: var(--secondary); margin-top: 12px; }
.plan ul { padding-left: 16px; margin-bottom: 0; }
.plan li + li { margin-top: 8px; }
.plan b { color: var(--ink); font-weight: 580; }
.plan .note { font-size: 10px; margin-top: 10px; }
.packs { margin: 16px 0 0; font-size: 13px; }
.packs > div { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border); }
.packs dd { font-weight: 600; margin: 0; }
.legal { margin-top: 20px; font-size: 10px; color: var(--secondary); line-height: 1.7; }
.closing-art .paper { max-height: 440px; width: auto; margin: auto; }
.end-links { display: flex; gap: 24px; font-size: 12px; margin-top: 20px; }
.end-links a { min-height: 44px; display: inline-flex; align-items: center; }
.noscript-note { padding: 20px; text-align: center; }
/* Progressive enhancement: without JS, all eight semantic sections remain a document. */
.enhanced .enhanced-only { display: block; }
.orbit-mode { position: fixed; inset: 0; width: 100%; height: 100svh; overflow: hidden; }
.orbit-mode #experience { position: relative; height: calc(100svh - var(--header-height) - var(--controls-height)); min-height: 0; }
.orbit-mode .chapters { height: 100%; }
.orbit-mode .chapter { position: absolute; inset: 0; padding: 20px max(7vw, calc((100vw - 1120px) / 2)); transform-origin: 50% 50%; pointer-events: none; visibility: hidden; }
.orbit-mode .chapter.is-near { visibility: visible; }
.orbit-mode .chapter.is-active { pointer-events: auto; }
.orbit-mode .chapter-content { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; padding: 8px; }
.orbit-mode .story-grid { min-height: 100%; }
.orbit-mode .copy, .orbit-mode .pricing-layout { opacity: var(--text-clarity, 1); }
.orbit-mode .hero-art { height: clamp(260px, calc(100svh - 295px), 490px); }
.orbit-mode .paired-pages img { max-height: calc(100svh - 405px); width: auto; max-width: 100%; object-fit: contain; margin-inline: auto; }
.orbit-mode .create-art .paired-pages > img { max-width: calc(50% - 10px); }
.orbit-mode .studio-art .paired-pages img { max-height: calc(100svh - 340px); }
.orbit-mode .device-screen { height: clamp(230px, calc(100svh - 350px), 380px); }
.orbit-mode .reveal-paper { width: min(310px, calc((100svh - 310px) * .667)); }
.orbit-mode .library-art { height: clamp(280px, calc(100svh - 325px), 480px); }
.orbit-mode .library-page { width: min(43%, calc((100svh - 400px) * .667)); }
.orbit-mode .closing-art .paper { max-height: calc(100svh - 315px); }
.orbit-mode .pricing-layout { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.orbit-lines { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.orbit-line { position: absolute; left: 50%; top: var(--center-y, 1200px); width: calc(var(--orbit-radius, 1000px) * 2); height: calc(var(--orbit-radius, 1000px) * 2); border: 1px solid var(--border); border-radius: 50%; transform: translate(-50%, -50%); opacity: .6; }
.orbit-line.outer { width: calc(var(--orbit-radius, 1000px) * 2 + 180px); height: calc(var(--orbit-radius, 1000px) * 2 + 180px); opacity: .35; }
.orbit-controls { position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; height: var(--controls-height); pointer-events: none; padding-bottom: env(safe-area-inset-bottom); background: linear-gradient(0deg, var(--background) 25%, transparent); }
.orbit-controls a, .orbit-controls button { pointer-events: auto; }
.journey-status { position: absolute; bottom: 35px; left: 4.2vw; display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 4px 18px; }
.status-count { font-size: 22px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.status-count > span { font-size: 12px; color: var(--secondary); letter-spacing: 0; }
.status-name { font-size: 13px; font-weight: 600; }
.status-caption { grid-column: 2; font-size: 10px; color: var(--secondary); }
.radial-nav { position: absolute; width: 156px; height: 156px; bottom: 0; left: 50%; transform: translateX(-50%); }
.radial-ring { position: absolute; inset: 20px; border: 1px solid var(--border); border-radius: 50%; }
.radial-progress { position: absolute; inset: 27px; border: 1px solid transparent; border-top-color: var(--accent); border-radius: 50%; transform: rotate(var(--progress-angle, 0deg)); }
.orbit-home { position: absolute; width: 46px; height: 46px; left: 55px; top: 55px; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.orbit-home img { width: 28px; height: 28px; border-radius: 8px; }
.radial-node { --node-x: 0px; --node-y: -56px; position: absolute; top: 56px; left: 56px; width: 44px; height: 44px; transform: translate(var(--node-x), var(--node-y)); display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.radial-node span { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 9px; font-weight: 600; border: 1px solid var(--border); border-radius: 50%; background: var(--background); color: var(--secondary); transition: background .2s, color .2s; }
.radial-node:hover span, .radial-node[aria-current] span { background: var(--accent); border-color: var(--accent); color: var(--background); }
.travel-controls { position: absolute; right: 4.2vw; bottom: 32px; display: flex; align-items: center; gap: 24px; }
.gesture-hint { font-size: 11px; color: var(--secondary); }
.touch-hint { display: none; }
.travel-controls > div { display: flex; gap: 8px; }
.direction { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: var(--background); font-size: 18px; }
.direction:hover { border-color: var(--accent); color: var(--accent); }
.reading-mode .orbit-controls, .reading-mode .orbit-lines { display: none; }
.reading-mode .header { position: sticky; top: 0; }
.reading-mode .chapter:nth-child(even) { background: var(--sunken); }
.reading-mode .view-toggle { color: var(--accent); }
@media (max-width: 1150px) { .header { grid-template-columns: minmax(0, 1fr) auto; }.experiment { display: none; }.header-actions { grid-column: 2; gap: 18px; }.story-grid { gap: 36px; }.orbit-mode .chapter { padding-inline: 6vw; }.travel-controls { gap: 15px; } }
@media (max-height: 780px) and (min-width: 761px) and (min-height: 501px) {
  :root { --header-height: 66px; --controls-height: 136px; }
  h1 { font-size: clamp(48px, 5.7vw, 78px); } h2 { font-size: clamp(34px, 3.7vw, 51px); }
  .eyebrow { margin-bottom: 16px; }.lead { font-size: 14px; margin-top: 16px; }.tagline { font-size: 20px; margin-top: 18px; }.actions { margin-top: 18px; }.note { margin-top: 12px; }
  .creation-steps { margin-top: 18px; }.creation-steps li { padding-block: 10px; }.creation-steps p { font-size: 12px; }
  .pricing-heading { margin-bottom: 18px; }.pricing-heading h2 { font-size: 31px; }.pricing-heading > p { font-size: 12px; }.plan { padding: 18px; }.plan h3 { font-size: 16px; }.price { font-size: 24px; }.plan li + li { margin-top: 5px; }.legal { margin-top: 14px; }
  .radial-nav { bottom: 0; }.journey-status { bottom: 24px; }.travel-controls { bottom: 22px; }
}
@media (pointer: coarse) { .desktop-hint { display: none; }.touch-hint { display: inline; } }
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  :root { --header-height: 66px; --controls-height: 98px; }
  .header { height: auto; min-height: calc(66px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); gap: 12px; }.wordmark { font-size: 14px; gap: 9px; }.wordmark img { width: 28px; height: 28px; }.header-actions { gap: 12px; }.get-app, .view-toggle { display: none !important; }.section-menu summary { font-size: 12px; gap: 5px; }.section-menu .menu-panel { right: 0; }
  .story-grid { grid-template-columns: 1fr; gap: 34px; }.chapter { padding: 42px 24px; }.chapter-content { max-width: 560px; }
  h1 { font-size: clamp(48px, 11vw, 74px); } h2 { font-size: clamp(36px, 8.5vw, 58px); }.eyebrow { margin-bottom: 16px; font-size: 9px; }.chapter-number { margin-right: 10px; }
  .tagline { font-size: 20px; }.tagline br { display: none; }.lead { font-size: 15px; margin-top: 17px; }.actions { margin-top: 22px; }.button { font-size: 12px; padding: 12px 18px; }.note { font-size: 11px; }
  .hero-art { height: 410px; max-width: 400px; width: 100%; margin: 0 auto 18px; }.hero-art .back-page { left: 3%; }.hero-art .front-page { right: 3%; }
  .art-composition { width: 100%; max-width: 440px; margin-inline: auto; }.create-art blockquote { font-size: 22px; }.studio-art { margin-bottom: 10px; }.device-screen { height: 290px; }
  .library-art { height: 440px; }.closing-art .paper { max-height: 400px; }.reveal-paper { width: 270px; }.reveal-control { max-width: none; }
  .pricing-heading, .plans { grid-template-columns: 1fr; gap: 22px; }.pricing-heading h2 { font-size: 36px; }.pricing-heading > p { font-size: 14px; }.plan { padding: 23px; }.plan p, .plan ul { font-size: 13px; }.legal { font-size: 11px; }
  .orbit-mode .chapter { padding: 0 16px; }.orbit-mode .chapter-content { padding: 30px 8px 40px; background: var(--background); }.orbit-mode .story-grid { min-height: 0; align-items: start; }
  .orbit-mode .hero-art { height: 385px; }.orbit-mode .paired-pages img, .orbit-mode .studio-art .paired-pages img { max-height: 340px; }.orbit-mode .device-screen { height: 280px; }.orbit-mode .reveal-paper { width: 265px; }.orbit-mode .library-art { height: 420px; }.orbit-mode .library-page { width: 43%; }.orbit-mode .closing-art .paper { max-height: 400px; }.orbit-mode .pricing-layout { display: block; }
  .orbit-lines { opacity: .65; }.orbit-controls { background: var(--background); border-top: 1px solid var(--border); }.radial-nav { width: 88px; height: 88px; bottom: 4px; }.radial-ring { inset: 7px; }.radial-progress { inset: 14px; }.orbit-home { left: 22px; top: 22px; width: 44px; height: 44px; }.orbit-home img { width: 28px; height: 28px; }
  .radial-node { display: none; } /* Full-size chapter links remain in Sections; no tiny phone targets. */
  .journey-status { left: 24px; bottom: 29px; display: flex; flex-direction: column; gap: 0; }.status-count { font-size: 18px; }.status-name { font-size: 11px; }.status-caption { display: none; }
  .travel-controls { right: 20px; bottom: 31px; gap: 0; }.travel-controls > div { gap: 6px; }.gesture-hint { position: fixed; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 9px; }.desktop-hint { display: none; }.touch-hint { display: inline; }
  /* Phones use a native vertical document. This avoids nested scrolling and
     horizontal gesture arbitration with Mobile Safari's browser chrome. */
  .reading-mode .chapter { padding: 52px max(24px, env(safe-area-inset-right)) 58px max(24px, env(safe-area-inset-left)); border-bottom: 1px solid var(--border); }
  .reading-mode .chapter:first-child { padding-top: 38px; }
  .reading-mode .chapter:last-child { padding-bottom: calc(58px + env(safe-area-inset-bottom)); border-bottom: 0; }
  .reading-mode .story-grid { gap: 38px; }
}
@media (max-width: 370px) { .header { padding-inline: 14px; }.wordmark { font-size: 12px; }.header-actions { gap: 8px; }.wordmark img { width: 25px; height: 25px; }.view-toggle { max-width: 46px; }.travel-controls { right: 12px; }.journey-status { left: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }.library-page:hover { translate: none; } }
@media (forced-colors: active) { .rainbow { background: none; color: CanvasText; }.radial-node[aria-current] span { border: 3px solid Highlight; }.button { border: 1px solid ButtonText; } }
@media print { .header, .orbit-controls, .orbit-lines, .skip, .reveal-control { display: none !important; }.orbit-mode { position: static; height: auto; overflow: visible; }.orbit-mode #experience { height: auto; }.orbit-mode .chapter { position: static; visibility: visible; opacity: 1 !important; transform: none !important; padding: 30px; break-inside: avoid; }.orbit-mode .chapter-content { height: auto; overflow: visible; } }
/* Keep the camera's neighboring artwork quiet; distant copy never overlaps it. */
.orbit-mode .art-composition blockquote,
.orbit-mode .art-composition figcaption,
.orbit-mode .art-label,
.orbit-mode .library-page > span { opacity: var(--text-clarity, 1); }
@media (min-width: 951px), (min-width: 761px) and (min-height: 501px) {
  .orbit-mode .chapter { padding-block: 12px; }
  .orbit-mode .create-art .paired-pages > img { max-height: calc(100svh - 490px); }
  .orbit-mode .library-page { width: min(43%, calc((100svh - 440px) * .667)); }
  .orbit-mode .library-two { top: 22%; }
}
@media (max-height: 780px) and (min-width: 761px) and (min-height: 501px) {
  :root { --controls-height: 116px; }
  .creation-steps li { padding-block: 8px; }.creation-steps p { margin-top: 4px; }
  .feature-list { margin-top: 12px; }.feature-list .disclosure { margin-top: 0; }
  .actions { margin-bottom: 10px; }
}

.section-menu .motion-choice { margin-top: 8px; padding: 12px; min-height: 44px; border-top: 1px solid var(--border); font-size: 12px; color: var(--secondary); cursor: pointer; }
.motion-choice input { accent-color: var(--accent); margin: 0 8px 0 0; vertical-align: middle; }
.motion-reduced *, .motion-reduced *::before, .motion-reduced *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
.motion-reduced .library-page:hover { translate: none; }

@media print { .orbit-mode .copy, .orbit-mode .pricing-layout, .orbit-mode .art-composition blockquote, .orbit-mode .art-composition figcaption, .orbit-mode .art-label, .orbit-mode .library-page > span { opacity: 1 !important; } }