:root{--brand: #ffd97a;--text: #f7f7f7;--shadow: rgba(0, 0, 0, .45);--scene-transition-duration: .8s;--scene-transition-timing: ease-in-out}*{box-sizing:border-box}html,body{height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{margin:0;font-family:"Noto Serif SC",serif;color:var(--text);background:#0e0e0e;overflow:hidden}.navbar{position:fixed;inset:0 0 auto 0;height:64px;background:#1414148c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:0 72px;z-index:10}.logo{color:var(--brand);font-weight:700;font-size:1.6rem;letter-spacing:2px}.navbar nav{display:flex;gap:28px}.navbar nav a{color:#e9e9e9;text-decoration:none;opacity:.95;transition:.25s ease}.navbar nav a:hover,.navbar nav a.active{color:var(--brand)}.scenes{margin-top:64px;height:calc(100dvh - 64px);position:relative;overflow:hidden;touch-action:none}.scene{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:grid;place-items:center;padding:clamp(16px,4vw,48px);background:var(--bg, radial-gradient(1200px 800px at 50% 50%, #2a2a2a, #0f0f0f)) no-repeat center / cover;opacity:0;pointer-events:none;transition:transform var(--scene-transition-duration) var(--scene-transition-timing),opacity var(--scene-transition-duration) var(--scene-transition-timing);will-change:transform,opacity;transform:translateZ(0);backface-visibility:hidden;contain:paint}.scene:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0a0a0a40,#0a0a0a59)}.overlay{position:relative;z-index:1;width:min(980px,90vw);padding:clamp(24px,5vw,40px);border-radius:0;background:transparent;box-shadow:none;animation:fadeUp 1.2s ease;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1;transition:opacity .3s ease-out}.scene.is-active{opacity:1;transform:translateY(0);z-index:2;pointer-events:auto}.scene.is-active .overlay{animation:fadeUp 1.2s ease}.scene.is-entering-from-down{transform:translateY(50px);opacity:0;z-index:2}.scene.is-entering-from-up{transform:translateY(-50px);opacity:0;z-index:2}.scene.is-exiting-up{transform:translateY(-50px);opacity:0;z-index:1}.scene.is-exiting-up .overlay{opacity:0}.scene.is-exiting-down{transform:translateY(50px);opacity:0;z-index:1}.scene.is-exiting-down .overlay{opacity:0}.place{margin:0 0 14px;opacity:.95;font-weight:600;letter-spacing:1px}.poem{margin:0;font-size:clamp(1.1rem,2.2vw,1.35rem);line-height:1.85;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35)}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.page-footer{text-align:center;color:#ddd;opacity:.9;padding:28px 0 36px;background:#14141452}@media (hover: none) and (pointer: coarse){button,a.btn,.btn,[class*=btn],[role=button]{-webkit-tap-highlight-color:transparent;outline:none;box-shadow:none}}@media (max-width: 1024px){.navbar{padding:0 32px}.overlay{width:min(820px,92vw)}}@media (max-width: 768px){.navbar{padding:8px 20px}.logo{font-size:1.3rem}.navbar nav{gap:18px}.scene{padding:clamp(16px,6vw,32px)}.overlay{padding:clamp(20px,6vw,32px)}}@media (max-width: 640px){.navbar{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:16px;height:auto}.navbar nav{gap:12px;width:100%;flex-wrap:wrap;justify-content:center}.scenes{margin-top:96px;height:calc(100dvh - 96px)}}@media (max-width: 560px){.logo{font-size:1.2rem}.place{font-size:1rem}.poem{font-size:clamp(1rem,5vw,1.15rem);line-height:1.7}footer{padding:20px}}
