:root{--bg: #08080a;--ink: #f0e8e3;--ink-dim: #9a968e;--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--sans: system-ui, -apple-system, "Segoe UI", sans-serif;--dissolve: .42s}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--serif)}#app{height:100%;display:flex;align-items:center;justify-content:center}#stage{position:relative;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,56.25vw);overflow:hidden;touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none}.layer{position:absolute;inset:0;opacity:0;transition:opacity var(--dissolve) ease;pointer-events:none;z-index:1}#light-layer{position:absolute;inset:0;z-index:0;pointer-events:none;transition:opacity .9s ease}#light-layer .halo{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}#light-layer .halo:after{content:"";position:absolute;width:115vmin;height:115vmin;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#f0e8e30d,#f0e8e306 32%,#f0e8e300 62%)}#pulse-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}#pulse-layer .breath{position:absolute;width:36vmin;height:36vmin;border-radius:50%;transform:translate(-50%,-50%) scale(.35);background:radial-gradient(circle,#f0e8e324,#f0e8e300 64%);animation:breath .95s ease-out forwards}@keyframes breath{to{transform:translate(-50%,-50%) scale(1.75);opacity:0}}.layer.visible{opacity:1;pointer-events:auto}.layer>.frame{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.frame.kind-image img.hero{position:relative;flex:1 1 auto;min-height:0;max-height:76.5%;width:auto;max-width:100%;object-fit:contain}.frame-text{position:relative;z-index:2;max-width:min(64ch,82%);text-align:center;font-size:clamp(16px,2.5vmin,27px);line-height:1.65;text-wrap:pretty}.frame-text p+p{margin-top:.9em}.frame.kind-text .frame-text{font-size:clamp(17px,2.7vmin,29px);max-width:min(58ch,84%)}.frame.kind-image .frame-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:3.5% 6% 0}.frame.kind-image .frame-text{flex:none;max-height:46%;overflow-y:auto;scrollbar-width:thin;text-align:center;max-width:min(72ch,94%);font-size:clamp(13px,2.05vmin,22px);line-height:1.6;padding:1em 0 1.4em}.frame-text.verse{font-style:italic;font-size:clamp(17px,2.9vmin,30px);line-height:1.9}.frame-text.verse p+p{margin-top:0}.frame.kind-title .overline{font-family:var(--sans);font-size:clamp(11px,1.4vmin,15px);letter-spacing:.42em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:2.2vmin}.frame.kind-title h1{line-height:0}.frame.kind-title .logotype{width:clamp(176px,36.8vmin,376px);height:auto;display:block}.frame.kind-title .subtitle{font-style:italic;color:var(--ink-dim);max-width:min(52ch,80%);text-align:center;margin-top:5.5vmin;font-size:clamp(14px,2vmin,21px);line-height:1.7}.frame.kind-title .nav-hint{position:absolute;bottom:6%;display:flex;flex-direction:column;align-items:center;gap:1.6vmin;color:var(--ink-dim)}.hint-click{position:relative;width:clamp(26px,3.4vmin,34px);height:clamp(28px,3.7vmin,37px)}.hint-click .hand{position:relative;width:100%;height:100%;fill:var(--ink);opacity:.9;transform-origin:50% 20%;animation:hand-click 2.4s ease-in-out infinite}.hint-click .ripple{position:absolute;left:42%;top:8%;width:clamp(22px,3vmin,30px);height:clamp(22px,3vmin,30px);margin:0 0 0 -11px;border:1.5px solid var(--ink);border-radius:50%;transform:translate(-50%,-50%) scale(.3);opacity:0;animation:hint-ripple 2.4s ease-out infinite}.hint-keys{display:flex;gap:8px}.hint-keys .key{display:inline-flex;align-items:center;justify-content:center;width:clamp(22px,3vmin,28px);height:clamp(22px,3vmin,28px);font-family:var(--sans);font-size:clamp(12px,1.7vmin,15px);color:var(--ink);border:1px solid rgba(240,232,227,.35);border-radius:6px;box-shadow:inset 0 -2px #00000059}.hint-keys .key:last-child{animation:key-press 2.4s ease-in-out infinite}.hint-caption{font-family:var(--sans);font-size:clamp(11px,1.5vmin,14px);letter-spacing:.08em}@keyframes hand-click{0%,62%,to{transform:translateY(0)}72%{transform:translateY(3px)}84%{transform:translateY(0)}}@keyframes hint-ripple{0%,60%{transform:translate(-50%,-50%) scale(.3);opacity:0}72%{opacity:.5}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}@keyframes key-press{0%,to{border-color:#f0e8e359;box-shadow:inset 0 -2px #00000059;transform:translateY(0)}72%{border-color:var(--ink);box-shadow:inset 0 0 #0000;transform:translateY(1px)}}.frame.kind-choose .choose-prompt{font-style:italic;color:var(--ink-dim);font-size:clamp(16px,2.4vmin,26px);margin-bottom:5vmin;text-align:center}.frame.kind-choose .choose-row{display:flex;gap:clamp(12px,2.6vmin,28px);flex-wrap:wrap;justify-content:center}.frame.kind-choose .choose-btn{font-family:var(--sans);font-size:clamp(13px,1.9vmin,17px);letter-spacing:.06em;color:var(--ink);background:none;border:1px solid rgba(240,232,227,.4);border-radius:999px;padding:.95em 1.9em;cursor:pointer;transition:border-color .2s ease,background .2s ease}.frame.kind-choose .choose-btn:hover,.frame.kind-choose .choose-btn:focus-visible{border-color:var(--ink);background:#f0e8e30f}.frame.kind-choose .choose-hint{margin-top:4vmin;font-family:var(--sans);font-size:clamp(11px,1.5vmin,13px);letter-spacing:.08em;color:var(--ink-dim);text-align:center}.frame.kind-heading .overline{font-family:var(--sans);font-size:clamp(12px,1.6vmin,16px);letter-spacing:.42em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:2.6vmin}.frame.kind-heading .chapter-title{font-weight:400;font-size:clamp(34px,6.2vmin,76px);letter-spacing:.02em;text-align:center;max-width:86%}.frame.kind-heading .section-title{font-weight:400;font-style:italic;font-size:clamp(22px,3.6vmin,42px);text-align:center;max-width:86%}.frame.kind-closing .mark{width:clamp(30px,5.4vmin,52px);height:auto;margin-bottom:4.5vmin;opacity:.9}.frame.kind-closing .credit p{text-align:center;line-height:2.1;font-size:clamp(15px,2.2vmin,24px)}.frame.kind-closing .credit p:first-child{font-size:clamp(20px,3.2vmin,36px)}.frame.kind-closing a{color:var(--ink);text-underline-offset:5px;text-decoration-color:var(--ink-dim)}.frame.kind-closing .again{margin-top:5vmin;font-family:var(--sans);font-size:clamp(11px,1.5vmin,14px);color:var(--ink-dim)}.frame.kind-closing .again a{color:var(--ink-dim)}button.replay{margin-top:2.4vmin;font-family:var(--sans);font-size:clamp(11px,1.5vmin,14px);letter-spacing:.08em;color:var(--ink-dim);background:none;border:1px solid rgba(232,228,220,.28);border-radius:999px;padding:.5em 1.3em;cursor:pointer}button.replay:hover{color:var(--ink);border-color:#e8e4dc8c}#chrome{position:fixed;inset:0;pointer-events:none;font-family:var(--sans);z-index:10}#act-label{position:absolute;top:max(14px,env(safe-area-inset-top));left:18px;right:96px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);opacity:.75;transition:opacity .4s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#controls{position:absolute;top:max(10px,env(safe-area-inset-top));right:14px;pointer-events:auto;display:flex;gap:10px}#controls button{background:none;border:none;color:var(--ink-dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;cursor:pointer}#controls button:hover,#controls button:focus-visible{color:var(--ink)}#controls button[aria-pressed=true]{color:var(--ink)}#progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#e8e4dc1f}#progress-fill{height:100%;width:0%;background:#e8e4dc8c;transition:width .35s ease}:focus-visible{outline:1px solid var(--ink-dim);outline-offset:2px}@media(orientation:portrait)and (max-width:720px){#stage{width:100vw;height:100%}.frame.kind-image .frame-content{position:absolute;inset:0;justify-content:flex-start;align-items:stretch;padding:max(44px,env(safe-area-inset-top)) 0 0}.frame.kind-image img.hero{position:relative;inset:auto;width:100%;aspect-ratio:16 / 9;height:auto;flex:none}.frame.kind-image .frame-text{flex:1 1 auto;min-height:0;max-height:none;padding:7% 7% 12%;overflow-y:auto;font-size:clamp(15px,4.4vw,19px);max-width:none;text-align:left}.frame.kind-image .frame-text.verse{text-align:center}}@media(prefers-reduced-motion:reduce){.layer,#progress-fill{transition-duration:1ms}#light-layer,#pulse-layer{display:none}.hint-click .hand,.hint-click .ripple,.hint-keys .key:last-child{animation:none}.hint-click .ripple{display:none}}