/* Warm editorial paper, ink-green accents, restrained depth. No full-screen
   blur: the avatar and its physical activity remain part of each story. */
:root{--surface:#fcf8ef;--surface-ink:#2c483f;--surface-soft:#778374;--surface-line:#a69c7538;--surface-card:#efede1;--surface-gold:#aa956c;--surface-shadow:0 24px 90px #203c3226,0 2px 8px #243d3210}
body[data-theme=night]{--surface:#253740;--surface-ink:#eee9d9;--surface-soft:#a4b8af;--surface-line:#b6c5b72b;--surface-card:#2c4148;--surface-gold:#c0ad80;--surface-shadow:0 24px 90px #07121d70}
#details{inset:28px 28px 28px auto;width:452px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 56px);padding:0;margin:auto 0;border:1px solid var(--surface-line);border-radius:24px;background:var(--surface);color:var(--surface-ink);box-shadow:var(--surface-shadow);overflow:hidden}
#details[open]{display:flex;flex-direction:column}#details::backdrop{background:#10291e1c;backdrop-filter:none}
.detail-chrome{display:flex;align-items:center;gap:12px;padding:22px 26px 18px;border-bottom:1px solid var(--surface-line);flex-shrink:0}
.journal-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--surface-gold);border-radius:50%;font:italic 25px Georgia;color:var(--surface-ink)}
.detail-chrome>span:nth-child(2){font:8px/1.6 Arial;letter-spacing:1.7px;color:var(--surface-soft)}.detail-chrome small{display:block;font-size:7px;letter-spacing:2.7px;margin-top:2px;color:var(--surface-gold)}
#close-details{position:static;margin-left:auto;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--surface-line);border-radius:50%;font:22px/1 Arial;background:transparent;color:var(--surface-ink);transition:background .2s,rotate .3s}#close-details:hover{background:var(--surface-card);rotate:90deg}
#detail-scroll{overflow:auto;min-height:0;padding:30px 28px 20px;scrollbar-width:thin;scrollbar-color:#91a08a55 transparent;overscroll-behavior:contain}
#detail-scroll:focus-visible{outline:2px solid var(--surface-gold);outline-offset:-4px}
.detail-intro .eyebrow{display:block;font:8px/1.5 Arial;letter-spacing:2px;color:var(--surface-gold)}#details h2{font:30px/1.45 Georgia,'Microsoft JhengHei',serif;letter-spacing:-.5px;margin:13px 0 10px;text-wrap:balance}#detail-summary{font-size:12px;line-height:1.9;letter-spacing:.3px;color:var(--surface-soft);margin:0}
.journal-rule{display:flex;gap:10px;align-items:center;margin:25px 0;font:7px Arial;letter-spacing:1.6px;color:var(--surface-gold)}.journal-rule:after{content:'';height:1px;background:var(--surface-line);flex:1}.journal-rule i{width:5px;height:5px;border:1px solid var(--surface-gold);rotate:45deg}
#detail-body{font-size:13px;line-height:2;color:var(--surface-soft);counter-reset:chapter}#detail-body>p{margin:0 0 15px}#detail-body>p:first-child{color:var(--surface-ink);font-size:16px;line-height:1.9}
#detail-body article{position:relative;padding:21px 22px;margin:14px 0;border:1px solid var(--surface-line);border-radius:14px;background:var(--surface-card);counter-increment:chapter;transition:translate .25s,border-color .25s,box-shadow .25s}#detail-body article:hover{translate:0 -2px;border-color:#8e9e7d75;box-shadow:0 8px 20px #11271b08}#detail-body article:before{content:'0' counter(chapter);position:absolute;right:17px;top:17px;font:italic 24px Georgia;color:var(--surface-gold);opacity:.24;pointer-events:none}
#detail-body .meta{display:block;font:8px/1.6 Arial;letter-spacing:1px;color:var(--surface-gold);padding-right:22px}#detail-body h3{font-size:15px;line-height:1.7;margin:9px 0;color:var(--surface-ink);padding-right:8px}#detail-body p{margin:8px 0;font-size:12px;line-height:1.95}#detail-body a{font-size:11px;padding:4px 0;border-bottom-color:var(--surface-gold);transition:color .2s}#detail-body a:hover{color:var(--surface-ink)}#detail-body img{height:160px;border:1px solid var(--surface-line);border-radius:8px;margin:10px 0;object-fit:cover}
.detail-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 25px;border-top:1px solid var(--surface-line);background:var(--surface);flex-shrink:0}.detail-footer>span{font:7px Arial;letter-spacing:1.6px;color:var(--surface-gold)}.detail-footer small{display:block;font-size:10px;letter-spacing:.3px;margin-top:7px;color:var(--surface-soft)}#back-room{display:flex;gap:19px;align-items:center;margin:0;padding:12px 17px;border:1px solid #ffffff18;border-radius:11px;font-size:11px;background:#345345;color:#fbf6e5;box-shadow:0 4px 10px #1c342018;transition:translate .2s,background .2s}#back-room:hover{translate:0 -2px;background:#426651}#back-room span{font-size:16px}
#interact.character-speech{border-radius:19px 19px 19px 6px;border-color:var(--surface-line);background:var(--surface);box-shadow:0 12px 35px #233b2525,0 1px 2px #fff5;color:var(--surface-ink);padding:19px 21px 15px;animation:none}#interact.character-speech::after{background:var(--surface);border-color:var(--surface-line)}.speech-speaker{color:var(--surface-gold);letter-spacing:1.5px}.speech-description{color:var(--surface-soft)}.speech-title{font-size:17px;letter-spacing:.4px}.speech-footer{border-color:var(--surface-line);color:var(--surface-soft)}#interact.character-speech:hover{background:var(--surface);border-color:#8ba285}
#cinema-controls{bottom:30px;max-width:min(760px,calc(100vw - 40px));padding:18px 22px;gap:20px;background:#263f37f5;color:#fcf7e6;border:1px solid #c6d1b838;border-radius:18px;box-shadow:var(--surface-shadow)}#cinema-controls strong{font:18px Georgia,'Microsoft JhengHei',serif}#cinema-controls span{color:#bdcbbd;font-size:10px;line-height:1.85}#cinema-controls button{background:#e7ead7;color:#314b3e;border-radius:9px;font-size:11px;transition:background .2s}#cinema-controls button:hover{background:#fff9e7}#cinema-controls a{font-size:10px;color:#ced8bd}
[data-closing=true]{pointer-events:none}#loading{background:var(--surface);color:var(--surface-ink);border:1px solid var(--surface-line);border-radius:20px;padding:23px 30px;box-shadow:var(--surface-shadow)}#loading i{animation:loading-breathe 1.2s ease-in-out infinite}@keyframes loading-breathe{50%{box-shadow:0 0 0 6px #718f7815;opacity:.5}}
body[data-theme=night] #details{background:var(--surface);border-color:var(--surface-line)}body[data-theme=night] #detail-body{color:var(--surface-soft)}body[data-theme=night] #interact.character-speech{background:var(--surface);color:var(--surface-ink)}
body[data-theme=night] #interact.character-speech::after{background:var(--surface);border-color:var(--surface-line)}
@media(max-width:700px){#details{inset:auto 8px 8px;width:calc(100% - 16px);max-width:none;max-height:78dvh;margin:0;border-radius:23px}.detail-chrome{padding:15px 20px}.journal-mark{width:32px;height:32px;font-size:22px}#detail-scroll{padding:22px 22px 16px}#details h2{font-size:25px}.detail-footer{padding:15px 20px}#detail-body article{padding:18px}#cinema-controls{width:calc(100vw - 24px);max-width:none;bottom:16px;gap:12px;padding:15px}#cinema-controls strong{font-size:15px}#interact.character-speech{padding:15px 17px 12px}.speech-title{font-size:15px}}
@media(prefers-reduced-motion:reduce){#detail-body article,#back-room,#close-details{transition:none}#loading i{animation:none}}