:root {
  --paper: #ebe3d1;
  --ink: #2a221c;
  --ink-soft: rgba(42, 34, 28, 0.62);
  --ink-faint: rgba(42, 34, 28, 0.28);
  --sanguine: #b4552d;
  --halo: rgba(235, 227, 209, 0.9);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Sitka Text", Georgia, serif;
  --sans: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--paper); color: var(--ink); transition: background 1.6s ease, color 1.6s ease; }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; cursor: crosshair; }

button, input { font: inherit; color: inherit; }

/* ---------- wordmark ---------- */
#mark { position: fixed; top: 26px; left: 30px; display: flex; align-items: baseline; gap: 14px; pointer-events: none; transition: opacity 1.2s ease; }
#mark .name { font-family: var(--serif); font-style: italic; font-size: 25px; letter-spacing: 0.01em; }
#mark .sub, #tools button, #hud, .label, #chapters, .fine { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; }
#mark .sub { color: var(--ink-soft); }

/* ---------- tools ---------- */
#tools { position: fixed; top: 24px; right: 26px; display: flex; gap: 4px; transition: opacity 1.2s ease; }
#tools button { background: none; border: 0; padding: 8px 10px; color: var(--ink-soft); cursor: pointer; border-radius: 2px; transition: color 0.25s; }
#tools button:hover, #tools button:focus-visible { color: var(--sanguine); outline: none; }
#tools button + button { position: relative; }
#tools button + button::before { content: ""; position: absolute; left: -2px; top: 11px; bottom: 11px; width: 1px; background: var(--ink-faint); }

/* ---------- intro veil ---------- */
#veil { position: fixed; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, var(--halo) 0%, rgba(235, 227, 209, 0.55) 55%, transparent 100%);
  transition: opacity 1.8s ease, visibility 1.8s; }
.veil-inner { pointer-events: auto; padding: 0 24px; }
#veil h1, #nogpu h1 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(64px, 11vw, 148px); line-height: 0.95; margin: 0 0 0.12em; letter-spacing: -0.02em; }
#veil .lede { font-family: var(--serif); font-size: clamp(18px, 2vw, 26px); margin: 0 0 2.2em; color: var(--ink-soft); }
#begin { background: none; border: 1px solid var(--ink); padding: 15px 34px 14px; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; cursor: pointer; border-radius: 999px; transition: background 0.3s, color 0.3s, border-color 0.3s; }
#begin span { color: var(--ink-soft); letter-spacing: 0.2em; margin-left: 0.5em; transition: color 0.3s; }
#begin:hover, #begin:focus-visible { background: var(--sanguine); border-color: var(--sanguine); color: #fff8ee; outline: none; }
#begin:hover span, #begin:focus-visible span { color: rgba(255, 248, 238, 0.8); }
.fine { color: var(--ink-soft); margin-top: 3.2em; line-height: 1.9; }
body:not(.intro) #veil { opacity: 0; visibility: hidden; }
body.intro #tools, body.intro #mark, body.intro #chapters, body.intro #hud { opacity: 0; }

/* ---------- captions ---------- */
#caption { position: fixed; left: 0; right: 0; bottom: 11.5vh; display: grid; justify-items: center; pointer-events: none; padding: 0 6vw; }
#caption p { grid-area: 1 / 1; margin: 0; max-width: 31em; text-align: center; font-family: var(--serif); font-size: clamp(20px, 2.15vw, 33px); line-height: 1.36;
  text-wrap: balance; text-shadow: 0 0 14px var(--halo), 0 0 30px var(--halo), 0 0 3px var(--halo); transition: opacity 0.8s ease, filter 0.8s ease; }
#caption p.out { opacity: 0; filter: blur(5px); }
#caption span { opacity: 0; filter: blur(4px); display: inline-block; white-space: pre; transform: translateY(0.18em); transition: opacity 0.7s ease, filter 0.7s ease, transform 0.9s cubic-bezier(.2,.7,.2,1); }
#caption span.on { opacity: 1; filter: none; transform: none; }

/* ---------- chapters ---------- */
#chapters { position: fixed; left: 0; right: 0; bottom: 30px; display: flex; justify-content: center; gap: 6px; color: var(--ink-soft); transition: opacity 1.2s ease; }
#chapters button { background: none; border: 0; padding: 8px 4px; cursor: pointer; display: flex; align-items: center; gap: 0; color: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; }
#chapters button i { display: block; width: 22px; height: 1px; background: var(--ink-faint); transition: width 0.6s ease, background 0.4s; }
#chapters button b { font-weight: 400; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.6s ease, opacity 0.5s, margin 0.6s; }
#chapters button.on i { width: 34px; background: var(--sanguine); }
#chapters button.on b { max-width: 14em; opacity: 1; margin: 0 10px 0 12px; color: var(--ink); }
#chapters button:hover i, #chapters button:focus-visible i { background: var(--ink); }
#chapters button:focus-visible { outline: none; }

/* ---------- free play ---------- */
#free { position: fixed; left: 50%; bottom: 62px; transform: translateX(-50%); display: grid; gap: 9px; width: min(760px, 92vw); padding: 16px 20px 14px;
  background: color-mix(in srgb, var(--paper) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ink-faint); border-radius: 14px; animation: rise 1.4s cubic-bezier(.2,.7,.2,1) both; }
#free[hidden] { display: none; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 18px); } to { opacity: 1; transform: translate(-50%, 0); } }
.row { display: flex; align-items: center; gap: 14px; }
.label { flex: 0 0 62px; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips button { background: none; border: 1px solid var(--ink-faint); border-radius: 999px; padding: 5px 13px 4px; font-family: var(--serif); font-size: 15px; cursor: pointer; color: var(--ink-soft); transition: all 0.25s; }
.chips button:hover { color: var(--ink); border-color: var(--ink-soft); }
.chips button.on { color: var(--paper); background: var(--ink); border-color: var(--ink); }
#say { flex: 1; background: none; border: 0; border-bottom: 1px solid var(--ink-faint); padding: 7px 2px 6px; font-family: var(--serif); font-size: 18px; outline: none; transition: border-color 0.3s; }
#say::placeholder { color: var(--ink-soft); font-style: italic; opacity: 0.8; }
#say:focus { border-color: var(--sanguine); }
body.free #caption { bottom: calc(62px + 232px); }
body.free #chapters { bottom: 16px; }

/* ---------- hud ---------- */
#hud { position: fixed; left: 30px; bottom: 34px; color: var(--ink-faint); font-variant-numeric: tabular-nums; pointer-events: none; transition: opacity 1.2s ease; }

body.quiet #mark, body.quiet #tools, body.quiet #chapters, body.quiet #hud, body.quiet #free { opacity: 0; pointer-events: none; }

/* ---------- no webgpu ---------- */
#nogpu { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; font-family: var(--serif); font-size: 20px; }
#nogpu[hidden] { display: none; }

@media (max-width: 760px) {
  #mark .sub, #hud { display: none; }
  #tools { right: 10px; top: 16px; }
  #mark { left: 18px; top: 20px; }
  #tools #b-full { display: none; }
  #caption { bottom: 13vh; }
  .label { flex-basis: 48px; }
  body.free #caption { bottom: calc(62px + 300px); }
}
@media (prefers-reduced-motion: reduce) {
  #caption span, #caption p { transition-duration: 0.01s; }
}

/* ---------- style accents ---------- */
body[data-style="wall"] #mark .sub, body[data-style="wall"] #tools button, body[data-style="wall"] #hud,
body[data-style="wall"] .label, body[data-style="wall"] #chapters, body[data-style="wall"] .fine {
  font-family: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; letter-spacing: 0.14em;
}
body[data-style="wall"] #chapters button.on b { color: var(--sanguine); }