:root{
  --night:#100b09;--leather:#241511;--leather2:#3d241b;--gold:#bd9568;
  --paper:#d8c4a2;--paper2:#cdb48c;--ink:#2b201d;--ink-soft:#513e36;--wine:#5b1d20;
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--night);color:#eadfcf;font-family:"Gowun Batang",Georgia,serif;overscroll-behavior:none}
body{overflow-x:hidden}
button,input,textarea{font:inherit}
button{cursor:pointer}
#app{min-height:100dvh;max-width:560px;margin:0 auto;padding:calc(10px + var(--safe-top)) 13px calc(20px + var(--safe-bottom));position:relative;isolation:isolate}
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(circle at 50% 10%,#442b1d 0,transparent 42%),linear-gradient(#140d0b,#080504)}
.ambient:after{content:"";position:absolute;inset:0;opacity:.3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}
.ambient i{position:absolute;width:4px;height:4px;border-radius:50%;background:#d7a969;box-shadow:0 0 12px #d7a969;opacity:.2;animation:float 8s ease-in-out infinite}
.ambient i:nth-child(1){left:15%;top:24%}.ambient i:nth-child(2){left:83%;top:42%;animation-delay:-3s}.ambient i:nth-child(3){left:62%;top:78%;animation-delay:-6s}
@keyframes float{50%{transform:translateY(-25px);opacity:.6}}

.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 3px 10px}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid #765842;background:rgba(34,20,15,.82);color:#dbc09e;font-weight:700;font-size:15px;box-shadow:inset 0 0 0 3px #1a0f0d;display:grid;place-items:center}
.icon-btn:active{transform:scale(.96)}
.title-block{text-align:center;min-width:0}.title-block h1{font-family:"Cormorant Garamond","Gowun Batang",serif;font-size:25px;line-height:1;margin:-1px 0 3px;font-weight:600;letter-spacing:.04em}.title-block>p:last-child{font-size:10px;color:#9f8871;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.eyebrow{font-family:"Cormorant Garamond",serif;font-size:9px;letter-spacing:.25em;color:var(--gold);margin:0 0 2px;text-transform:uppercase}

.book{height:calc(100dvh - 145px - var(--safe-top) - var(--safe-bottom));min-height:535px;max-height:790px;position:relative;border-radius:5px 12px 12px 5px;background:
  linear-gradient(90deg,rgba(69,43,27,.17),transparent 7%,transparent 94%,rgba(68,42,25,.18)),
  repeating-linear-gradient(0deg,transparent 0,transparent 31px,rgba(92,62,40,.075) 32px),
  linear-gradient(135deg,var(--paper),var(--paper2));
box-shadow:0 22px 46px #000b,0 0 0 2px #6f4a35,0 0 0 7px #1c100d,inset 0 0 48px rgba(64,36,17,.25);overflow:hidden;color:var(--ink)}
.book-edge{position:absolute;inset:0;pointer-events:none;border-radius:inherit;border:1px solid rgba(255,240,210,.25);box-shadow:inset -7px 0 8px rgba(75,44,24,.2)}
.paper-grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.35'/%3E%3C/svg%3E")}
.stitch{position:absolute;left:8px;top:8px;bottom:8px;width:1px;border-left:1px dashed rgba(70,40,25,.25)}
.page-date{position:absolute;top:16px;left:25px;margin:0;color:#705a49;font:italic 13px "Cormorant Garamond",serif;letter-spacing:.08em}
.owner-mark{position:absolute;right:22px;top:14px;margin:0;color:#6b4937;font:italic 600 15px "Cormorant Garamond",serif;opacity:.72}

.writing-zone{position:absolute;inset:48px 17px 117px 21px;touch-action:none;transition:opacity .8s,filter .8s;z-index:3}
#inkCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.write-hint{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);text-align:center;color:#795f4c;pointer-events:none;transition:opacity .3s;width:90%}.write-hint.hide{opacity:0}.write-hint .nib{display:block;font-size:24px;opacity:.55;margin-bottom:9px}.write-hint strong{display:block;font-size:15px;font-weight:400}.write-hint small{display:block;font-size:10px;margin-top:5px;opacity:.7}
.recognizing{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;background:rgba(207,184,145,.58);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s}.recognizing.show{opacity:1}.recognizing i{width:5px;height:5px;background:#4f2d25;border-radius:50%;animation:pulse 1s infinite}.recognizing i:nth-child(2){animation-delay:.15s}.recognizing i:nth-child(3){animation-delay:.3s}.recognizing span{font-size:11px;margin-left:7px;color:#523e34}@keyframes pulse{50%{transform:translateY(-5px);opacity:.35}}
.writing-zone.absorb{animation:absorbInk 1.25s forwards}@keyframes absorbInk{0%{opacity:1;filter:none}45%{filter:blur(1.5px);opacity:.7;transform:scale(.997)}100%{filter:blur(8px);opacity:0;transform:scale(.985)}}

.typed-zone{position:absolute;inset:52px 23px 127px 28px;z-index:6;display:flex;flex-direction:column;gap:10px;opacity:0;pointer-events:none;transition:opacity .25s}.typed-zone.show{opacity:1;pointer-events:auto}.typed-zone textarea{flex:1;resize:none;border:0;outline:0;background:transparent;color:#35251f;font-size:18px;line-height:32px;padding:10px 4px;background-image:repeating-linear-gradient(transparent 0,transparent 31px,rgba(76,51,34,.08) 32px);caret-color:#5e1c1c}.typed-zone textarea::placeholder{color:#755f50aa}.typed-zone button{align-self:center;border:1px solid #87654c;background:#3e281f;color:#ead4b3;border-radius:2px;padding:10px 20px;font-size:11px;box-shadow:0 3px 10px #5c3d2866}

.answer-layer{position:absolute;inset:64px 28px 126px 31px;z-index:5;display:flex;flex-direction:column;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s}.answer-layer.show{opacity:1}.answer-kicker{text-align:center;color:#705343;font:italic 13px "Cormorant Garamond",serif;margin:0 0 12px;opacity:.85}.answer-text{font-size:18px;line-height:1.85;text-align:center;color:#3b2923;text-shadow:0 0 1px rgba(65,25,18,.28)}
.answer-text span{opacity:0;filter:blur(3px);animation:inkAppear .42s forwards;display:inline}.answer-layer.fade{animation:replyFade 1.8s forwards}@keyframes inkAppear{to{opacity:1;filter:blur(0)}}@keyframes replyFade{to{opacity:0;filter:blur(5px)}}

.page-tools{position:absolute;left:19px;right:16px;bottom:66px;z-index:9;height:48px;display:flex;align-items:center;gap:5px;border-top:1px solid rgba(83,55,36,.17);padding-top:8px}.page-tools button{border:0;background:transparent;color:#5e493c;font-size:15px;padding:8px 7px;border-radius:5px}.page-tools button span{font-size:9px;display:block;margin-top:1px}.page-tools button:disabled{opacity:.3}.page-tools .send-ink{margin-left:auto;background:#432a21;color:#e6cfaa;padding:9px 12px;font-size:11px;display:flex;align-items:center;gap:9px;box-shadow:0 2px 6px rgba(65,35,22,.25)}.send-ink b{font-size:15px}
.ink-meter{position:absolute;left:24px;right:20px;bottom:18px;z-index:8}.meter-head{display:flex;justify-content:space-between;font:600 8px "Cormorant Garamond",serif;letter-spacing:.2em;color:#684e3e;margin-bottom:5px}.meter-head b{letter-spacing:.05em}.meter-track{height:2px;background:rgba(83,52,36,.19);overflow:hidden}.meter-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#6b382d,#2d1717);box-shadow:0 0 5px #5f201b;transition:width 1s}

.history-peek{height:41px;margin:12px auto 0;display:flex;align-items:center;gap:8px;border:1px solid #4d372b;background:#1b100e;color:#9f856c;border-radius:30px;padding:0 16px;font-size:10px}.history-peek span{color:#c9a06e}.history-peek b{background:#3a251c;color:#c8aa82;border-radius:20px;min-width:19px;padding:2px 5px}

.anagram-scene,.memory-scene{position:absolute;inset:0;z-index:15;background:rgba(22,12,9,.92);color:#d9c09d;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .7s}.anagram-scene.show,.memory-scene.show{opacity:1;pointer-events:auto}.anagram-scene p{font-size:10px;letter-spacing:.12em;color:#92765d}.letter-stage{width:92%;height:90px;position:relative;margin:12px 0}.letter-stage i{position:absolute;font:500 25px "Cormorant Garamond",serif;color:#e1c79c;text-shadow:0 0 9px #a83a2d;transition:left 1.6s cubic-bezier(.22,.8,.18,1),top 1.6s cubic-bezier(.22,.8,.18,1),transform 1.6s}.anagram-scene strong{opacity:0;font:600 25px "Cormorant Garamond",serif;letter-spacing:.1em;transition:opacity .6s}.anagram-scene.revealed strong{opacity:1}.anagram-scene small{opacity:0;margin-top:8px;font-size:11px;color:#91745d;transition:opacity .6s .4s}.anagram-scene.revealed small{opacity:1}
.memory-scene{background:radial-gradient(circle,rgba(92,113,104,.8),rgba(12,17,18,.97) 62%)}.memory-ring{width:130px;height:130px;border:1px solid #91b2a766;border-radius:50%;box-shadow:0 0 0 25px #8fb3a311,0 0 0 55px #8fb3a309;animation:memoryPulse 2.2s infinite}.memory-scene p{margin:35px 0 5px;font:italic 19px "Cormorant Garamond",serif;letter-spacing:.1em}.memory-scene small{font-size:10px;color:#9ab1aa}@keyframes memoryPulse{50%{transform:scale(1.15);opacity:.6}}
.book.whisper{animation:whisper .15s linear 6}@keyframes whisper{50%{transform:translateX(1.5px)}}

.scrim{position:fixed;inset:0;background:#0009;backdrop-filter:blur(3px);z-index:40;opacity:0;pointer-events:none;transition:opacity .25s}.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;z-index:50;width:min(560px,100%);max-height:88dvh;overflow:auto;background:linear-gradient(#251712,#140c0a);color:#e8dccb;border:1px solid #6a4b37;border-bottom:0;border-radius:24px 24px 0 0;padding:10px 19px calc(22px + var(--safe-bottom));transform:translate(-50%,105%);transition:transform .34s cubic-bezier(.22,1,.36,1);box-shadow:0 -18px 55px #000a}.sheet.open{transform:translate(-50%,0)}.grab{width:38px;height:4px;border-radius:5px;background:#735844;margin:0 auto 13px}.sheet-head{display:flex;justify-content:space-between;align-items:flex-start}.sheet-head h2{font-size:20px;margin:0}.close-sheet{border:1px solid #5e4434;background:#1a100d;color:#bda58b;width:34px;height:34px;border-radius:50%;font-size:23px}.sheet-copy{font-size:11px;color:#a58e77;line-height:1.6;margin:10px 0 14px}
.persona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.persona-card{min-height:84px;border:1px solid #53392d;background:#1b100e;color:#c9b49c;border-radius:10px;padding:10px 7px;text-align:left;position:relative}.persona-card.on{border-color:#ba8b5f;background:#342019;box-shadow:inset 0 0 0 1px #8c6549}.persona-card .sigil{font-family:"Cormorant Garamond",serif;font-size:22px;display:block;color:#cfaa79}.persona-card b{display:block;font-size:12px;margin:4px 0 2px}.persona-card small{font-size:8px;color:#89725f;line-height:1.35;display:block}.persona-card.on:after{content:"✓";position:absolute;right:7px;top:6px;font-size:10px;color:#d5ad7e}
.field{display:block;margin:14px 0}.field span,.setting-label{display:block;color:#a9917a;font-size:10px;margin-bottom:6px}.field input{width:100%;border:1px solid #5b3f31;background:#130b09;color:#eee0ca;border-radius:8px;padding:12px;outline:0}.field input:focus{border-color:#ac7d58}.primary-btn{width:100%;border:0;border-radius:8px;background:#a77850;color:#170d0a;padding:13px;font-weight:700}.setting-block{margin:14px 0}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:7px}.segmented button{border:1px solid #53392d;background:#190f0c;color:#a9917a;border-radius:8px;padding:10px 5px;font-size:10px}.segmented button.on{background:#5b392a;color:#f0ddc4;border-color:#987052}.toggle-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3d2a22;padding:13px 0;gap:15px}.toggle-row span b{display:block;font-size:12px}.toggle-row span small{display:block;color:#806b5c;font-size:9px;margin-top:4px}.toggle-row input{display:none}.toggle-row>i{width:40px;height:23px;background:#3d2d27;border-radius:20px;position:relative;flex:0 0 auto;transition:.2s}.toggle-row>i:after{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#8d7563;left:3px;top:3px;transition:.2s}.toggle-row input:checked+i{background:#81583f}.toggle-row input:checked+i:after{left:20px;background:#e0c49c}
.connection-card{border:1px solid #50382d;border-radius:10px;margin:16px 0;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#1a100d}.connection-card>div{display:flex;align-items:center;gap:9px}.connection-card i{width:8px;height:8px;border-radius:50%;background:#9c6e3d;box-shadow:0 0 8px #9c6e3d}.connection-card i.live{background:#62a56f;box-shadow:0 0 8px #62a56f}.connection-card b,.connection-card small{display:block}.connection-card b{font-size:10px}.connection-card small{font-size:8px;color:#806c5c;max-width:245px;margin-top:2px;line-height:1.4}.connection-card button{border:1px solid #604536;background:#2a1a15;color:#bca188;border-radius:7px;padding:8px;font-size:9px;white-space:nowrap}.danger-btn{width:100%;background:transparent;border:1px solid #613434;color:#b97671;border-radius:8px;padding:11px;font-size:10px}
.history-list{display:flex;flex-direction:column;gap:10px;margin-top:13px}.history-empty{text-align:center;color:#806c5b;font-size:11px;padding:35px}.trace{border-bottom:1px solid #3d2b22;padding:0 2px 12px}.trace time{font:italic 10px "Cormorant Garamond",serif;color:#785f4d}.trace p{margin:6px 0;font-size:11px;line-height:1.55}.trace p:first-of-type{color:#b59c84}.trace p:last-child{color:#ddcbb4}.trace em{font-style:normal;color:#8e6c54;font-size:9px}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-bottom));z-index:80;transform:translate(-50%,18px);background:#080504eF;border:1px solid #604533;color:#d9c5aa;border-radius:30px;padding:10px 16px;font-size:10px;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-height:690px){.book{min-height:505px}.topbar{height:62px}.writing-zone{inset-top:42px}.page-tools{bottom:57px}.ink-meter{bottom:13px}.history-peek{margin-top:8px}}
@media(min-width:700px){#app{padding-left:0;padding-right:0}.book{border-radius:6px 14px 14px 6px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}