*,*:before,*:after{margin:0;padding:0}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#2c3e50;background-color:#fcfbf4;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{margin:0;padding:0;overflow-x:hidden;width:100%}body{margin:0!important;padding:0!important;min-width:320px;min-height:100vh;overflow-x:hidden;width:100%}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#eae8dc;color:#2c3e50;cursor:pointer;transition:border-color .25s}:root{--paper: #f5ecd6;--paper-hi: #fbf4e2;--paper-lo: #ecdcbb;--ink: #3b2c1b;--ink-soft: #6d5a40;--narr: #5b4733;--kastor: #7c4720;--frippe: #e27d16;--gold: #b07d34;--rule: rgba(150, 110, 60, .3);--bg-0: #2b2013;--bg-1: #150f08;--font-display: "Yeseva One", Georgia, "Times New Roman", serif;--font-body: "Lora", Georgia, "Times New Roman", serif;--font-hand: "Caveat", "Lora", cursive;--radius: 22px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}#root{width:100%;min-height:100vh;font-family:var(--font-body);color:var(--ink);background:radial-gradient(120% 90% at 50% 12%,#34271700 38%,#1c140bcc),radial-gradient(80% 70% at 50% 30%,#3a2b18 0%,#241a0f 55%,var(--bg-1) 100%);overflow-x:hidden}#root:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.App{position:relative;z-index:1;width:100%;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden}.header-panel{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:12px clamp(14px,4vw,40px) 10px;z-index:40}.header-panel:after{content:"";position:absolute;left:clamp(14px,4vw,40px);right:clamp(14px,4vw,40px);top:46px;height:1px;background:linear-gradient(90deg,transparent,var(--rule),transparent);pointer-events:none}.chapter-title{flex:1;font-family:var(--font-display);font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;color:#e7d3a8;text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.runhead{flex:1;display:flex;align-items:baseline;gap:.55em;min-width:0;white-space:nowrap;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.5)}.runhead-book{flex:0 1 auto;font-family:var(--font-body);font-style:italic;font-size:.85rem;letter-spacing:.02em;color:#b29a6e;overflow:hidden;text-overflow:ellipsis}.runhead-sep{flex:0 0 auto;font-size:.46rem;color:var(--gold);transform:translateY(-.18em);opacity:.85}.runhead-chapter{flex:0 1 auto;font-family:var(--font-display);font-size:.88rem;letter-spacing:.13em;text-transform:uppercase;color:#ecd9ad;overflow:hidden;text-overflow:ellipsis}.chapter-dots{display:flex;gap:6px;align-items:center}.dot{width:7px;height:7px;border-radius:50%;background:#e7d3a847;transition:all .35s ease}.dot-active{background:var(--frippe);transform:scale(1.45);box-shadow:0 0 8px #cf7a26b3}.spread{flex:0 1 auto;margin:auto;width:min(2200px,100% - 168px);max-height:92vh;display:flex;align-items:stretch;background:linear-gradient(105deg,var(--paper-hi),var(--paper) 46%,var(--paper-lo));border-radius:var(--radius);box-shadow:0 1px #ffffff59 inset,0 -30px 60px -40px #3c281480 inset,0 34px 80px -24px #000000a6,0 6px 18px #00000059;overflow:hidden;animation:bookIn .7s cubic-bezier(.22,.61,.36,1) both}@keyframes bookIn{0%{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}.image-area{flex:1.78 1 0;min-width:0;display:flex;align-items:center;justify-content:center;padding:clamp(12px,1.2vw,20px);border-right:1px solid var(--rule);transition:opacity .25s ease}.image-mat{max-width:100%;max-height:100%;padding:8px;border-radius:14px;background:linear-gradient(158deg,#fdf7e8,#efdfbe);box-shadow:0 0 0 1px #966e3c42,0 1px #fff9 inset,9px 16px 38px -12px #28180685,0 3px 8px #28180633;transition:transform .25s ease,opacity .25s ease}.image-mat img{display:block;width:100%;height:auto;max-height:calc(92vh - 44px);object-fit:contain;border-radius:8px}.text-area{flex:1 1 0;min-width:0;max-width:600px;display:flex;flex-direction:column;justify-content:center;padding:clamp(30px,4.5vh,62px) clamp(24px,3vw,46px);overflow-y:auto;box-shadow:inset 16px 0 28px -18px #462e1459;transition:opacity .25s ease}.text-content{width:100%;max-width:35ch;margin:0 auto}p.line{font-size:clamp(1.12rem,.62rem + .78vw,1.32rem);line-height:1.76;margin:0 0 .95rem;text-wrap:pretty;overflow-wrap:break-word}p.line:last-child{margin-bottom:0}.line.narr{font-style:italic;color:var(--narr)}.line.sfx{font-family:var(--font-hand);font-weight:700;font-style:normal;font-size:clamp(2.4rem,1rem + 3.8vw,3.6rem);line-height:.95;letter-spacing:.015em;color:var(--frippe);transform:rotate(-3.5deg);transform-origin:left center;margin:.15em 0 .7rem;text-shadow:0 2px 0 rgba(255,255,255,.45),0 5px 14px rgba(207,110,20,.22)}.text-content>p.narr:first-of-type{font-size:clamp(1.1rem,.6rem + .8vw,1.34rem);color:#4b3a26}.line.dialog{color:var(--ink);padding-left:.1rem}.sp-kastor,.sp-frippe{font-family:var(--font-hand);font-weight:700;font-size:1.5em;line-height:1;margin-right:.32em;letter-spacing:.01em}.sp-kastor{color:var(--kastor)}.sp-frippe{color:var(--frippe)}.text-area::-webkit-scrollbar{width:5px}.text-area::-webkit-scrollbar-track{background:transparent}.text-area::-webkit-scrollbar-thumb{background:#966e3c4d;border-radius:3px}.frame-visible{opacity:1}.frame-hidden{opacity:0}.image-area.frame-hidden .image-mat{transform:scale(.985)}.nav-button{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border:1px solid rgba(214,180,120,.34);border-radius:50%;background:#261b0f6b;color:#f1e2c0;cursor:pointer;z-index:100;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:0 8px 22px #0006;transition:transform .2s ease,background .2s ease,box-shadow .2s ease,opacity .2s ease}.nav-button:hover:not(:disabled){background:#b07d34e6;transform:translateY(-50%) scale(1.08);box-shadow:0 12px 28px #00000080}.nav-button:active:not(:disabled){transform:translateY(-50%) scale(.97)}.nav-button:disabled{opacity:0;pointer-events:none}.nav-button.hint{animation:hint-pulse 2.2s ease-in-out 3}@keyframes hint-pulse{0%,to{box-shadow:0 8px 22px #0006}50%{box-shadow:0 0 0 6px #cf7a2647,0 8px 22px #0006}}.prev{left:clamp(14px,1.6vw,30px)}.next{right:clamp(14px,1.6vw,30px)}.footer-nav{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid rgba(214,180,120,.26);border-radius:50%;background:#261b0f57;color:#ecd6a9;cursor:pointer;transition:background .2s,transform .15s,opacity .2s}.footer-nav:active:not(:disabled){transform:scale(.94)}.footer-nav:disabled{opacity:.28}.menu-btn{width:38px;height:38px;background:#261b0f66;border:1px solid rgba(214,180,120,.28);border-radius:11px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;flex-shrink:0;transition:background .2s,transform .2s}.menu-btn:hover{background:#b07d348c;transform:translateY(-1px)}.menu-btn span{display:block;width:16px;height:2px;background:#ecd6a9;border-radius:1px}.chapter-menu{position:fixed;inset:0;background:#140e088c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:500;display:flex;align-items:flex-start;justify-content:flex-start;animation:fadeIn .2s ease both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.chapter-menu-inner{background:linear-gradient(160deg,var(--paper-hi),var(--paper-lo));border-radius:0 18px 18px 0;padding:16px 0;margin-top:56px;max-height:76vh;overflow-y:auto;min-width:280px;box-shadow:8px 0 40px #00000073;animation:slideIn .32s cubic-bezier(.22,.61,.36,1) both}@keyframes slideIn{0%{transform:translate(-18px);opacity:0}to{transform:none;opacity:1}}.chapter-menu-item{display:block;width:100%;text-align:left;padding:11px 26px;border:none;background:none;font-family:var(--font-body);font-size:1.02rem;color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s,padding-left .15s}.chapter-menu-item:hover{background:#b07d3429;color:var(--ink);padding-left:30px}.chapter-menu-item.current{font-family:var(--font-display);font-size:.96rem;color:var(--kastor);background:#b07d341f}.footer-spacer{flex:0 0 14px}.footer-panel{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 16px 16px;z-index:40}.footer-menu-btn{display:none}.frame-counter{font-family:var(--font-body);font-size:.86rem;letter-spacing:.18em;color:#d8c298;font-variant-numeric:tabular-nums;padding:6px 16px;border:1px solid rgba(214,180,120,.26);border-radius:999px;background:#261b0f52}@media(max-width:860px){.App{min-height:100dvh;height:auto;overflow:visible}.header-panel{padding:10px 16px 9px}.header-panel:after{top:42px;left:16px;right:16px}.chapter-title{font-size:.78rem;letter-spacing:.12em}.runhead-book,.runhead-sep{display:none}.runhead-chapter{font-size:.82rem;letter-spacing:.11em}.spread{flex:1 1 auto;flex-direction:column;width:calc(100% - 20px);max-height:none;margin:6px auto 4px;border-radius:18px}.image-area{flex:0 0 auto;border-right:none;border-bottom:1px solid var(--rule);padding:14px 14px 12px}.image-mat{padding:6px;border-radius:12px}.image-mat img{max-height:49vh;border-radius:8px}.text-area{flex:1 1 auto;max-width:none;justify-content:flex-start;padding:22px 22px 26px;box-shadow:inset 0 16px 24px -18px #462e1466;overflow:visible}.text-content{max-width:100%}p.line{line-height:1.66;margin-bottom:.7rem}.line.sfx{font-size:clamp(2.3rem,1rem + 7vw,3rem);margin:.05em 0 .5rem}.nav-button{display:none!important}.footer-panel{padding:10px 14px 14px;gap:14px}.footer-menu-btn,.footer-nav{display:flex}.frame-counter{font-size:.8rem;padding:6px 14px;min-width:78px;text-align:center}*{scrollbar-width:none!important;-ms-overflow-style:none!important}*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}}@media(max-width:420px){.image-mat img{max-height:43vh}}