:root{--bg-dark: #0a0a0a;--bg-panel: #111;--text-primary: #e0e0e0;--text-narrator: #c8b88a;--text-dim: #666;--border-panel: #333;--epoch-primary: #c8b88a;--epoch-secondary: #666;--epoch-accent: #8b0000;--epoch-bg: #0a0a0a;--epoch-glow: rgba(200, 184, 138, .3);--font-narrator: "Crimson Text", Georgia, serif;--font-dialog: "Caveat", cursive;--font-cosmic: "Share Tech Mono", monospace;--font-ui: "Special Elite", cursive;--panel-gap: 1rem;--page-max-width: 900px;--section-padding: 4rem 1.5rem}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--epoch-primary) var(--bg-dark)}body{background:var(--bg-dark);color:var(--text-primary);font-family:var(--font-narrator);font-size:18px;line-height:1.7;overflow-x:hidden}#loader{position:fixed;inset:0;z-index:9999;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .8s ease-out}#loader.hidden{opacity:0;pointer-events:none}.loader-dot{width:8px;height:8px;background:#fff;border-radius:50%;animation:loader-pulse 2s ease-in-out infinite}.loader-text{margin-top:2rem;font-family:var(--font-ui);font-size:1.5rem;letter-spacing:.5em;color:#444;animation:loader-fade 2s ease-in-out infinite}@keyframes loader-pulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(2);opacity:1}}@keyframes loader-fade{0%,to{opacity:.3}50%{opacity:.7}}#progress-bar{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--epoch-primary);z-index:1000;transition:background-color .5s ease}#chapter-nav{position:fixed;right:1rem;top:50%;transform:translateY(-50%);z-index:100}.nav-toggle{display:none;background:#000000b3;border:1px solid #333;color:#888;padding:.5rem;cursor:pointer;font-size:1.2rem;border-radius:4px}.nav-list{list-style:none;display:flex;flex-direction:column;gap:.3rem}.nav-list a{display:block;width:2rem;height:2rem;line-height:2rem;text-align:center;font-family:var(--font-ui);font-size:.7rem;color:#555;text-decoration:none;border-radius:50%;border:1px solid transparent;transition:all .3s ease}.nav-list a:hover{color:var(--epoch-primary);border-color:var(--epoch-primary)}.nav-list a.active{color:var(--epoch-primary);border-color:var(--epoch-primary);background:#c8b88a1a}#effects-canvas{position:fixed;inset:0;z-index:50;pointer-events:none}#app{position:relative;z-index:1}.chapter{min-height:100vh;padding:var(--section-padding);position:relative;transition:background-color .8s ease}.chapter-header{max-width:var(--page-max-width);margin:0 auto 4rem;text-align:center;opacity:0;transform:translateY(2rem);transition:opacity .8s ease,transform .8s ease}.chapter-header.visible{opacity:1;transform:translateY(0)}.chapter-number{font-family:var(--font-ui);font-size:.9rem;letter-spacing:.3em;color:var(--epoch-primary);text-transform:uppercase;margin-bottom:.5rem}.chapter-title{font-family:var(--font-narrator);font-size:2.5rem;font-weight:600;color:var(--text-primary);font-style:italic;margin-bottom:.5rem}.chapter-subtitle{font-family:var(--font-ui);font-size:.8rem;color:var(--text-dim);letter-spacing:.1em}.comic-page{max-width:var(--page-max-width);margin:0 auto 4rem}.page-title{font-family:var(--font-ui);font-size:.75rem;color:var(--text-dim);letter-spacing:.1em;margin-bottom:1rem;text-align:center;opacity:0;transition:opacity .5s ease}.page-title.visible{opacity:1}.panel-grid{display:grid;gap:var(--panel-gap);margin-bottom:2rem}.grid-1x1{grid-template-columns:1fr}.grid-2x1{grid-template-columns:1fr 1fr}.grid-3x1{grid-template-columns:1fr 1fr 1fr}.grid-2x2{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.panel{position:relative;background:var(--bg-panel);border:1px solid var(--border-panel);border-radius:2px;overflow:hidden;opacity:0;transform:translateY(1.5rem);transition:opacity .6s ease,transform .6s ease}.panel.visible{opacity:1;transform:translateY(0)}.panel-small{min-height:200px}.panel-medium{min-height:300px}.panel-large{min-height:400px}.panel-splash{min-height:500px;grid-column:1 / -1}.panel-full-splash{min-height:90vh;grid-column:1 / -1}.panel-image{width:100%;height:100%;min-height:inherit;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.panel-image img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.panel-placeholder{width:100%;height:100%;min-height:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;position:relative}.panel-placeholder .placeholder-icon{font-size:2rem;margin-bottom:1rem;opacity:.3}.panel-placeholder .placeholder-desc{font-family:var(--font-ui);font-size:.7rem;color:var(--text-dim);max-width:80%;line-height:1.5}.panel-text{position:absolute;bottom:0;left:0;right:0;padding:1.5rem;background:linear-gradient(transparent,#000000d9);z-index:10}.narrator-text{font-family:var(--font-narrator);font-style:italic;font-size:1rem;color:var(--text-narrator);line-height:1.6}.dialog-text{font-family:var(--font-dialog);font-size:1.2rem;color:var(--text-primary);line-height:1.4}.dialog-speaker{font-family:var(--font-ui);font-size:.7rem;color:var(--epoch-primary);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem}.cosmic-text{font-family:var(--font-cosmic);font-size:1rem;color:#c8b88a;text-shadow:0 0 10px rgba(200,184,138,.5)}.typewriter{overflow:hidden;border-right:2px solid var(--epoch-primary);white-space:normal;animation:blink-caret .75s step-end infinite}.typewriter.done{border-right-color:transparent;animation:none}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:var(--epoch-primary)}}.chapter-divider{max-width:var(--page-max-width);margin:4rem auto;text-align:center;opacity:0;transition:opacity 1s ease}.chapter-divider.visible{opacity:1}.chapter-divider:before{content:"";display:block;width:60%;height:1px;background:linear-gradient(to right,transparent,var(--epoch-primary),transparent);margin:0 auto 2rem}.hotspot{position:absolute;width:2rem;height:2rem;border-radius:50%;border:1px solid rgba(200,184,138,.5);background:#c8b88a1a;cursor:pointer;animation:hotspot-pulse 2s ease-in-out infinite;z-index:20}.hotspot:hover{background:#c8b88a4d}@keyframes hotspot-pulse{0%,to{box-shadow:0 0 #c8b88a66}50%{box-shadow:0 0 0 8px #c8b88a00}}.hotspot-tooltip{position:absolute;background:#000000e6;border:1px solid var(--epoch-primary);color:var(--text-primary);padding:.8rem 1rem;border-radius:4px;font-size:.85rem;max-width:250px;z-index:30;opacity:0;pointer-events:none;transition:opacity .3s ease}.hotspot-tooltip.show{opacity:1}.chat-container{max-width:600px;margin:0 auto;background:#0d0d0d;border:1px solid #222;border-radius:8px;overflow:hidden}.chat-header{background:#1a1a1a;padding:.8rem 1rem;border-bottom:1px solid #222;font-family:var(--font-cosmic);font-size:.8rem;color:#666;display:flex;align-items:center;gap:.5rem}.chat-header .forum-name{color:#8b0000}.chat-messages{padding:1rem;max-height:400px;overflow-y:auto}.chat-message{margin-bottom:1rem;opacity:0;transform:translateY(.5rem);transition:opacity .3s ease,transform .3s ease}.chat-message.visible{opacity:1;transform:translateY(0)}.chat-username{font-family:var(--font-cosmic);font-size:.75rem;margin-bottom:.2rem}.chat-username.user-lefuet{color:#4a9eff}.chat-username.user-satan{color:#8b0000}.chat-bubble{background:#1a1a1a;padding:.6rem 1rem;border-radius:0 8px 8px;font-size:.9rem;line-height:1.5;display:inline-block;max-width:85%}.chat-bubble.satan{background:#1a0808;border-left:2px solid #8b0000}.chat-typing{display:inline-flex;gap:4px;padding:.6rem 1rem}.chat-typing span{width:6px;height:6px;background:#444;border-radius:50%;animation:typing-dot 1.4s ease-in-out infinite}.chat-typing span:nth-child(2){animation-delay:.2s}.chat-typing span:nth-child(3){animation-delay:.4s}@keyframes typing-dot{0%,60%,to{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}@media(max-width:768px){:root{--section-padding: 2rem 1rem;--panel-gap: .5rem}body{font-size:16px}.chapter-title{font-size:1.8rem}.grid-2x1,.grid-3x1{grid-template-columns:1fr}.panel-large{min-height:280px}.panel-splash{min-height:350px}.panel-full-splash{min-height:60vh}#chapter-nav{right:.5rem}.nav-list a{width:1.5rem;height:1.5rem;line-height:1.5rem;font-size:.6rem}}@media(max-width:480px){.grid-2x2{grid-template-columns:1fr}.panel-medium{min-height:220px}}.epoch-prolog{--epoch-primary: #fff;--epoch-secondary: #555;--epoch-accent: #c8b88a;--epoch-bg: #000;--epoch-glow: rgba(255, 255, 255, .1);background:#000}.epoch-prolog .panel{background:#000;border-color:#222}.epoch-prolog .narrator-text{color:#aaa;text-shadow:0 0 20px rgba(255,255,255,.1)}.epoch-noir{--epoch-primary: #7a7a7a;--epoch-secondary: #3a3a2a;--epoch-accent: #8b0000;--epoch-bg: #0a0a0a;--epoch-glow: rgba(139, 0, 0, .2);background:linear-gradient(180deg,#0a0a0a,#0d0d0d)}.epoch-noir .panel{background:#0e0e0e;border-color:#2a2a2a;box-shadow:inset 0 0 30px #00000080}.epoch-noir .narrator-text{color:#8a8a7a}.epoch-noir .chapter-title{color:#888}.epoch-horror{--epoch-primary: #5a7a5a;--epoch-secondary: #3a2a1a;--epoch-accent: #8b0000;--epoch-bg: #080a08;--epoch-glow: rgba(90, 122, 90, .2);background:linear-gradient(180deg,#080a08,#0a0808)}.epoch-horror .panel{background:#0a0a08;border-color:#2a2a20}.epoch-titanic{--epoch-primary: #c8a855;--epoch-secondary: #2a1a0a;--epoch-accent: #1a3a5a;--epoch-bg: #0a0805;--epoch-glow: rgba(200, 168, 85, .2);background:linear-gradient(180deg,#0a0805,#050a12)}.epoch-titanic .panel{background:#0d0b08;border-color:#3a2a1a}.epoch-titanic .narrator-text,.epoch-titanic .chapter-title{color:#c8a855}.epoch-dystopia{--epoch-primary: #00d4ff;--epoch-secondary: #1a1a2a;--epoch-accent: #ff0040;--epoch-bg: #0a0a12;--epoch-glow: rgba(0, 212, 255, .15);background:linear-gradient(180deg,#0a0a12,#0d0d1a)}.epoch-dystopia .panel{background:#0c0c14;border-color:#1a1a2a;box-shadow:0 0 15px #00d4ff0d}.epoch-dystopia .narrator-text{color:#8cd;font-family:var(--font-cosmic)}.epoch-dystopia .chapter-title{color:#00d4ff;text-shadow:0 0 20px rgba(0,212,255,.3)}.epoch-childhood{--epoch-primary: #e8b84a;--epoch-secondary: #5a3a1a;--epoch-accent: #d45a2a;--epoch-bg: #12100a;--epoch-glow: rgba(232, 184, 74, .2);background:linear-gradient(180deg,#12100a,#1a150d)}.epoch-childhood .panel{background:#14120c;border-color:#3a3020;border-radius:6px}.epoch-childhood .narrator-text{color:#d4b070}.epoch-childhood .chapter-title{color:#e8b84a}.epoch-clinical{--epoch-primary: #aabbcc;--epoch-secondary: #1a1a22;--epoch-accent: #44aadd;--epoch-bg: #0a0a0e;--epoch-glow: rgba(170, 187, 204, .1);background:linear-gradient(180deg,#0a0a0e,#0e0e12)}.epoch-clinical .panel{background:#0d0d10;border-color:#222228}.epoch-clinical .narrator-text{color:#9ab}.epoch-luxury{--epoch-primary: #c8a855;--epoch-secondary: #1a0a0a;--epoch-accent: #8b0020;--epoch-bg: #0a0808;--epoch-glow: rgba(200, 168, 85, .15);background:linear-gradient(180deg,#0a0808,#0d0a08)}.epoch-luxury .panel{background:#0d0a08;border-color:#2a2010;box-shadow:inset 0 0 20px #c8a85508}.epoch-luxury .narrator-text,.epoch-luxury .chapter-title{color:#c8a855}.epoch-cosmic{--epoch-primary: #c8b88a;--epoch-secondary: #1a1a1a;--epoch-accent: #8b2020;--epoch-bg: #000;--epoch-glow: rgba(200, 184, 138, .2);background:#000}.epoch-cosmic .panel{background:#050505;border-color:#1a1a1a}.epoch-cosmic .narrator-text{font-family:var(--font-cosmic);color:#c8b88a;text-shadow:0 0 15px rgba(200,184,138,.3)}.epoch-cosmic .dialog-text{color:#c8b88a;font-family:var(--font-cosmic)}.epoch-cosmic .chapter-title{color:#c8b88a;text-shadow:0 0 30px rgba(200,184,138,.2)}.epoch-postapoc{--epoch-primary: #9a7a5a;--epoch-secondary: #2a1a0a;--epoch-accent: #aa3a0a;--epoch-bg: #0a0908;--epoch-glow: rgba(154, 122, 90, .15);background:linear-gradient(180deg,#0a0908,#0d0b09)}.epoch-postapoc .panel{background:#0c0b09;border-color:#2a2218}.epoch-postapoc .narrator-text{color:#9a8a6a}.epoch-birth{--epoch-primary: #cc5533;--epoch-secondary: #3a0a0a;--epoch-accent: #ffcc88;--epoch-bg: #0d0505;--epoch-glow: rgba(204, 85, 51, .2);background:linear-gradient(180deg,#0d0505,#12080a)}.epoch-birth .panel{background:#100808;border-color:#2a1515}.epoch-birth .narrator-text{color:#c86}.epoch-birth .chapter-title{color:#c53}.epoch-scifi{--epoch-primary: #0088cc;--epoch-secondary: #0a0a1a;--epoch-accent: #00ffcc;--epoch-bg: #020208;--epoch-glow: rgba(0, 136, 204, .15);background:linear-gradient(180deg,#020208,#050510)}.epoch-scifi .panel{background:#040410;border-color:#0a0a2a;box-shadow:0 0 20px #0088cc0d}.epoch-scifi .narrator-text{font-family:var(--font-cosmic);color:#49b}.epoch-scifi .dialog-text{font-family:var(--font-cosmic);color:#0ca}.epoch-scifi .chapter-title{color:#08c;font-family:var(--font-cosmic);text-shadow:0 0 20px rgba(0,136,204,.3)}.epoch-transition{position:relative;min-height:30vh;display:flex;align-items:center;justify-content:center}.epoch-transition:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,var(--epoch-glow),transparent 70%);opacity:0;transition:opacity 1s ease}.epoch-transition.visible:before{opacity:1}