:root{--book-bg: #f5f1e8;--page-bg: #fefdfb;--text-color: #2d2d2d;--shadow-color: rgba(0, 0, 0, .3);--spine-color: #d4cbb8;--sidebar-bg: rgba(255, 255, 255, .95);--sidebar-hover: #f0f0f0;--accent-color: #4a90e2}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#204497,#1a6fb8,#2980b9);overflow-x:hidden}.story-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;perspective:2500px}.story-card{position:relative;display:flex;width:90vw;max-width:1200px;height:70vh;min-height:500px;max-height:700px;box-shadow:0 30px 60px #0006,0 10px 20px #0000004d;border-radius:8px;overflow:visible;animation:bookOpen 1s ease-out}@keyframes bookOpen{0%{transform:rotateY(-20deg) scale(.9);opacity:0}to{transform:rotateY(0) scale(1);opacity:1}}.image-container{position:relative;flex:1;background:var(--page-bg);border-radius:8px 0 0 8px;overflow:hidden;box-shadow:inset -5px 0 10px #0000001a,5px 0 15px #0003;transform-style:preserve-3d;transform-origin:right center;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4.8' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.06'/%3E%3C/svg%3E"),repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.015) 1px,rgba(0,0,0,.015) 2px),repeating-linear-gradient(90deg,transparent,transparent 1px,rgba(0,0,0,.015) 1px,rgba(0,0,0,.015) 2px),radial-gradient(circle at 30% 40%,rgba(255,250,240,.2),transparent 70%);background-color:#fefdfb;background-blend-mode:multiply}.story-image{width:100%;height:100%;object-fit:cover;object-position:left}.book-spine{width:40px;background:linear-gradient(to right,#00000026,#0000000d 20%,#ffffff1a,#0000000d 80%,#00000026);background-color:var(--spine-color);box-shadow:inset 2px 0 4px #0003,inset -2px 0 4px #0003;position:relative;z-index:5}.content-container{flex:1;background:var(--page-bg);border-radius:0 8px 8px 0;padding:40px;display:flex;flex-direction:column;position:relative;box-shadow:inset 5px 0 10px #0000001a,-5px 0 15px #0003;overflow:hidden;transform-style:preserve-3d;transform-origin:left center;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4.8' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.06'/%3E%3C/svg%3E"),repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.015) 1px,rgba(0,0,0,.015) 2px),repeating-linear-gradient(90deg,transparent,transparent 1px,rgba(0,0,0,.015) 1px,rgba(0,0,0,.015) 2px),radial-gradient(circle at 70% 40%,rgba(255,250,240,.2),transparent 70%);background-color:#fefdfb;background-blend-mode:multiply}.controls-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgba(0,0,0,.1)}.control-btn{padding:8px;border-radius:50%;border:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;background-color:#f3f4f6;color:#4b5563}.control-btn:hover{background-color:#e5e7eb;transform:scale(1.1)}.control-btn:first-child{background-color:var(--accent-color);color:#fff}.control-btn:first-child:hover{background-color:#3a7bc8}.text-scroll-container{flex:1;overflow-y:auto;overflow-x:hidden;padding-right:16px;margin-bottom:20px}.text-scroll-container::-webkit-scrollbar{width:6px}.text-scroll-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px}.text-scroll-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px}.text-scroll-container::-webkit-scrollbar-thumb:hover{background:#0000004d}.story-text{font-size:18px;line-height:1.8;color:var(--text-color);font-family:Georgia,serif;text-align:justify}.scroll-indicator{position:absolute;bottom:80px;left:50%;transform:translate(-50%);color:#0000004d;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(10px)}}.page-number{position:absolute;bottom:24px;right:40px;font-size:14px;color:#999;font-weight:500}.nav-button{position:absolute;top:50%;transform:translateY(-50%);padding:16px;border-radius:50%;background-color:#ffffffe6;border:none;cursor:pointer;box-shadow:0 4px 12px #0003;transition:all .3s;color:var(--accent-color);display:flex;align-items:center;justify-content:center;z-index:100}.nav-button:hover:not(:disabled){background-color:#fff;transform:translateY(-50%) scale(1.15);box-shadow:0 6px 16px #0000004d}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button.prev{left:-70px}.nav-button.next{right:-70px}.page-turning-left{animation:pageFlipLeft .9s cubic-bezier(.645,.045,.355,1);z-index:10}.page-turning-right{animation:pageFlipRight .9s cubic-bezier(.645,.045,.355,1);z-index:10}@keyframes pageFlipLeft{0%{transform:rotateY(0);filter:brightness(1)}25%{filter:brightness(.85)}50%{transform:rotateY(-90deg);filter:brightness(.7)}75%{filter:brightness(.85)}to{transform:rotateY(-180deg);filter:brightness(1)}}@keyframes pageFlipRight{0%{transform:rotateY(0);filter:brightness(1)}25%{filter:brightness(.85)}50%{transform:rotateY(90deg);filter:brightness(.7)}75%{filter:brightness(.85)}to{transform:rotateY(180deg);filter:brightness(1)}}@media(max-width:1024px){.story-card{flex-direction:column;height:auto;max-height:none}.image-container{border-radius:8px 8px 0 0;height:300px}.book-spine{display:none}.content-container{border-radius:0 0 8px 8px;min-height:400px}.nav-button.prev{left:10px}.nav-button.next{right:10px}}.index-toggle-btn{position:fixed;top:20px;left:20px;z-index:1000;padding:12px;border-radius:50%;background:#fffffff2;border:none;cursor:pointer;box-shadow:0 4px 12px #0003;color:var(--accent-color);transition:all .3s ease;display:flex;align-items:center;justify-content:center}.index-toggle-btn:hover{background:#fff;transform:scale(1.1);box-shadow:0 6px 16px #0000004d}.sidebar-index{position:fixed;top:0;left:-350px;width:350px;height:100vh;background:linear-gradient(135deg,#fffffffa,#f5f5fafa);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:4px 0 20px #00000026;z-index:999;transition:left .4s cubic-bezier(.4,0,.2,1);overflow:hidden;display:flex;flex-direction:column}.sidebar-index.show{left:0}.sidebar-header{display:flex;justify-content:flex-end;align-items:center;padding:24px 20px;border-bottom:2px solid rgba(74,144,226,.2);background:linear-gradient(135deg,var(--accent-color),#5ba3f5);color:#fff}.sidebar-header h2{margin:0}.sidebar-content{flex:1;overflow-y:auto;padding:16px}.sidebar-content::-webkit-scrollbar{width:8px}.sidebar-content::-webkit-scrollbar-track{background:#0000000d}.sidebar-content::-webkit-scrollbar-thumb{background:var(--accent-color);border-radius:4px}.sidebar-content::-webkit-scrollbar-thumb:hover{background:#3a7bc8}.index-item{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:12px;background:#fff;border-radius:12px;cursor:pointer;transition:all .3s ease;border:2px solid transparent;box-shadow:0 2px 8px #00000014}.index-item:hover{transform:translate(8px);box-shadow:0 4px 16px #4a90e233;border-color:var(--accent-color)}.index-item.active{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-color:var(--accent-color);box-shadow:0 4px 16px #4a90e24d}.index-number{min-width:36px;height:36px;background:var(--accent-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0}.index-item.active .index-number{background:linear-gradient(135deg,#2980b9,#1a6fb8);box-shadow:0 2px 8px #2980b966}.index-preview{width:60px;height:60px;border-radius:8px;overflow:hidden;flex-shrink:0;box-shadow:0 2px 6px #0000001a}.index-preview img{width:100%;height:100%;object-fit:cover}.index-text{flex:1;font-size:13px;line-height:1.4;color:#555;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical}.index-item.active .index-text{color:#1a6fb8;font-weight:500}@media(max-width:768px){.sidebar-index{width:100%;left:-100%}.index-toggle-btn{top:12px;left:12px}}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn.muted{background-color:#ef4444;color:#fff}.control-btn.muted:hover{background-color:#dc2626}