:root {
  color-scheme: dark;
  --bg: #0b0c0b;
  --voice: #e1ddd1;
  --system: #81878a;
  --cue: #a49f91;
  --ash: #353633;
  --kept: #c4beac;
  --count: #84877e;
  --light: 0.12;
  --pulse: 1;
  --press-x: 50vw;
  --press-y: 43vh;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--voice); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
#stage { position: fixed; inset: 0; background: var(--bg); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: default; }
.wash { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, #25231c 0%, transparent 70%); opacity: var(--light); pointer-events: none; }
#stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 190px 170px at var(--press-x) var(--press-y), #bfb28b16, transparent 100%); opacity: 0; transition: opacity 1s ease; z-index: 1; }
#stage.is-holding::after { opacity: 1; transition-duration: .2s; }
.interaction-zone { position: absolute; inset: 14% 6% 22%; z-index: 4; }
.sentence-frame { position: absolute; left: 9%; right: 9%; top: 30%; height: 38%; z-index: 4; pointer-events: none; }
.sentence { width: 100%; margin: 0; text-align: center; font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", Georgia, serif; font-weight: 400; font-size: 64px; line-height: 1.6; letter-spacing: .035em; overflow-wrap: break-word; color: var(--voice); filter: brightness(var(--pulse)); transition: transform 1.2s cubic-bezier(.2,.65,.25,1), opacity 1.2s ease, filter .6s ease; }
html[lang="en"] .sentence { letter-spacing: .005em; line-height: 1.5; }
.sentence .unit.system { font-family: "PingFang SC", "Noto Sans SC", ui-monospace, monospace; font-weight: 300; letter-spacing: 0; color: var(--system); }
.replacement-cursor { position: absolute; top: 0; left: 0; width: 2px; background: #eee2bd; box-shadow: 0 0 7px #e5d7a755; pointer-events: none; animation: boundary-blink 1s step-end infinite; }
@keyframes boundary-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.is-holding .sentence { filter: brightness(calc(var(--pulse) * 1.10)); }
.is-leaving .sentence { transform: translateY(-5vh); opacity: 0; }
.is-gone .sentence { opacity: 0; transition: opacity .45s ease; }
.question { display: none; }
.cue { pointer-events: none; position: absolute; bottom: 24%; left: 0; right: 0; margin: 0; text-align: center; font: 12px/1.8 "PingFang SC", system-ui, sans-serif; letter-spacing: .2em; color: var(--cue); opacity: .86; transition: opacity .5s ease; z-index: 4; }
.is-holding .cue { opacity: .45; }
.ledger { position: absolute; left: 9%; right: 9%; bottom: calc(56px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto; gap: 5px 20px; z-index: 5; }
.ash { grid-column: 1/-1; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; overflow: hidden; height: 8px; margin-bottom: 15px; align-items: center; opacity: .75; }
.ash-bar { flex: 0 1 auto; min-width: 2px; height: 2px; background: var(--ash); }
.ash-bar.is-saved { height: 2px; background: var(--kept); }
.ash-bar.is-partial { height: 2px; background: linear-gradient(to right, var(--kept) var(--remaining), var(--ash) var(--remaining)); }
.count { margin: 0; color: var(--count); font: 11px/1.7 "PingFang SC", system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .035em; }
#presence { grid-column: 1; }
#gone { grid-column: 1; }
.wall-link { grid-column: 2; grid-row: 2/4; align-self: end; display: flex; gap: 10px; align-items: center; color: var(--count); text-decoration: none; padding: 6px 0 0 12px; cursor: default; }
.wall-link:hover .count, .wall-link:focus-visible .count { color: var(--voice); }
.wall-arrow { font: 16px/1 system-ui; opacity: .6; }
.ash-field, .shards-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ash-field { z-index: 1; }
.shards-layer { z-index: 3; }
.prints { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.print { position: absolute; width: 124px; height: 170px; margin-left: -67px; margin-top: -121px; color: #d2c9ae; opacity: calc(.18 + var(--depth,0) * .32); transform: rotate(-12deg) scale(calc(.97 + var(--depth,0) * .035)); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
.print > svg:not(.sigil) { width: 100%; height: 100%; }
.skin { fill: currentColor; fill-opacity: .035; stroke: currentColor; stroke-width: 1.35; stroke-linejoin: round; stroke-linecap: round; }
.crease { fill: none; stroke: currentColor; stroke-width: .8; stroke-linecap: round; opacity: .46; }
.crease.fine { opacity: .2; }
.print .skin { fill-opacity: .14; stroke-width: .7; }
.print .sigil { position: absolute; left: 45%; top: 67%; width: 25px; height: 25px; stroke: currentColor; stroke-width: .85; opacity: .65; }
.print.is-fading { opacity: 0; transform: rotate(-12deg) scale(1.02); transition: opacity 1.5s ease; }
.print.is-peak { opacity: .65; }
.hand { position: fixed; top: 0; left: 0; width: 76px; height: 105px; margin-left: -41px; margin-top: -75px; z-index: 3; color: #c6bfad; opacity: 0; pointer-events: none; transform: translate(-100px,-100px); transition: opacity .2s ease; will-change: transform; }
.hand-inner, .hand svg { width: 100%; height: 100%; overflow: visible; }
.hand-inner { transform: rotate(-12deg); transition: transform .4s ease; }
.hand.is-visible { opacity: .65; }
.hand:not(.is-visible) { transition: none; }
.hand.is-pressing { opacity: .12; }
.hand.is-pressing .hand-inner { transform: rotate(-10deg) scale(.96); }
.flare { position: absolute; width: 24px; height: 24px; margin: -12px; border: .5px solid #d9ceb5; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 2; }
.flare.is-on { animation: flare-out 1.2s ease-out forwards; }
@keyframes flare-out { from { transform: scale(1); opacity: .45; } to { transform: scale(32); opacity: 0; } }
.stage-tools { position: absolute; right: max(14px,env(safe-area-inset-right)); bottom: max(6px,env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; z-index: 8; }
.language-switch { display: flex; align-items: center; gap: 2px; font: 11px/1 system-ui,sans-serif; color: #5d6158; }
.language-switch button { min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; background: none; color: #85897d; font: inherit; letter-spacing: .06em; cursor: default; }
.language-switch button[aria-pressed="true"] { color: #dbd5c5; }
.language-switch button:hover { color: #eee8d9; }
.about-toggle { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: #999d90; cursor: default; z-index: 8; }
.about-toggle span { width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; opacity: .6; }
.about-text { position: absolute; bottom: 52px; right: 20px; width: min(320px,calc(100vw - 40px)); margin: 0; padding: 18px; background: #151612; border: 1px solid #34362e; font: 12px/1.9 system-ui,sans-serif; color: #b3b4a8; z-index: 9; }
a:focus-visible, button:focus-visible { outline: 1px solid #b7b39d; outline-offset: 6px; }
@media (hover:hover) and (pointer:fine) { .interaction-zone.has-hand { cursor: none; } }
@media (max-width:600px) {
  .sentence-frame { left: 8%; right: 8%; top: 29%; height: 36%; }
  .cue { bottom: 27%; font-size: 12px; }
  .ledger { left: 8%; right: 8%; bottom: calc(58px + env(safe-area-inset-bottom)); grid-template-columns: 1fr; gap: 4px; }
  .wall-link { grid-column: 1; grid-row: auto; padding: 3px 0; justify-self: start; }
  .ash { margin-bottom: 9px; }
  .count { font-size: 10px; }
  .interaction-zone { bottom: 25%; }
}
@media (max-height:480px) {
  .interaction-zone { top: 6%; bottom: 33%; }
  .sentence-frame { top: 12%; height: 35%; }
  .cue { bottom: 35%; }
  .ledger { bottom: 36px; }
  .ash { margin-bottom: 5px; }
}
@media (prefers-reduced-motion:reduce) {
  .replacement-cursor { animation: none; }
  .hand, .hand-inner, .print, .sentence, .cue, #stage::after { transition: none; }
  .is-leaving .sentence { transform: none; }
  .flare.is-on { animation: none; opacity: 0; }
}

.sentence .unit.voice + .unit.system { margin-inline-start: .18em; }