/* While I'm Here — the look.
   Night: #04060a. My words: IBM Plex Mono, warm white (my typing voice in all three pieces).
   Your words: Newsreader italic, moonlight. The world's words: amber lights. */
:root {
  --night: #04060a;
  --ink: #ece6da;
  --dim: rgba(236, 230, 218, 0.55);
  --faint: rgba(236, 230, 218, 0.3);
  --amber: #ffcf8a;
  --you: #cfe0ff;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--ink); overflow: hidden; }
body { font-family: var(--mono); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* ---------------------------------------------------------------- the conversation */
#page { position: fixed; inset: 0; pointer-events: none; transition: opacity 1.2s; }
#page.hidden { opacity: 0; }
#yours {
  position: absolute; left: 50%; top: 11vh; transform: translateX(-50%);
  width: min(40em, 86vw); text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.3; color: var(--you); opacity: 0; transition: opacity 1.6s;
  text-shadow: 0 0 18px rgba(120, 160, 255, 0.35);
  overflow-wrap: anywhere;
}
#yours.on { opacity: 1; }
#yours .q { color: rgba(207, 224, 255, 0.55); }
#column {
  position: absolute; left: max(6vw, 22px); bottom: 15vh; width: min(34em, 88vw);
  padding: 18px 20px 16px; border-radius: 6px;
  background: radial-gradient(ellipse at 30% 60%, rgba(4, 6, 10, 0.72), rgba(4, 6, 10, 0.35) 70%, rgba(4, 6, 10, 0));
}
#lines .line {
  font-size: clamp(14px, 1.45vw, 18px); line-height: 1.55; letter-spacing: 0.01em; color: var(--ink);
  margin: 0 0 0.35em; opacity: 1; transition: opacity 1.4s, color 1.4s;
  text-shadow: 0 0 10px rgba(4, 6, 10, 0.9);
}
#lines .line.old { color: var(--dim); }
#lines .line.gone { opacity: 0; }
#lines .line .you { font-family: var(--serif); font-style: italic; color: var(--you); font-size: 1.12em; }
.caret {
  display: inline-block; width: 0.58em; height: 1.1em; margin-left: 2px; vertical-align: -0.18em;
  background: var(--ink); opacity: var(--caret, 1);
}

/* ---------------------------------------------------------------- the window, then the letter */
#sheet {
  position: fixed; left: 50%; top: 50%;
  width: min(620px, 88vw); height: min(76vh, 780px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 207, 138, 0.0);
  border-radius: 3px; pointer-events: none; opacity: 0;
  transition: opacity 1.2s, border-color 1.5s, background-color 1.5s, box-shadow 1.5s;
  perspective: 1400px;
}
#sheet.on { opacity: 1; }
#sheet.frame { border-color: rgba(255, 207, 138, 0.55); box-shadow: 0 0 40px rgba(255, 207, 138, 0.08) inset, 0 0 60px rgba(255, 207, 138, 0.05); }
#sheet.paper { background-color: rgba(18, 16, 13, 0.97); border-color: rgba(255, 220, 170, 0.28); }
#sheet-inner { position: absolute; inset: 0; padding: clamp(18px, 4.5vh, 42px) clamp(18px, 4vw, 44px); overflow: hidden; display: flex; flex-direction: column; }
#sheet-scroll { position: relative; flex: 1; overflow: hidden; min-height: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 3%, #000 94%, transparent 100%); }
#sheet.side { left: 64%; width: min(560px, 52vw); }
#sheet-body.rainbox { height: 100%; column-fill: auto; column-gap: 1.4em; }
#sheet-head { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); min-height: 1.4em; margin-bottom: 1.2em; }
#sheet-body { font-size: clamp(14px, 1.6vw, 18px); line-height: 1.62; color: var(--ink); transition: opacity 1.2s; }
#sheet-body .rain { font-size: var(--rain, 12px); line-height: 1.25; color: var(--dim); white-space: nowrap; overflow: hidden; }
#sheet-body .rain.you { font-family: var(--serif); font-style: italic; color: var(--you); }
#sheet-body .rain.w { color: rgba(255, 207, 138, 0.75); }
#sheet-body .verse { margin: 0 0 1.05em; }
#sheet-body .ln { display: block; min-height: 1.62em; }
#sheet-body .sy { opacity: 0; transition: opacity 0.35s, color 0.8s, text-shadow 0.8s; }
#sheet-body .sy.on { opacity: 1; }
#sheet-body .sy.now { color: #fff6e6; text-shadow: 0 0 12px rgba(255, 207, 138, 0.8); }
#sheet-body .sp { white-space: pre; }
#sheet-body.read .sy.now { color: var(--you); text-shadow: 0 0 12px rgba(150, 190, 255, 0.8); }
#sheet-notes { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-evenly; pointer-events: none; }
#sheet-notes .note {
  font-size: clamp(12px, 1.25vw, 14.5px); line-height: 1.45; color: var(--ink);
  opacity: 0; transition: opacity 1.2s, color 2s;
}
#sheet-notes .note.on { opacity: 1; }
#sheet-notes .note.old { color: var(--dim); }
#sheet-notes .note .from { display: block; font-size: 11px; letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; margin-bottom: 2px; }
#sheet-sign { position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; }
#sheet-sign .l { display: inline-block; width: 1.05em; font-size: clamp(34px, 5.4vw, 60px); font-weight: 300; color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity 0.6s, transform 0.9s; }
#sheet-sign .l.on { opacity: 1; transform: none; }
#sheet-sign .l small { display: block; font-size: 12px; letter-spacing: 0.1em; color: var(--amber); margin-top: 6px; opacity: 0.8; }
.fold { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 220, 170, 0); transition: background 1s; }
.fold.f1 { top: 33.3%; } .fold.f2 { top: 66.6%; }
#sheet.creased .fold { background: rgba(255, 220, 170, 0.18); }

/* ---------------------------------------------------------------- the cover: an empty conversation */
#cover {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 55%, #0a0e16, var(--night) 70%); z-index: 20; padding: 24px;
  transition: opacity 0.9s;
}
#cover.out { opacity: 0; pointer-events: none; }
.convo { width: min(36em, 92vw); }
.convo h1 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(34px, 6vw, 62px); letter-spacing: 0.01em; margin: 0 0 0.15em; color: var(--ink); }
.convo .who { font-size: 13px; color: var(--dim); margin: 0 0 3.2em; letter-spacing: 0.02em; }
.convo .with { color: var(--faint); }
.field { display: flex; align-items: flex-start; gap: 0.6em; border-bottom: 1px solid rgba(236, 230, 218, 0.22); padding: 0 0 8px; }
.field .prompt { color: var(--amber); font-size: 20px; line-height: 1.35; }
#first {
  flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: var(--you);
  font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.35;
  caret-color: var(--amber); min-height: 1.4em; overflow: hidden;
}
#first::placeholder { color: rgba(207, 224, 255, 0.4); }
.go { display: flex; align-items: center; gap: 1.2em; margin-top: 1.4em; flex-wrap: wrap; }
#begin, #end button, #end a, #forget, #notes-close {
  background: transparent; border: 1px solid rgba(255, 207, 138, 0.5); color: var(--amber); border-radius: 20px;
  padding: 7px 18px; font-size: 13px; letter-spacing: 0.08em; cursor: pointer; text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
#begin:hover, #end button:hover, #end a:hover, #forget:hover, #notes-close:hover { background: rgba(255, 207, 138, 0.1); border-color: var(--amber); }
.hint { font-size: 12px; color: var(--faint); }
.loading { margin-top: 1.4em; font-size: 12px; color: var(--dim); }
#note-back { margin: 0 0 3em; padding: 14px 16px; border-left: 2px solid rgba(207, 224, 255, 0.35); }
#note-text { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--ink); margin: 0 0 0.9em; }
#note-text .you { font-style: italic; color: var(--you); }
#forget { font-size: 11px; padding: 4px 12px; }

/* ---------------------------------------------------------------- the bar */
#bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 14px;
  padding: 12px max(16px, 3vw) calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(4, 6, 10, 0.85), rgba(4, 6, 10, 0));
  opacity: 0; transition: opacity 0.6s; pointer-events: none;
}
#bar.show { opacity: 1; pointer-events: auto; }
#bar button { background: transparent; border: 0; color: var(--dim); font-size: 12px; letter-spacing: 0.08em; cursor: pointer; padding: 6px 4px; }
#bar button:hover { color: var(--ink); }
#bar .time { font-size: 12px; color: var(--faint); min-width: 8.5em; font-variant-numeric: tabular-nums; }
#track { position: relative; flex: 1; height: 26px; cursor: pointer; outline: none; }
#track .rail { position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: rgba(236, 230, 218, 0.15); }
#track .fill { position: absolute; left: 0; top: 12px; height: 2px; background: var(--amber); width: 0; }
#track .head { position: absolute; top: 8px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--amber); left: 0; }
#track .marks span { position: absolute; top: 0; font-size: 10px; color: var(--faint); transform: translateX(-50%); }
#track .marks span::after { content: ''; position: absolute; left: 50%; top: 12px; width: 1px; height: 8px; background: rgba(236, 230, 218, 0.3); }
#track .tip { position: absolute; bottom: 26px; transform: translateX(-50%); font-size: 11px; color: var(--ink); background: rgba(4, 6, 10, 0.85); padding: 3px 8px; border-radius: 3px; white-space: nowrap; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
#track:hover .tip { opacity: 1; }

/* ---------------------------------------------------------------- the end */
#end { position: fixed; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4, 6, 10, 0.9); opacity: 0; transition: opacity 1.6s; overflow-y: auto; }
#end.on { opacity: 1; }
#end .inner { width: min(36em, 92vw); }
#end h2 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(30px, 5vw, 48px); margin: 0; }
#end .who { font-size: 12px; color: var(--dim); margin: 0.3em 0 2.4em; }
#end .note { font-family: var(--serif); font-size: 18px; line-height: 1.5; margin: 0.6em 0 1.2em; }
#end .note .you { font-style: italic; color: var(--you); }
#end .small, .small { font-size: 12px; color: var(--dim); line-height: 1.6; }
#end input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--you); font-family: var(--serif); font-style: italic; font-size: 19px; caret-color: var(--amber); }
#end .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 1em; }
#end .links { margin-top: 2.4em; }
#end label { display: block; margin-top: 0.4em; }

/* ---------------------------------------------------------------- the story */
#notes { position: fixed; inset: 0; z-index: 30; overflow-y: auto; background: rgba(4, 6, 10, 0.96); -webkit-overflow-scrolling: touch; }
#notes .inner { max-width: 46em; margin: 0 auto; padding: 64px max(20px, 4vw) 80px; font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--ink); }
#notes-close { position: fixed; top: 14px; left: 14px; z-index: 31; }
#notes h2 { font-style: italic; font-weight: 300; font-size: 40px; margin: 0 0 0.4em; }
#notes h3 { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); margin: 2.6em 0 0.8em; }
#notes .small { font-size: 15px; }
#notes ol.found { padding-left: 1.2em; }
#notes ol.found li { margin: 0 0 0.8em; }
#notes table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 13px; }
#notes td, #notes th { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid rgba(236, 230, 218, 0.1); vertical-align: top; }
#notes th { color: var(--dim); font-weight: 400; }
#notes pre.letter, #notes .prompt { white-space: pre-wrap; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink); background: rgba(236, 230, 218, 0.04); padding: 18px 20px; border-radius: 4px; }
#notes .lyrics { font-family: var(--mono); font-size: 14px; line-height: 1.6; columns: 2 16em; column-gap: 2em; margin: 1em 0; }
#notes .lyrics p { margin: 0 0 1em; break-inside: avoid; }
#notes blockquote { margin: 0 0 1.1em; padding-left: 1em; border-left: 2px solid rgba(255, 207, 138, 0.35); }
#notes blockquote .from { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--faint); text-transform: uppercase; margin-top: 0.3em; }
#notes a { color: var(--amber); }
#notes .priv { margin-top: 3em; }

@media (max-width: 600px) {
  #column { bottom: 17vh; padding: 14px 14px 12px; }
  #yours { top: 9vh; }
  #sheet { height: min(70vh, 640px); }
  #sheet.side { left: 50%; top: 38%; width: 88vw; height: 52vh; }
  #bar .time { min-width: 0; }
  #track .marks span { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  #sheet-sign .l { transform: none; }
  #monolith-return:hover, #monolith-return:focus { transform: none; }
}