:root { color-scheme: dark; background:#000; color:#eee; font-family:Georgia,'Times New Roman',serif; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#000; }
body { min-height:100svh; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { color:inherit; cursor:pointer; font:inherit; }
button:focus-visible,a:focus-visible { outline:2px solid #a9e3de; outline-offset:4px; }
[hidden] { display:none !important; }
#work { min-height:100svh; display:grid; place-content:center; padding:1rem; overflow:hidden; }
#stage-shell { position:relative; width:600px; height:450px; }
#stage { position:relative; width:600px; height:450px; transform-origin:top left; background:#000; }
#opening,#home,.chapter { position:absolute; inset:0; }
.opening-copy { position:absolute; inset:0; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
h1 { font-family:'Century Gothic',Futura,Arial,sans-serif; font-size:29px; font-weight:400; letter-spacing:1px; margin:0 0 14px; }
.credit { font-size:19px; margin:0 0 12px; }
.thanks { font-size:12px; margin:0; }
.sound-prompt { font-size:16px; line-height:1.4; margin:36px 0 14px; }
#begin { background:#1d383b; border:1px solid #365d60; border-radius:50%; min-width:90px; min-height:44px; font-size:21px; }
#alphabet-rain { position:absolute; inset:0; overflow:hidden; opacity:.27; pointer-events:none; }
.rain-letter { position:absolute; top:-60px; color:#8dad98; font-size:26px; animation:rain linear infinite; }
@keyframes rain { to { transform:translateY(540px) rotate(35deg); } }
#alphabet-menu { position:absolute; left:55px; top:82px; display:grid; grid-template-columns:repeat(2,20px); gap:3px 2px; z-index:3; }
.letter-button { position:relative; width:20px; height:20px; border:1px solid #285c5d; border-radius:50%; padding:0; background:#041012; font-family:'Times New Roman',serif; font-size:15px; line-height:18px; }
.letter-button::before { content:''; position:absolute; inset:-1px; border-radius:50%; }
.letter-button:hover,.letter-button[aria-pressed=true] { background:#193b3b; border-color:#6caaaa; }
.letter-button[data-started] { box-shadow:inset 0 0 0 1px #314b45; }
#reset { grid-column:1/-1; margin-top:3px; border:1px solid #285c5d; border-radius:6px; background:#000; font-size:10px; padding:2px 3px; }
#author { position:absolute; bottom:16px; left:46px; color:#777; text-decoration:none; font:bold 7px Arial,sans-serif; z-index:3; }
#author:hover { color:#bbb; }
.story-line { animation:chapter-in .6s ease-out; }
@keyframes chapter-in { from { opacity:0; } to { opacity:1; } }
.story-line { position:absolute; left:calc(var(--x)*1px); top:calc(var(--y)*1px); margin:0; white-space:pre; font-family:'Times New Roman',Times,serif; font-size:15px; line-height:1; z-index:2; }
.letter-art { position:absolute; inset:0; width:600px; height:450px; pointer-events:none; }
/* Artwork has its own nine-second fade; the story retains four-minute decay. */
.letter-silhouette { fill:#0d1517; opacity:1; }
.warped-letter { fill:#83945b; opacity:.115; font-family:'Arial Black',Arial,sans-serif; font-weight:900; }
.letter-warp { animation:letter-warp var(--warp-duration,4s) ease-in-out var(--warp-delay,0s) infinite alternate; }
.art-finished .letter-warp { animation-play-state:paused; }
@keyframes letter-warp { from { transform:var(--warp-from); } to { transform:var(--warp-to); } }
.home-alphabet { position:absolute; left:155px; top:70px; width:390px; display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center; font-size:58px; line-height:1.15; color:#314b42; }
.glyph { opacity:var(--decay-opacity,1); color:var(--decay-color,inherit); }
#sound-toggle { position:fixed; right:max(1rem,env(safe-area-inset-right)); bottom:max(.8rem,env(safe-area-inset-bottom)); border:1px solid #264346; border-radius:4px; background:#050a0a; color:#91a3a0; font:12px Arial,sans-serif; padding:7px 10px; z-index:5; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Touch artwork follows the desktop text blocks above a bottom alphabet menu. */
.portrait-layout #work { display:block; padding:.75rem .75rem max(.75rem,env(safe-area-inset-bottom)); overflow:visible; }
.portrait-layout #stage-shell,.portrait-layout #stage { width:100%; height:auto; min-height:calc(100svh - 1.5rem); transform:none !important; }
.portrait-layout #stage { display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.portrait-layout #opening { position:relative; order:0; min-height:calc(100svh - 1.5rem); }
.portrait-layout .opening-copy { padding:1rem; }
.portrait-layout #alphabet-menu { position:relative; order:2; flex:none; left:auto; top:auto; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; width:min(100%,370px); margin:0 auto; }
.portrait-layout .letter-button { width:100%; height:44px; font-size:22px; line-height:42px; border-radius:50%; }
.portrait-layout #reset { grid-column:5/7; height:44px; margin:0; font-size:14px; }
.portrait-layout .chapter,.portrait-layout #home { position:relative; order:1; flex:1 0 auto; min-height:max(var(--touch-height,360px),calc(100svh - 340px)); padding:0; width:100%; }
.portrait-layout .story-line { position:absolute; left:var(--touch-x); top:var(--touch-y); width:var(--touch-width); margin:0; white-space:pre; font-size:var(--touch-font,14px); line-height:1; text-align:center; transform:none; }
.portrait-layout .passage-break { margin:0; }
.portrait-layout .letter-art { left:0; top:0; width:600px; height:450px; max-width:none; transform:var(--touch-art-transform); transform-origin:0 0; overflow:visible; }
.portrait-layout #author { position:relative; order:3; flex:none; display:block; bottom:auto; left:auto; text-align:center; font-size:10px; margin-top:auto; padding-top:0; padding-bottom:0; }

@media (prefers-reduced-motion:reduce) {
 .rain-letter { animation:none; top:var(--still-y,50%); }
 .story-line { animation:none; }
}

#rotate-notice { display:none; }

 html.portable-landscape #work { visibility:hidden; }
 html.portable-landscape #rotate-notice { display:grid; position:fixed; inset:0; z-index:20; place-content:center; padding:2rem; text-align:center; font:1.2rem/1.5 Georgia,serif; background:#000; color:#eee; }


.home-alphabet .glyph { animation:home-drift 5s ease-in-out infinite alternate; }
.home-alphabet .glyph:nth-child(3n) { animation-delay:-2s; }
.home-alphabet .glyph:nth-child(4n) { animation-delay:-4s; }
@keyframes home-drift { to { transform:translate(2px,5px) rotate(8deg); } }
@media (prefers-reduced-motion:reduce) { .letter-warp,.home-alphabet .glyph { animation:none; } }

/* The opening follows the recorded sound check, title, and author sequence. */
#opening .opening-copy { gap:0; }
#opening .sound-check { display:flex; align-items:center; justify-content:center; gap:12px; }
#opening .sound-prompt { margin:0; font:16px/1.15 'Times New Roman',serif; }
#opening #begin { margin-top:22px; padding:0 8px; background:transparent; border:0; border-radius:0; min-width:60px; min-height:44px; font:18px 'Times New Roman',serif; color:#b0e7e5; }
#opening #begin:hover { color:#b0e7e5; }
#opening h1 { font:28px/1.3 'Times New Roman',serif; letter-spacing:1px; margin:0; color:#83b5b6; text-align:center; }
#opening .credit { font:13px/1.4 'Times New Roman',serif; letter-spacing:1px; margin:0; color:#83b5b6; }
#opening[data-phase="title"] h1 { animation:intro-card 6s ease-in-out both; }
#opening[data-phase="credit"] .credit { animation:intro-card 3s ease-in-out both; }
@keyframes intro-card { 0%,100% { opacity:0; } 20%,75% { opacity:1; } }
.portrait-layout #opening h1 { font-size:clamp(22px,6vw,28px); }
@media(prefers-reduced-motion:reduce) { #opening[data-phase="title"] h1,#opening[data-phase="credit"] .credit { animation:none; } }

/* Letters erupt from the center, follow random wandering paths, and fade. */
#opening #alphabet-rain { opacity:0; z-index:0; }
#opening[data-phase="title"] #alphabet-rain { animation:intro-spray-fade 6s ease-in-out both; }
@keyframes intro-spray-fade { 0%,100% { opacity:0; } 20%,75% { opacity:.55; } }
#opening .opening-copy { z-index:1; }
#opening .rain-letter { left:50%; top:50%; color:#648779; animation:alphabet-spray 5.7s cubic-bezier(.4,.15,.4,1) var(--spray-delay,0s) both; }
@keyframes alphabet-spray {
 0% { transform:translate(-50%,-50%) translate(var(--spray-x0),var(--spray-y0)) rotate(0deg) scale(.35); opacity:1; }
 22% { transform:translate(-50%,-50%) translate(var(--spray-x1),var(--spray-y1)) rotate(var(--spray-angle)) scale(1); opacity:1; }
 55% { transform:translate(-50%,-50%) translate(var(--spray-x2),var(--spray-y2)) rotate(var(--spray-turn)) scale(1); opacity:1; }
 100% { transform:translate(-50%,-50%) translate(var(--spray-x3),var(--spray-y3)) rotate(var(--spray-angle)) scale(.8); opacity:1; }
}
.story-line.revised-line { width:calc(var(--line-width)*1px); text-align:center; }
.portrait-layout .story-line.revised-line { width:var(--touch-width); }

@media(prefers-reduced-motion:reduce) { #opening .rain-letter { animation:none; transform:translate(-50%,-50%) translate(var(--spray-x2),var(--spray-y2)); } }

.portrait-layout #opening .sound-prompt { font-size:clamp(24px,4vw,30px); line-height:1.25; }
.portrait-layout #opening #begin { font-size:28px; min-width:84px; min-height:52px; margin-top:24px; }

/* The credit's final fade overlaps the menu's entrance. */
#opening[data-crossfade] { pointer-events:none; }
.portrait-layout #opening[data-crossfade] { position:absolute; inset:0; min-height:0; }
html:not(.portrait-layout):not(.portable-landscape) #alphabet-menu,
html:not(.portrait-layout):not(.portable-landscape) #author { transform:translateY(-1.5625rem); }

/* Match the desktop link center to the two-column alphabet menu. */
html:not(.portrait-layout):not(.portable-landscape) #author { left:1.625rem; width:6.25rem; text-align:center; white-space:nowrap; }

/* Touch text has more space around thinner, taller letter strokes. */
.portrait-layout.touch-device #opening .credit { font-size:1.6rem; }
.portrait-layout.touch-device .touch-art-mask { mask:var(--touch-mask); }
.portrait-layout.touch-device .chapter { flex:0 0 auto; min-height:var(--touch-height); height:var(--touch-height); }

.touch-copy { display:none; }
.portrait-layout .chapter[data-touch-copies="true"] .story-line:not(.touch-copy) { display:none; }
.portrait-layout .touch-copy { display:block; }

/* The blank home reserves the same space as a selected touch letter. */
.portrait-layout.touch-device #home { flex:0 0 auto; min-height:var(--touch-height); height:var(--touch-height); }
.portrait-layout.touch-device #opening h1 { font-size:clamp(1.65rem,7.2vw,2.1rem); }

.portrait-layout.touch-device .chapter[hidden] .letter-warp { animation-play-state:paused; }

/* Keep portable scenes stationary, with the opening centered during crossfade. */
html.touch-device,html.touch-device body { height:100%; overflow:hidden; overscroll-behavior:none; }
html.touch-device body { position:fixed; inset:0; touch-action:none; }
.portrait-layout.touch-device #work { height:100svh; min-height:0; overflow:hidden; }
.portrait-layout.touch-device #stage-shell,.portrait-layout.touch-device #stage { height:calc(100svh - 1.5rem); min-height:0; }
.portrait-layout.touch-device #opening,
.portrait-layout.touch-device #opening[data-crossfade] { position:absolute; inset:0; height:100%; min-height:0; }
.portrait-layout.touch-device #touch-main { position:absolute; top:var(--touch-main-top,0); left:0; width:100%; display:flex; flex-direction:column; gap:1rem; transform:scale(var(--touch-main-scale,1)); transform-origin:top center; }

/* Reading order and history navigation replace the alphabet menu. */
#order-choice { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:#a5cccd; font:1.3rem/1.5 'Times New Roman',serif; }
#order-choice p { margin:0 0 .6rem; }
#order-choice button { padding:.5rem .3rem; border:0; background:transparent; color:inherit; text-decoration:underline; text-underline-offset:.2em; }
#home { display:flex; justify-content:center; align-items:center; }
#navigation-hint { max-width:80%; text-align:center; color:#83b5b6; font:1rem/1.6 'Times New Roman',serif; }
.history-arrow { position:fixed; top:50%; transform:translateY(-50%); width:3rem; height:4rem; padding:0; z-index:8; border:0; background:transparent; color:#83b5b6; font:3rem/1 'Times New Roman',serif; }
#history-back { left:max(.25rem,env(safe-area-inset-left)); }
#history-forward { right:max(.25rem,env(safe-area-inset-right)); }
#reset { position:fixed; left:50%; bottom:max(1rem,env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:8; margin:0; padding:.5rem 1rem; min-height:2.75rem; color:#83b5b6; font:1rem 'Times New Roman',serif; border:1px solid #285c5d; background:#000; }
.portrait-layout #reset { height:auto; font-size:1rem; margin:0; }
.portrait-layout.touch-device #touch-main { gap:0; }

.chapter { transform-origin:top left; }
#navigation-hint { max-width:min(80%,22rem); padding:1rem; }

/* Desktop controls and the separate click to dismiss arrival instructions. */
html:not(.touch-device) #reset { font-size:.7rem; min-height:1.75rem; padding:.25rem .65rem; }
html:not(.touch-device) .history-arrow { width:4rem; height:5rem; font-size:4.5rem; }
html:not(.touch-device) #history-back { left:max(.25rem,calc(50% - 30rem)); }
html:not(.touch-device) #history-forward { right:max(.25rem,calc(50% - 30rem)); }
html:not(.touch-device) #order-choice { font-size:1rem; }
html:not(.touch-device) #navigation-hint { transition:opacity .75s ease; }
html:not(.touch-device) #navigation-hint.dismissed { opacity:0; pointer-events:none; }

/* A single reminder rises from the bottom of the first blank scene. */
#arrival-reminder { position:fixed; left:50%; bottom:max(2rem,env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:calc(100% - 5rem); margin:0; padding:.65rem 1rem; border:1px solid #285c5d; border-radius:.4rem; background:#071314; color:#a5cccd; font:1rem/1.4 'Times New Roman',serif; text-align:center; z-index:9; animation:arrival-reminder-in .6s ease-out both; }
@keyframes arrival-reminder-in { from { opacity:0; transform:translate(-50%,2rem); } to { opacity:1; transform:translate(-50%,0); } }
@media(prefers-reduced-motion:reduce) { #arrival-reminder { animation:none; } }

/* Keep Reset visually quiet on desktop and touch. */
#reset { opacity:.55; }

/* Touch navigation uses taps and swipes. */
html.touch-device .history-arrow { display:none !important; }

/* Portable instructions precede a blank scene, just as on desktop. */
html.touch-device #order-choice { font-size:1.6rem; }
html.touch-device #navigation-hint { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(90%,26rem); max-width:none; margin:0; padding:1rem; font-size:1.35rem; line-height:1.6; z-index:5; transition:opacity .75s ease; }
html.touch-device #navigation-hint.dismissed { opacity:0; pointer-events:none; }
html:not(.touch-device) .letter-silhouette { fill:#18272a; }
html:not(.touch-device) .warped-letter { fill:#9baa72; opacity:.18; }

.touch-sound-prompt { display:none; }
html.touch-device .desktop-sound-prompt { display:none; }
html.touch-device .touch-sound-prompt { display:inline; }

/* Larger portable instructions and reminder, with explicit instruction lines. */
html.touch-device #navigation-hint { font-size:1.5rem; white-space:pre-line; width:95%; padding:.75rem; }
html.touch-device #arrival-reminder { font-size:1.35rem; }

/* Desktop title and order selection; portable opening remains unchanged. */
.desktop-arrival-copy,.desktop-order-label { display:none; }
html:not(.touch-device) .desktop-arrival-copy,
html:not(.touch-device) .desktop-order-label { display:block; }
html:not(.touch-device) .desktop-order-label { display:inline; }
html:not(.touch-device) .touch-order-label { display:none; }
html:not(.touch-device) #opening { position:fixed; inset:0; z-index:5; pointer-events:none; }
html:not(.touch-device) #opening .opening-copy { justify-content:center; padding-top:0; }
html:not(.touch-device) #opening h1 { font-size:clamp(1.75rem,3vw,2.6rem); }
html:not(.touch-device) #opening .rain-letter { top:50%; }
html:not(.touch-device) #order-choice { position:fixed; inset:0; font-size:1.8rem; }
html:not(.touch-device) #order-choice.arriving { animation:desktop-choice-in 1.5s ease-in-out both; }
html:not(.touch-device) #order-choice .desktop-play-instructions { max-width:42rem; padding:0 1.5rem; margin:0 0 1rem; font-size:1.3rem; line-height:1.5; }
html:not(.touch-device) #order-choice .desktop-sound-note { font-size:1.45rem; margin:0 0 2rem; }
html:not(.touch-device) #reset { bottom:3rem; }
@keyframes desktop-choice-in { from { opacity:0; } to { opacity:1; } }

/* Desktop arrival instructions stay above the first letter as they fade away. */
html:not(.touch-device) #navigation-hint { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(100% - 3rem); max-width:65rem; margin:0; padding:0; font-size:1.6rem; line-height:1.5; z-index:6; pointer-events:none; }
html:not(.touch-device) .chapter.first-reveal .story-line { animation-duration:1.8s; }

/* Give the raised desktop Reset control more clearance below every scene. */
html:not(.touch-device) #stage-shell { top:-2.25rem; }
html:not(.touch-device) .history-arrow { top:calc(50% - 2.25rem); }

/* Keep desktop sound and Reset controls together above the website link. */
html:not(.touch-device) #sound-toggle { left:calc(50% + 2.25rem); right:auto; bottom:3rem; height:1.75rem; min-width:2rem; padding:.2rem .35rem; font-size:.75rem; z-index:8; }

/* Center the desktop pair as a group; portable controls retain their positions. */
#main-controls { display:contents; }
html:not(.touch-device) #main-controls { display:flex; align-items:center; gap:.5rem; position:fixed; bottom:2.5rem; left:50%; transform:translateX(-50%); z-index:8; }
html:not(.touch-device) #main-controls #reset,
html:not(.touch-device) #main-controls #sound-toggle { position:static; left:auto; right:auto; bottom:auto; transform:none; margin:0; }

/* Small desktop adjustments to the B, M and O passages. */
html:not(.touch-device) #chapter-B .story-line:nth-of-type(n+4) { translate:-.35rem 0; }
html:not(.touch-device) #chapter-M .story-line:nth-last-of-type(-n+2) { translate:0 .4rem; }
html:not(.touch-device) #chapter-O .story-line { translate:0 1.1rem; }

/* Desktop Reset and audio controls are fully opaque. */
html:not(.touch-device) #reset,
html:not(.touch-device) #sound-toggle { opacity:1; }

/* Portable opening now follows title, order choice, then swipe instructions. */
html.portrait-layout.touch-device #opening { position:fixed; inset:0; height:100%; min-height:0; pointer-events:none; }
html.touch-device #order-choice { position:fixed; inset:0; font-size:1.8rem; }
html.touch-device #order-choice.arriving { animation:desktop-choice-in 1.5s ease-in-out both; }
html.touch-device .desktop-arrival-copy { display:block; }
html.touch-device .desktop-order-label { display:inline; }
html.touch-device .touch-order-label { display:none; }
html.touch-device #order-choice .desktop-sound-note { font-size:1.45rem; margin:0 0 2rem; }
html.touch-device .chapter.first-reveal .story-line { animation-duration:1.8s; animation-timing-function:linear; animation-fill-mode:both; }

/* Keep portable Reset and audio beside one another, centered as a pair. */
html.touch-device #main-controls { display:flex; align-items:center; gap:.5rem; position:fixed; bottom:max(1.5rem,calc(env(safe-area-inset-bottom) + .5rem)); left:50%; transform:translateX(-50%); z-index:8; }
html.touch-device #main-controls #reset,
html.touch-device #main-controls #sound-toggle { position:static; left:auto; right:auto; bottom:auto; transform:none; margin:0; }
html.touch-device #main-controls #sound-toggle { min-height:2.75rem; min-width:2.75rem; padding:.5rem .65rem; }

/* Shift the desktop A composition together over the centered controls. */
html:not(.touch-device) #chapter-A { translate:.4rem 0; }

/* Portable passage refinements are fitted around the strokes in saving.js. */

/* A small final rightward nudge stays within the fitter's stroke clearance. */
html.touch-device .story-line.touch-nudge-right { translate:.15rem 0; }

/* The identities line is raised one original row in saving.html; touch refits the closed gap. */

/* Nudge only the lower A passage on desktop. */
html:not(.touch-device) #chapter-A .story-line:nth-of-type(n+3) { translate:.2rem 0; }

/* Nudge the opening U passage on desktop. */
html:not(.touch-device) #chapter-U .story-line:nth-of-type(-n+3) { translate:.3rem 0; }

/* Lift the lower F passage slightly on desktop. */
html:not(.touch-device) #chapter-F .story-line:nth-of-type(n+4) { translate:0 -.2rem; }

/* Nudge the opening K passage slightly on desktop. */
html:not(.touch-device) #chapter-K .story-line:nth-of-type(-n+5) { translate:.6rem .2rem; }

/* Nudge the opening V passage slightly on desktop. */
html:not(.touch-device) #chapter-V .story-line:nth-of-type(-n+7) { translate:.2rem 0; }

/* One explicit gesture starts the title and soundtrack on every device. */
html:not(.touch-device) #opening[data-phase="start"],
html.portrait-layout.touch-device #opening[data-phase="start"] { pointer-events:auto; }
#opening[data-phase="start"] #begin { margin:0; padding:.5rem 1.4rem; min-width:5.75rem; min-height:3rem; border:.0625rem solid #285c5d; border-radius:.35rem; background:#000; font-size:1.7rem; line-height:1.2; }
html.touch-device #opening[data-phase="start"] #begin { font-size:1.95rem; min-height:3.25rem; }

/* Nudge the opening X passage slightly left on desktop. */
html:not(.touch-device) #chapter-X .story-line:nth-of-type(-n+3) { translate:-.2rem 0; }

/* Nudge the opening H line slightly right on desktop. */
html:not(.touch-device) #chapter-H .story-line:first-of-type { translate:.2rem 0; }

/* Match the final A passage gap to its 16.5-unit line spacing on desktop. */
html:not(.touch-device) #chapter-A .story-line:last-of-type { translate:.2rem -1.5px; }

/* Touch refinements: viewport-centered Start, clearer artwork, and the first P passage. */
html.touch-device #opening[data-phase="start"] .opening-copy { position:fixed; inset:0; height:100dvh; min-height:0; }
html.touch-device #opening[data-phase="start"] #begin { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; }
html.touch-device .letter-silhouette { fill:#22373b; }
html.touch-device .warped-letter { fill:#b8c69b; opacity:.26; }
html.touch-device #chapter-P .story-line.touch-p-left { translate:-.05rem 0; }