:root{--color-void: #0a0a0c;--color-deep: #12121a;--color-shadow: #1a1a24;--color-muted: #2a2a3a;--color-dim: #6a6a7c;--color-warm: #f5e6d3;--color-glow: #fff8f0;--color-ember: #d4a574;--font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;--font-body: "Inter", "Helvetica Neue", Arial, sans-serif;--space-xs: .5rem;--space-sm: 1rem;--space-md: 2rem;--space-lg: 4rem;--transition-slow: 1.2s ease;--transition-medium: .6s ease;--transition-fast: .3s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;background:var(--color-void)}body{font-family:var(--font-body);background-color:var(--color-void);color:var(--color-warm);min-height:100vh;min-height:100dvh;overflow:hidden;touch-action:pan-y}#reader{position:relative;z-index:1;width:100%;height:100vh;height:100dvh}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--transition-slow),visibility var(--transition-slow)}.screen.active{opacity:1;visibility:visible}.home-link{position:absolute;top:max(1rem,env(safe-area-inset-top));left:1.25rem;font-family:var(--font-body);font-size:.75rem;font-weight:300;letter-spacing:.15em;text-transform:uppercase;color:var(--color-dim);text-decoration:none;transition:color var(--transition-fast)}.home-link:hover{color:var(--color-warm)}.title-content{text-align:center;max-width:600px;padding:var(--space-md)}.title-content h1{font-family:var(--font-display);font-size:clamp(2.5rem,8vw,4.5rem);font-weight:400;letter-spacing:.02em;line-height:1.1;margin-bottom:var(--space-md);color:var(--color-glow)}.subtitle{font-family:var(--font-display);font-size:clamp(1rem,2.5vw,1.25rem);font-style:italic;line-height:1.6;color:var(--color-dim);margin-bottom:var(--space-lg)}.hint{margin-top:var(--space-md);font-size:.75rem;font-weight:300;letter-spacing:.1em;color:var(--color-muted)}.begin-button{font-family:var(--font-display);font-size:1.125rem;letter-spacing:.15em;text-transform:uppercase;color:var(--color-warm);background:transparent;border:1px solid var(--color-muted);padding:var(--space-sm) var(--space-md);cursor:pointer;transition:all var(--transition-fast)}.begin-button:hover{border-color:var(--color-ember);color:var(--color-glow);background:#d4a5741a}#panel-screen{padding:var(--space-md);padding-bottom:80px}.panel-container{width:100%;max-width:900px;height:calc(100vh - 160px);height:calc(100dvh - 160px);display:flex;flex-direction:column;align-items:center;justify-content:center}.act-title{text-align:center;margin-bottom:var(--space-lg);opacity:1;transition:opacity var(--transition-medium)}.act-title.hidden{opacity:0;position:absolute;visibility:hidden}.act-title .act-number{display:block;font-size:.75rem;font-weight:300;letter-spacing:.3em;text-transform:uppercase;color:var(--color-dim);margin-bottom:var(--space-xs)}.act-title .act-name{font-family:var(--font-display);font-size:clamp(2rem,6vw,3.5rem);font-weight:400;color:var(--color-glow)}.panel-content{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}.panel-image-wrapper{position:relative;width:100%;max-width:800px;aspect-ratio:16 / 10;overflow:hidden;background:var(--color-void);border-radius:2px;box-shadow:0 0 0 1px #ffffff0d,0 20px 60px #00000080}.panel-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}#panel-image{position:absolute;top:4%;left:2.5%;width:95%;height:92%;object-fit:cover;opacity:0;transition:opacity var(--transition-medium)}#panel-image.loaded{opacity:1}.panel-text{text-align:center;max-width:600px;padding:0 var(--space-sm)}.panel-title{font-size:.75rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--color-dim);margin-bottom:var(--space-sm)}.dialogue{font-family:var(--font-display);font-size:clamp(1.125rem,3vw,1.5rem);font-style:italic;line-height:1.6;color:var(--color-warm);opacity:0;transform:translateY(10px);transition:opacity var(--transition-medium),transform var(--transition-medium)}.dialogue.visible{opacity:1;transform:translateY(0)}.panel-nav{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-md);padding-bottom:max(var(--space-md),env(safe-area-inset-bottom));background:linear-gradient(to top,var(--color-void) 0%,transparent 100%)}.nav-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--color-muted);border-radius:50%;color:var(--color-dim);cursor:pointer;transition:all var(--transition-fast)}.nav-btn:hover:not(:disabled){border-color:var(--color-ember);color:var(--color-warm)}.nav-btn:disabled{opacity:.3;cursor:not-allowed}.progress{font-size:.75rem;font-weight:300;letter-spacing:.1em;color:var(--color-dim);min-width:60px;text-align:center}.end-content{text-align:center;padding:var(--space-md)}.end-text{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2rem);font-style:italic;color:var(--color-dim);margin-bottom:var(--space-lg)}.end-links{margin-top:var(--space-lg);font-size:.8rem;font-weight:300;letter-spacing:.08em;display:flex;flex-direction:column;gap:var(--space-sm);align-items:center}.end-links a{color:var(--color-ember);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--transition-fast)}.end-links a:hover{border-color:var(--color-ember)}@media(max-width:768px){:root{--space-md: 1rem;--space-lg: 2rem}#panel-screen{padding:var(--space-sm);padding-bottom:70px}.panel-container{height:calc(100dvh - 120px)}.panel-image-wrapper{aspect-ratio:4 / 3}.panel-text{padding:0 var(--space-xs)}.panel-title{font-size:.65rem;margin-bottom:var(--space-xs)}.panel-nav{gap:var(--space-sm);padding:var(--space-sm);padding-bottom:max(var(--space-sm),env(safe-area-inset-bottom))}.nav-btn{width:44px;height:44px}.subtitle{margin-bottom:var(--space-md)}}@media(max-width:380px){:root{--space-sm: .75rem}.title-content h1{font-size:2rem}.dialogue{font-size:1rem}}@media(max-height:500px)and (orientation:landscape){#panel-screen{padding:var(--space-xs);padding-bottom:60px}.panel-container{flex-direction:row;height:calc(100dvh - 70px);gap:var(--space-sm)}.panel-image-wrapper{aspect-ratio:16 / 10;max-width:55%;max-height:100%}.panel-text{max-width:40%;text-align:left}.panel-nav{padding:var(--space-xs)}.nav-btn{width:36px;height:36px}.act-title{margin-bottom:var(--space-sm)}.act-title .act-name{font-size:1.75rem}}@media(prefers-reduced-motion:reduce){.screen,.dialogue,#panel-image,.act-title{transition-duration:.01s}}