:root{--bg-gradient-start: #e8e8e8;--bg-gradient-end: #d0d0d0;--card-bg: #ffffff;--section-bg: #f8f8f8;--item-bg: #ffffff;--text-primary: #2a2a2a;--text-secondary: #6b6b6b;--primary-color: #4a4a4a;--accent-gradient-start: #6a6a6a;--accent-gradient-end: #4a4a4a;--border-color: #d4d4d4;--shadow-color: rgba(0, 0, 0, .08);--shadow-hover: rgba(0, 0, 0, .12);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 4px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .12);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .15);--input-bg: #ffffff;--input-border: #d4d4d4;--input-focus: #5a5a5a;--overlay-lightest: rgba(0, 0, 0, .05);--overlay-lighter: rgba(0, 0, 0, .08);--overlay-light: rgba(0, 0, 0, .1);--overlay-medium: rgba(0, 0, 0, .2);--overlay-strong: rgba(0, 0, 0, .3);--overlay-heavy: rgba(0, 0, 0, .5);--overlay-intense: rgba(0, 0, 0, .7);--overlay-opaque: rgba(0, 0, 0, .9);--highlight-subtle: rgba(255, 255, 255, .05);--highlight-soft: rgba(255, 255, 255, .1);--highlight-medium: rgba(255, 255, 255, .2);--highlight-strong: rgba(255, 255, 255, .3);--radius-xs: .125rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 50%;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--danger-color: #e74c3c;--danger-hover: #c0392b;--success-color: #27ae60;--warning-color: #faa61a;--info-color: #3498db;--accent-blue: #0071eb;--accent-green: #43b581;--rarity-ur: #e91e8c;--rarity-ur-light: #ffb3d9;--rarity-ur-bg: linear-gradient(135deg, #fdeebb, #ffc8b2, #ffb7c5, #dcb5ff, #fdeebb);--rarity-ur-text: #4a0028;--rarity-ssr: #ffd54f;--rarity-ssr-text: #5d4037;--rarity-sr: #ba68c8;--rarity-sr-text: #ffffff;--rarity-r: #6495ed;--rarity-r-text: #ffffff;--rarity-n: #b0bec5;--rarity-n-text: #37474f;--primary-alpha-10: rgba(0, 113, 235, .1);--primary-alpha-15: rgba(0, 113, 235, .15);--primary-alpha-20: rgba(0, 113, 235, .2);--primary-alpha-30: rgba(0, 113, 235, .3);--island-stamina: #3498db;--island-points: #9b59b6;--island-success: #2ecc71;--surface-card: #ffffff;--surface-elevated: #f5f5f5;--surface-border: #e0e0e0;--text-on-surface: #4a4a4a}body.dark-mode{--bg-gradient-start: #1a1a1a;--bg-gradient-end: #0a0a0a;--card-bg: #2a2a2a;--section-bg: #1f1f1f;--item-bg: #2a2a2a;--text-primary: #e8e8e8;--text-secondary: #a8a8a8;--primary-color: #c0c0c0;--accent-gradient-start: #5a5a5a;--accent-gradient-end: #3a3a3a;--border-color: #3a3a3a;--shadow-color: rgba(0, 0, 0, .4);--shadow-hover: rgba(0, 0, 0, .6);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .5);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .6);--input-bg: #1f1f1f;--input-border: #3a3a3a;--input-focus: #6a6a6a;--danger-color: #e74c3c;--danger-hover: #c0392b;--success-color: #27ae60;--warning-color: #faa61a;--info-color: #3498db;--accent-blue: #7289da;--accent-green: #43b581;--rarity-ur: #e91e8c;--rarity-ur-light: #ffb3d9;--rarity-ur-bg: linear-gradient(135deg, #fdeebb, #ffc8b2, #ffb7c5, #dcb5ff, #fdeebb);--rarity-ur-text: #4a0028;--rarity-ssr: #ffd54f;--rarity-ssr-text: #5d4037;--rarity-sr: #ba68c8;--rarity-sr-text: #ffffff;--rarity-r: #6495ed;--rarity-r-text: #ffffff;--rarity-n: #b0bec5;--rarity-n-text: #37474f;--primary-alpha-10: rgba(114, 137, 218, .1);--primary-alpha-15: rgba(114, 137, 218, .15);--primary-alpha-20: rgba(114, 137, 218, .2);--primary-alpha-30: rgba(114, 137, 218, .3);--island-stamina: #3498db;--island-points: #9b59b6;--island-success: #2ecc71;--surface-card: #2f3136;--surface-elevated: #3d4148;--surface-border: #4f545c;--text-on-surface: #b9bbbe}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}:root{--bg-color: #f4f7fa;--text-color: #333333;--header-bg: rgba(255, 255, 255, .85);--card-bg: #ffffff;--dialogue-bg: rgba(255, 255, 255, .9);--border-color: #d1d9e6;--input-bg: #ffffff;--accent-color: #007bff;--subtitle-color: #555555;--shadow-color: rgba(44, 62, 80, .15)}body.dark-mode{--bg-color: #121212;--text-color: #e0e0e0;--header-bg: rgba(28, 28, 28, .9);--card-bg: rgba(30, 30, 30, .85);--dialogue-bg: rgba(28, 28, 28, .9);--border-color: #444444;--input-bg: #2a2a2a;--accent-color: #4dabf7;--subtitle-color: #aaaaaa;--shadow-color: rgba(0, 0, 0, .4)}body.dark-mode .story-header{color:#fff}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-color);line-height:1.6;transition:background-color .3s,color .3s}.theme-toggle{background:none;border:none;cursor:pointer;padding:.5rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;transition:background-color .2s;position:relative}.theme-toggle:hover{background-color:var(--border-color)}.theme-icon-sun,.theme-icon-moon{font-size:1.5rem;color:var(--text-color);transition:opacity .3s}.error-container{position:fixed;top:4.375rem;left:50%;transform:translate(-50%);background-color:var(--danger-color);color:#fff;padding:1rem 2rem;border-radius:.5rem;z-index:2000;box-shadow:0 4px 15px #0003}.flavor-text-box{position:fixed;bottom:6rem;left:50%;transform:translate(-50%);z-index:10;background-color:color-mix(in srgb,var(--card-bg) 85%,transparent);backdrop-filter:blur(.75rem);-webkit-backdrop-filter:blur(.75rem);border:1px solid color-mix(in srgb,var(--border-color) 60%,transparent);border-radius:1.5rem;padding:.65rem 1.5rem;width:fit-content;max-width:calc(100% - 2rem);text-align:center;box-shadow:0 .25rem 1rem #00000026,0 0 0 1px color-mix(in srgb,var(--accent-color) 20%,transparent);animation:floatInOut 5.6s ease .3s both}@keyframes floatInOut{0%{opacity:0;transform:translate(-50%) translateY(1rem)}5%{opacity:1;transform:translate(-50%) translateY(0)}90%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(1rem)}}.flavor-text-box p{margin:0;font-size:.85rem;font-weight:600;color:var(--text-color);letter-spacing:.01em}.flavor-text-box p:before{content:"🎵";margin-right:.5rem}@media (max-width: 480px){.flavor-text-box{bottom:5rem;padding:.55rem 1rem;border-radius:1.25rem}.flavor-text-box p{font-size:.75rem}}.viewer-header{background-color:var(--header-bg);backdrop-filter:blur(10px);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:999;border-bottom:1px solid var(--border-color);box-shadow:0 2px 4px var(--shadow-color)}.header-title{font-size:1.5rem;font-weight:700;margin:0 1rem}.search-container{flex-grow:1;margin:0 2rem;max-width:25rem}#search-bar{width:100%;padding:.75rem 1rem;border-radius:.5rem;border:1px solid var(--border-color);background-color:var(--input-bg);color:var(--text-color);font-size:1rem}.story-grid-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:1.5rem;padding:2rem;max-width:100rem;margin:0 auto}.skeleton-card{pointer-events:none;cursor:default}.skeleton-card:hover{transform:none;box-shadow:0 4px 15px var(--shadow-color)}.skeleton-thumbnail,.skeleton-title,.skeleton-subtitle{background:linear-gradient(90deg,var(--border-color) 25%,var(--bg-color) 50%,var(--border-color) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.skeleton-title,.skeleton-subtitle{height:1.2rem;border-radius:4px;margin-bottom:.5rem}.skeleton-title{width:70%;height:1.4rem}.skeleton-subtitle{width:90%}.grid-card{background-color:var(--card-bg);border-radius:.75rem;overflow:hidden;box-shadow:0 4px 15px var(--shadow-color);transition:transform .2s,box-shadow .2s;cursor:pointer;display:flex;flex-direction:column;position:relative;will-change:transform,box-shadow}.grid-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px var(--shadow-color)}.grid-card.highlighted-card{border:2px solid var(--accent-color);box-shadow:0 6px 25px color-mix(in srgb,var(--accent-color) 50%,transparent);transform:translateY(-5px) scale(1.02)}.grid-card.highlighted-card:after{content:"다음 회차보기";position:absolute;top:1rem;right:-2.2rem;background-color:var(--accent-color);color:#fff;padding:.2rem 2.5rem;font-size:.8rem;font-weight:700;text-align:center;transform:rotate(45deg);box-shadow:0 2px 5px #0003;white-space:nowrap}.grid-card.world-story-link{border:2px dashed var(--accent-color);box-shadow:0 6px 18px color-mix(in srgb,var(--accent-color) 35%,transparent)}.card-thumbnail{width:100%;height:10rem;background-color:#ccc;background-size:cover;background-position:center}.card-content{padding:1rem;flex-grow:1}.card-title{font-size:1.2rem;font-weight:700;margin-bottom:.5rem;word-break:keep-all}.card-subtitle{font-size:.9rem;color:var(--subtitle-color)}#story-viewer-view{position:relative;display:flex;flex-direction:column;width:100%;height:calc(100dvh - var(--navbar-height, 3.5rem));-webkit-user-select:none;user-select:none}.viewer-container{display:flex;flex-direction:column;position:relative;flex-grow:1;width:100%;padding-bottom:1.5rem}.story-background{position:absolute;top:5rem;left:0;width:100%;height:calc(100% - 5rem);background-size:contain;background-position:center top;background-repeat:no-repeat;background-color:#000;z-index:0;transition:background-image .5s ease-in-out;pointer-events:none;will-change:background-image;contain:layout style paint}.painting-layer{position:absolute;top:5rem;left:0;width:100%;height:calc(100% - 16rem);z-index:1;pointer-events:none;overflow:hidden}.painting-container{position:absolute;bottom:0;display:flex;align-items:flex-end;justify-content:center;height:100%}.painting-container[data-side="0"]{left:0;right:auto;--base-transform: translateX(0);transform:var(--base-transform)}.painting-container[data-side="1"]{left:auto;right:0;--base-transform: translateX(0);transform:var(--base-transform)}.painting-container[data-side="2"]{left:50%;--base-transform: translateX(-50%);transform:var(--base-transform)}.painting-container[data-dir="-1"] .painting-image-wrapper{transform:scaleX(-1)}.painting-image-wrapper{position:relative;display:inline-block;line-height:0;height:100%}.painting-base{display:block;height:100%;width:auto;object-fit:contain}.painting-container[data-side="0"] .painting-base,.painting-container[data-side="1"] .painting-base{max-width:45vw}.painting-container[data-side="2"] .painting-base{max-width:70vw}.painting-face-overlay{position:absolute;pointer-events:none;z-index:2}.painting-container.painting-noise .painting-image-wrapper{position:relative}.painting-container.painting-noise .painting-base,.painting-container.painting-noise .painting-face-overlay{animation:hologramFlicker .1s infinite;filter:brightness(.75) contrast(1.15) saturate(.9);opacity:.85}.painting-container.painting-noise:before{content:"";position:absolute;inset:0;z-index:10;background:repeating-linear-gradient(0deg,transparent 0px,transparent 1px,rgba(0,0,0,.3) 1px,rgba(0,0,0,.3) 2px),repeating-linear-gradient(0deg,transparent 0px,transparent 4px,rgba(100,200,255,.06) 4px,rgba(100,200,255,.06) 8px);pointer-events:none;animation:scanlineScroll .3s linear infinite}.painting-container.painting-noise:after{content:"";position:absolute;inset:0;z-index:11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:.12;pointer-events:none;mix-blend-mode:overlay;animation:noiseFlicker .05s steps(2) infinite}.painting-container.painting-noise .painting-image-wrapper:before{content:"";position:absolute;inset:0;z-index:5;background:linear-gradient(180deg,rgba(0,180,255,.12) 0%,transparent 25%,transparent 75%,rgba(0,180,255,.15) 100%);pointer-events:none}.painting-container.painting-noise .painting-image-wrapper:after{content:"";position:absolute;inset:0;z-index:6;background:linear-gradient(transparent 0%,transparent 15%,rgba(0,255,255,.25) 15%,rgba(0,255,255,.25) 17%,transparent 17%,transparent 100%),linear-gradient(transparent 0%,transparent 45%,rgba(255,255,255,.2) 45%,rgba(255,255,255,.2) 46%,transparent 46%,transparent 100%),linear-gradient(transparent 0%,transparent 62%,rgba(0,255,200,.2) 62%,rgba(0,255,200,.2) 64%,transparent 64%,transparent 100%),linear-gradient(transparent 0%,transparent 78%,rgba(255,100,200,.15) 78%,rgba(255,100,200,.15) 80%,transparent 80%,transparent 100%),linear-gradient(transparent 0%,transparent 33%,rgba(100,255,150,.18) 33%,rgba(100,255,150,.18) 34%,transparent 34%,transparent 100%);pointer-events:none;animation:glitchBars 1.5s steps(1) infinite}@keyframes hologramFlicker{0%,to{opacity:.85}50%{opacity:.8}25%,75%{opacity:.83}}@keyframes scanlineScroll{0%{background-position:0 0}to{background-position:0 8px}}@keyframes noiseFlicker{0%{opacity:.08}to{opacity:.15}}@keyframes glitchBars{0%,to{opacity:.7}10%,30%,50%,70%,90%{opacity:1}15%,35%,55%,75%,95%{opacity:0}20%,40%,60%,80%{opacity:.5}}.painting-container.inactive,.painting-container.active{opacity:1!important;filter:none!important}@keyframes paintingEnter{0%{opacity:0}to{opacity:1}}.story-header{width:100%;padding:1rem;display:flex;align-items:center;justify-content:space-between;background-color:var(--header-bg);box-shadow:0 2px 4px var(--shadow-color);z-index:10;color:var(--text-color);margin-bottom:auto;position:relative}#story-title{margin-left:1rem;font-size:1.5rem;flex-grow:1;text-align:center}.progress-indicator{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin:0 1rem;min-width:7.5rem}.progress-text{font-size:.85rem;font-weight:500;color:var(--subtitle-color);white-space:nowrap}.progress-bar-container{width:100%;height:4px;background-color:var(--border-color);border-radius:2px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent-color),color-mix(in srgb,var(--accent-color) 70%,white));border-radius:2px;transition:width .3s ease}.info-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:2rem;z-index:5;pointer-events:none}#info-screen-text{color:#fff;font-weight:600;text-align:center;text-shadow:2px 2px 4px rgba(0,0,0,.8);background:var(--overlay-heavy);padding:1.25rem 1.75rem;border-radius:.75rem;max-width:80%;max-height:70vh;margin:0;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;pointer-events:auto;line-height:1.5;--sequence-base-size: 1.35rem;font-size:var(--sequence-base-size)}#info-screen-text .sequence-line{display:block;font-size:calc(var(--sequence-base-size) * var(--sequence-scale, 1));white-space:pre-line;word-break:break-word}.dialogue-box{background-color:var(--dialogue-bg);backdrop-filter:blur(5px);width:90%;max-width:50rem;margin:0 auto 1rem;border-radius:.75rem;padding:1.5rem;box-shadow:0 0 20px #0003;display:flex;align-items:center;z-index:10}.actor-portrait{width:6.25rem;height:6.25rem;margin-right:1.5rem;flex-shrink:0;border-radius:50%;overflow:hidden;border:3px solid var(--border-color);background-color:var(--bg-color)}.actor-portrait.actor-shadow{box-shadow:0 0 10px 5px #00000080;filter:brightness(.5);opacity:.7}.actor-portrait img{width:100%;height:100%;object-fit:cover}.dialogue-content{flex-grow:1}.actor-name{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}.dialogue-text{font-size:1.1rem}.next-page-indicator{position:absolute;bottom:1rem;right:1.5rem;font-size:1.5rem;animation:bounce 1s infinite}.options-box{display:flex;flex-direction:column;gap:.75rem;width:90%;max-width:37.5rem;margin:0 auto 2rem;z-index:10}.option-button{background-color:var(--card-bg);border:1px solid var(--border-color);color:var(--text-color);padding:.75rem 1.5rem;border-radius:.3rem;cursor:pointer;font-size:1rem;width:100%;text-align:center;transition:background-color .2s}.option-button:hover{background-color:var(--border-color)}.bottom-bar-container{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;padding:0 1.5rem;margin-bottom:1rem}.story-nav-arrows{display:flex;justify-content:center;gap:2rem}.nav-button,.story-nav-btn{background-color:color-mix(in srgb,var(--card-bg) 85%,var(--text-color));border:1.5px solid color-mix(in srgb,var(--border-color) 70%,var(--text-color));color:var(--text-color);padding:.5rem 1rem;border-radius:.3rem;transition:all .2s ease;cursor:pointer;font-size:1rem;text-decoration:none;font-family:Noto Sans KR,Roboto,sans-serif;opacity:.85}.nav-button:hover,.story-nav-btn:hover{background-color:var(--border-color);transform:translateY(-1px);box-shadow:0 2px 8px #0003;opacity:1}.story-nav-btn:disabled{background-color:var(--border-color);color:var(--subtitle-color);cursor:not-allowed}.audio-player-container{display:flex;align-items:center;gap:.75rem;background-color:var(--dialogue-bg);padding:.5rem 1rem;border-radius:3.125rem;box-shadow:0 4px 15px var(--shadow-color);backdrop-filter:blur(5px);z-index:20;min-width:15rem;flex-wrap:nowrap}.bgm-name{font-size:.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:3.125rem;flex-grow:1;text-align:center;margin:0 .5rem}.volume-control{display:flex;align-items:center;gap:.5rem}.waveform-container{display:flex;align-items:center;gap:3px;height:1.5rem;padding:0 .5rem}.waveform-bar{width:3px;background:var(--accent-color);border-radius:2px;height:4px;transition:height .1s ease;will-change:height}.audio-player-container.playing .waveform-bar:nth-child(1){animation:wave .8s ease-in-out infinite;animation-delay:0s}.audio-player-container.playing .waveform-bar:nth-child(2){animation:wave .8s ease-in-out infinite;animation-delay:.1s}.audio-player-container.playing .waveform-bar:nth-child(3){animation:wave .8s ease-in-out infinite;animation-delay:.2s}.audio-player-container.playing .waveform-bar:nth-child(4){animation:wave .8s ease-in-out infinite;animation-delay:.3s}.audio-player-container.playing .waveform-bar:nth-child(5){animation:wave .8s ease-in-out infinite;animation-delay:.4s}.audio-btn{background:none;border:none;color:var(--text-color);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.25rem}.audio-btn .material-symbols-outlined{font-size:2rem}#volume-slider{-webkit-appearance:none;appearance:none;width:6.25rem;height:5px;background:var(--border-color);outline:none;border-radius:5px}#volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:.9375rem;height:.9375rem;background:var(--accent-color);cursor:pointer;border-radius:50%}#volume-slider::-moz-range-thumb{width:.9375rem;height:.9375rem;background:var(--accent-color);cursor:pointer;border-radius:50%;border:none}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--overlay-intense);z-index:2000;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(5px)}.modal-content{background-color:var(--card-bg);padding:2rem;border-radius:.75rem;max-width:50rem;width:90%;max-height:85vh;display:flex;flex-direction:column;position:relative;box-shadow:0 10px 30px #0000004d}#summary-modal-content h2{font-size:1.8rem;color:var(--accent-color);margin-bottom:1rem;border-bottom:2px solid var(--border-color);padding-bottom:.5rem}#summary-modal-content h3{font-size:1.4rem;margin-top:1.5rem;margin-bottom:.75rem;color:var(--text-color)}#summary-modal-content p{line-height:1.7;margin-bottom:1rem}#summary-modal-content ul{list-style-type:none;padding-left:0}#summary-modal-content li{background-color:var(--bg-color);border-left:4px solid var(--accent-color);padding:.75rem 1rem;margin-bottom:.5rem;border-radius:4px}.close-modal-btn{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--subtitle-color)}.full-script-content,#summary-modal-content{overflow-y:auto;padding-right:1rem}.full-script-content p{margin-bottom:1rem}.full-script-content strong,#summary-modal-content strong{color:var(--accent-color);margin-right:.5em}#view-script-btn{display:flex;align-items:center;gap:.5em}.fade-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;z-index:9998;opacity:0;pointer-events:none;transition:opacity .5s ease-in-out;will-change:opacity}.fade-overlay.visible{opacity:1}.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}.flash{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#fff;z-index:9999;animation:flash-anim .3s ease-out}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes flash-anim{0%{opacity:1}to{opacity:0}}@keyframes wave{0%,to{height:4px}50%{height:1.25rem}}@media (max-width: 600px){.viewer-header{flex-wrap:wrap;justify-content:center;padding:.75rem 1rem;gap:.75rem}.header-title{width:100%;text-align:center;font-size:1.3rem;order:1;margin:0 0 .5rem}.viewer-header .nav-button{order:2}.search-container{order:3;flex-grow:1;min-width:7.5rem;margin:0}.story-header{padding:.5rem .75rem}#story-title{font-size:1.1rem;margin-left:.5rem}.progress-indicator{min-width:5rem;margin:0 .5rem}.progress-text{font-size:.75rem}#view-script-btn{font-size:0;padding:.5rem;gap:0}#view-script-btn .material-symbols-outlined{font-size:1.5rem}.dialogue-box{width:95%;padding:1rem}.actor-portrait{width:5rem;height:5rem;margin-right:1rem}.dialogue-text{font-size:1rem}.painting-layer{height:calc(100% - 19rem)}.painting-container[data-side="0"] .painting-base,.painting-container[data-side="1"] .painting-base{max-width:50vw}.painting-container[data-side="2"] .painting-base{max-width:85vw}}*,*:before,*:after{box-sizing:border-box}body,html{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;height:100%;background-color:var(--bg-color);color:var(--text-color);overflow:hidden}header{background-color:#2c3e50;color:#fff;padding:10px 20px;text-align:center;box-shadow:0 2px 5px #0003}header h1{margin:0;font-size:1.5em;font-weight:300}#main-container{display:flex;height:calc(100vh - 57px);width:100%}#gallery-container{width:330px;flex-shrink:0;background-color:#2c3e50;padding:10px 10px 80px;display:grid;grid-template-columns:repeat(2,1fr);column-gap:10px;row-gap:10px;overflow-y:auto;align-content:start}.gallery-item{height:145px;background-size:cover;background-position:center;border-radius:8px;cursor:pointer;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;border:3px solid transparent}.gallery-item:before{content:"";position:absolute;inset:0;background-color:#0000;transition:background-color .3s ease}.gallery-item:hover{box-shadow:0 6px 20px #0006;z-index:10}.gallery-item:hover:before{background-color:var(--overlay-strong)}.gallery-item.active{border-color:var(--accent-color);box-shadow:0 0 10px var(--accent-color)}.gallery-item-name{position:absolute;bottom:0;left:0;right:0;background-color:var(--overlay-intense);color:#fff;padding:8px;text-align:center;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateY(0);transition:transform .3s ease,background-color .3s ease}.gallery-item:hover .gallery-item-name{background-color:var(--overlay-opaque)}#content-container{flex-grow:1;padding:20px 40px;overflow-y:auto;background-color:var(--card-bg);position:relative;transition:background-color .3s,color .3s}.placeholder{display:flex;justify-content:center;align-items:center;height:100%;color:#aaa;font-size:1.5em;text-align:center}.content-paragraph{margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid var(--border-color);transition:border-bottom-color .3s}.content-paragraph:last-child{border-bottom:none}.content-paragraph h2{font-size:1.8em;color:#2c3e50;margin-bottom:5px;transition:color .3s}.content-paragraph h3{font-size:1.1em;color:#7f8c8d;margin-top:0;margin-bottom:15px;font-style:italic;font-weight:400;transition:color .3s}.content-paragraph p{font-size:1em;line-height:1.7}.top-controls{position:absolute;top:20px;right:40px;display:flex;align-items:center;gap:15px;z-index:20}#font-controls button{width:30px;height:30px;border-radius:50%;border:1px solid var(--border-color);background-color:#f0f0f0;color:var(--text-color);font-size:18px;font-weight:700;cursor:pointer;line-height:1;margin:0 2px}#font-controls button:hover{background-color:#e0e0e0}body.dark-mode #content-container{background-color:var(--bg-color);color:var(--text-color)}body.dark-mode #font-controls button{background-color:var(--input-bg);border-color:var(--border-color);color:var(--text-color)}body.dark-mode #font-controls button:hover{background-color:#444}body.dark-mode .content-paragraph{border-bottom-color:var(--border-color)}body.dark-mode .content-paragraph h2{color:var(--accent-color)}body.dark-mode .content-paragraph h3{color:var(--subtitle-color)}@media (max-width: 768px){#main-container{flex-direction:column;height:calc(100vh - 51px)}header h1{font-size:1.2em}#gallery-container{width:100%;height:150px;flex-shrink:0;display:flex;overflow-x:auto;overflow-y:hidden;align-items:center;padding:10px}.gallery-item{width:130px;height:130px;flex-shrink:0;margin-left:10px}.gallery-item:last-child{margin-right:10px}#content-container{padding:20px}.top-controls{right:20px}}