:root{--ink-deep: #2b1d12;--ink-magic: #173a2c;--parchment: #ece0c3;--parchment-2: #e2d3ac;--parchment-edge: #7c6a45;--candle: #f2b25c;--bg: #0c0805;--maroon: #6e2a2a;--maroon-bright: #8a3535}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{background:radial-gradient(circle at 50% 30%,#241914 0%,#150e0a 45%,var(--bg) 100%);overflow:hidden;font-family:EB Garamond,serif}body,#app{display:flex;align-items:center;justify-content:center;position:relative}.ambient-glow{position:fixed;inset:0;background:radial-gradient(circle at 50% 38%,rgba(242,178,92,.16),transparent 60%);pointer-events:none;z-index:0;animation:flicker 5.5s ease-in-out infinite alternate}@keyframes flicker{0%{opacity:.75;transform:scale(1)}30%{opacity:.95;transform:scale(1.015)}55%{opacity:.7;transform:scale(.99)}to{opacity:.9;transform:scale(1.01)}}.candle{position:fixed;top:6%;right:8%;width:14px;height:34px;z-index:1;pointer-events:none;filter:drop-shadow(0 0 14px rgba(242,178,92,.65));animation:sway 3.2s ease-in-out infinite;transform-origin:bottom center}.candle:before{content:"";position:absolute;left:50%;bottom:0;width:10px;height:26px;background:linear-gradient(180deg,#ffd98a 0%,var(--candle) 55%,#b5551c 100%);border-radius:50%/60% 60% 40% 40%;transform:translate(-50%);animation:flame 1.6s ease-in-out infinite}@keyframes flame{0%,to{transform:translate(-50%) scaleY(1) scaleX(1)}25%{transform:translate(-50%) scaleY(1.08) scaleX(.94)}50%{transform:translate(-50%) scaleY(.94) scaleX(1.05)}75%{transform:translate(-50%) scaleY(1.05) scaleX(.97)}}@keyframes sway{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}#motes{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}.mote{position:absolute;bottom:-10px;border-radius:50%;background:radial-gradient(circle,#f4d696d9,#f4d69600);animation-name:drift;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes drift{0%{transform:translate(0);opacity:0}10%{opacity:.7}50%{transform:translate(12px,-46vh)}90%{opacity:.4}to{transform:translate(-6px,-92vh);opacity:0}}.book{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:min(680px,92vw)}.page{position:relative;width:100%;min-height:44vh;padding:clamp(28px,5vw,56px) clamp(24px,6vw,52px);background:radial-gradient(ellipse at top left,rgba(255,255,255,.12),transparent 55%),linear-gradient(var(--parchment),var(--parchment-2));border-radius:3px;box-shadow:0 30px 60px #0000008c,0 4px #00000026,inset 0 0 60px #7c6a4559,inset 0 0 2px #0006;transform:rotate(-.35deg);animation:breathe 7s ease-in-out infinite}@keyframes breathe{0%,to{transform:rotate(-.35deg) scale(1)}50%{transform:rotate(-.2deg) scale(1.004)}}.page:before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");opacity:.05;mix-blend-mode:multiply;pointer-events:none;border-radius:3px}.page:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 40px #3c2d1440;pointer-events:none;border-radius:3px}.voice-layer{position:relative;z-index:1;font-family:IM Fell English,serif;font-style:italic;color:var(--ink-magic);font-size:clamp(1.05rem,2.1vw,1.32rem);line-height:1.85;min-height:0;margin-bottom:.4em}.voice-layer .char{display:inline-block;opacity:0;transform:translateY(4px);transition:opacity .5s ease,transform .5s ease}.voice-layer.reveal .char{opacity:1;transform:translateY(0)}.voice-layer.soaking{transition:opacity 1.1s ease,filter 1.1s ease,transform 1.1s ease;opacity:0;filter:blur(3px);transform:translateY(6px) scale(.985)}.writing-layer{position:relative;z-index:1;font-family:IM Fell English,serif;font-style:italic;color:var(--ink-deep);font-size:clamp(1.1rem,2.2vw,1.4rem);line-height:1.85;min-height:3.5em;outline:none;caret-color:var(--ink-deep);white-space:pre-wrap;word-wrap:break-word;transition:opacity .7s ease,transform .7s ease,filter .7s ease}.writing-layer:empty:before{content:attr(data-placeholder);color:#2b1d1261;font-style:italic}.writing-layer.soaking{transition:opacity 1.3s ease,filter 1.3s ease,transform 1.3s ease;opacity:0;filter:blur(3px);transform:translateY(8px) scale(.985)}.writing-layer.is-hidden{opacity:0;filter:blur(4px);transform:translateY(14px) scale(.98);pointer-events:none}.status{margin-top:18px;font-family:EB Garamond,serif;font-variant:small-caps;letter-spacing:.14em;font-size:.78rem;color:#eed6a8a6;text-align:center;min-height:1.4em;transition:opacity .6s ease}.footnote{margin-top:6px;font-style:italic;font-size:.72rem;color:#eed6a859;text-align:center}.seal-btn{margin-top:22px;width:164px;min-height:54px;padding:0 18px;border-radius:999px;border:none;cursor:pointer;background:radial-gradient(circle at 35% 30%,var(--maroon-bright),var(--maroon) 60%,#3f1717 100%);color:#f2d9b8;font-family:EB Garamond,serif;font-variant:small-caps;letter-spacing:.08em;font-size:.78rem;box-shadow:0 8px 22px #00000080,inset 0 2px 4px #ffffff26;transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease,filter .25s ease}.seal-btn:hover:not(:disabled){transform:translateY(-2px) scale(1.03);box-shadow:0 12px 26px #0000008c,inset 0 2px 4px #fff3}.seal-btn:focus-visible{outline:2px solid var(--candle);outline-offset:3px}.writing-layer:focus-visible{outline:none}.seal-btn:disabled,.seal-btn--disabled{cursor:default;opacity:.44;filter:saturate(.4) grayscale(.45);box-shadow:0 6px 14px #0000005c,inset 0 1px 2px #ffffff14}@media(prefers-reduced-motion:reduce){.ambient-glow,.candle,.candle:before,.page,.mote{animation:none!important}.voice-layer .char{transition:opacity .2s ease}}