:root{
  --snowdrop:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 3c1 3 1 5 0 7' stroke='%235d6a39' stroke-width='2' fill='none' stroke-linecap='round'/><path d='M16 10c-5 1-8 7-6 15 3-2 5-6 6-11 1 5 3 9 6 11 2-8-1-14-6-15z' fill='%23fffdf6' stroke='%23c9bfa8' stroke-width='.8'/><path d='M16 12c-1.6 3-1.8 8 0 12 1.8-4 1.6-9 0-12z' fill='%23e8f0dc' stroke='%237f9a5a' stroke-width='.7'/><circle cx='16' cy='10.5' r='1.6' fill='%237f9a5a'/></svg>");
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .18 0 0 0 .13 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --night:#1b1730; --night2:#2d2340; --cream:#f6ecd8; --paper:#efe2c6;
  --ink:#3f2a1b; --ink2:#7a5a40; --rust:#b04a26; --amber:#d9963a; --moss:#5d6a39;
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","Source Han Serif CN",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:transparent;color:var(--ink);font-family:var(--sans);overscroll-behavior:none}
html{background:var(--night)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}

.view{position:fixed;inset:0;bottom:calc(-1 * var(--gap,0px));overflow-y:auto;-webkit-overflow-scrolling:touch}
/* ---------- 转场：像翻绘本 ---------- */
.view.enter{animation:viewIn .5s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes viewIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.view.leave{animation:viewOut .3s ease-in both;pointer-events:none}
@keyframes viewOut{to{opacity:0}}
/* 首页→故事页：书皮从左边翻开 */
.view.open{transform-origin:left center;animation:bookOpenIn .75s cubic-bezier(.25,.8,.25,1) backwards;box-shadow:-20px 0 60px rgba(0,0,0,.5)}
@keyframes bookOpenIn{from{transform:perspective(1600px) rotateY(-88deg);filter:brightness(.55)}60%{filter:brightness(.95)}to{transform:none;filter:none}}
/* 故事页→首页：书合上 */
.view.close{transform-origin:left center;animation:bookClose .55s cubic-bezier(.5,0,.75,.3) both;z-index:5;pointer-events:none}
@keyframes bookClose{to{transform:perspective(1600px) rotateY(-92deg);filter:brightness(.5)}}
/* 播放页→故事页：插图缩回书里 */
#player.leave{animation:pictureBack .4s cubic-bezier(.5,0,.7,.4) both;z-index:5}
@keyframes pictureBack{to{opacity:0;transform:scale(.86);border-radius:24px}}
.view.return{animation:viewIn .45s ease backwards}
.view.zoom{animation:none}
.view.hold{pointer-events:none}

/* 翻页：当前这一页绕着书脊翻过去，背面是绘本的纸 */
.turn{position:absolute;inset:0;z-index:4;perspective:1800px;pointer-events:none}
.turn .leaf{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:left center;animation:leafFwd .95s cubic-bezier(.42,.05,.28,1) forwards}
.turn.rev .leaf{transform-origin:right center;animation-name:leafRev}
@keyframes leafFwd{0%{transform:rotateY(0)}100%{transform:rotateY(-178deg)}}
@keyframes leafRev{0%{transform:rotateY(0)}100%{transform:rotateY(178deg)}}
.turn .face{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.turn .front::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.35));opacity:0;animation:leafShade .95s ease forwards}
.turn.rev .front::after{background:linear-gradient(270deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.35))}
@keyframes leafShade{50%{opacity:1}100%{opacity:1}}
.turn .back{transform:rotateY(180deg);background:#efe2c6 var(--grain);box-shadow:inset 0 0 60px rgba(120,80,40,.35)}
.turn::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 60%);animation:revealShade .95s ease forwards}
.turn.rev::before{background:linear-gradient(270deg,rgba(0,0,0,.45),rgba(0,0,0,0) 60%)}
@keyframes revealShade{from{opacity:1}to{opacity:0}}

.stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.4),transparent 50%,rgba(0,0,0,.4));opacity:calc(var(--lift,0) * 1.2)}

/* ---------- 首页 ---------- */
#home{background:radial-gradient(120% 70% at 50% 0%,#3b2f5c 0%,var(--night2) 45%,var(--night) 100%);color:var(--cream);
  padding:calc(var(--safe-t) + 28px) 20px calc(var(--safe-b) + 28px)}
.home-snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.home-head{position:relative;text-align:center;margin:8px auto 30px;max-width:520px}
.home-head .brand{margin:0 auto 6px;width:min(62vw,250px)}
.home-head .brand .logo{display:block;width:100%;height:auto;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}

/* logo 三只鸟的小剧场：10 秒一轮。猫头鹰和乌鸦使个眼色，猫头鹰从乌鸦背后伸出翅膀把小鸽子推下树枝，
   小鸽子扑腾着飞回来，两只坏鸟捂嘴偷笑；小鸽子回头瞪它们，它们马上装没事 */
.logo [data-gag]{cursor:pointer}
.logo .gag,.logo .bird,.logo .eyes,.logo .pupils,.logo .head,.logo .wing,.logo .word,.logo .moon,.logo #owl-arm,.logo #owl-hand{transform-box:fill-box}
.logo .gag,.logo .bird{transform-origin:50% 100%}
.logo .eyes,.logo .head,.logo .word,.logo .moon{transform-origin:50% 50%}
.logo .wing,.logo #owl-arm{transform-origin:0 50%}
.logo #b-owl{animation:owl 10s ease-in-out infinite}
.logo #b-owl .eyes{animation:owlEyes 10s linear infinite}
.logo #b-owl .pupils{animation:peek 10s ease-in-out infinite}
.logo #owl-arm{animation:arm 10s ease-in-out infinite}
.logo #owl-hand{animation:hand 10s ease-in-out infinite}
.logo #b-crow{animation:crow 10s ease-in-out infinite}
.logo #b-crow .head{animation:crowHead 10s ease-in-out infinite}
.logo #b-crow .wing{animation:crowWing 10s ease-in-out infinite}
.logo #b-dove{animation:dove 10s ease-in-out infinite}
.logo #b-dove .wing{animation:doveWing 10s linear infinite}
.logo #waves{animation:wavesHide 10s linear infinite}
.logo #waves path{animation:wave 1.6s ease-in-out infinite}
.logo #waves .w2{animation-delay:.18s}
.logo #waves .w3{animation-delay:.36s}
.logo .moon{animation:moonGlow 6s ease-in-out infinite}
@keyframes owl{0%,12%,20%,34%,38%,56%,74%,100%{transform:none}6%{transform:scale(1.025,.975)}
  24%{transform:rotate(3deg)}28%{transform:rotate(5deg)}30.5%{transform:rotate(7deg)}32%{transform:rotate(4deg)}
  40%,44%,48%,52%{transform:rotate(-2.5deg) scale(1.02,.97)}42%,46%,50%,54%{transform:rotate(2.5deg)}
  60%,72%{transform:translateY(-1px) scale(.97,1.04)}}
@keyframes owlEyes{0%,7%,9%,14%,33%,36%,58%,74%,85%,87%,100%{transform:none}8%,86%{transform:scaleY(.08)}
  16%,31%{transform:scaleY(.42)}39%,55%{transform:scaleY(.22)}61%,71%{transform:scale(1.08,1.12)}}
@keyframes peek{0%,12%,36%,58%,74%,100%{transform:none}15%,34%{transform:translate(5px,0)}61%,71%{transform:translate(0,-3px)}}
@keyframes arm{0%,21.9%,36.1%,100%{transform:scaleX(0);opacity:0}22%{transform:scaleX(.05);opacity:1}
  29%,32%{transform:scaleX(1);opacity:1}30.5%{transform:scaleX(1.07);opacity:1}36%{transform:scaleX(.05);opacity:1}}
@keyframes hand{0%,28.6%,34.2%,100%{opacity:0;transform:none}29%,32%{opacity:1;transform:none}30.5%{opacity:1;transform:translateX(4px)}34%{opacity:1;transform:translateX(-7px)}}
@keyframes crow{0%,14%,36%,39%,56%,100%{transform:none}7%{transform:scale(1.02,.98)}
  18%,22%{transform:rotate(-2deg)}27%,33%{transform:rotate(-5deg) translateX(-1px)}
  41%,45%,49%,53%{transform:rotate(3deg) scale(1.02,.97)}43%,47%,51%{transform:rotate(-1deg)}}
@keyframes crowHead{0%,12%,24%,38%,58%,74%,100%{transform:none}15%,17%{transform:rotate(-14deg)}19%{transform:rotate(8deg)}21%{transform:rotate(-6deg)}
  41%,45%,49%,53%{transform:rotate(-20deg)}43%,47%,51%{transform:rotate(-12deg)}56%{transform:rotate(-14deg)}
  61%,71%{transform:rotate(-24deg)}}
@keyframes crowWing{0%,38%,57%,100%{transform:none}40.5%,55%{transform:rotate(-58deg)}}
@keyframes dove{0%,30%,59.5%,76%,100%{transform:none}15%{transform:scale(1.02,.98)}
  31.5%{transform:translate(8px,-3px) rotate(14deg)}33.5%{transform:translate(20px,10px) rotate(45deg)}
  36%{transform:translate(40px,40px) rotate(100deg)}38%{transform:translate(56px,62px) rotate(150deg)}
  40%{transform:translate(66px,58px) rotate(60deg)}42.5%{transform:translate(80px,28px) rotate(-10deg) scale(1.08)}
  45%{transform:translate(86px,-12px) rotate(-22deg) scale(1.15)}47.5%{transform:translate(72px,-58px) rotate(-28deg) scale(1.15)}
  50%{transform:translate(44px,-86px) rotate(-12deg) scale(1.1)}52.5%{transform:translate(18px,-72px) rotate(10deg) scale(1.05)}
  54.5%{transform:translate(5px,-28px) rotate(6deg)}56.5%{transform:translateY(-5px)}58%{transform:scale(1.15,.84)}
  61%,64%,68%,73%{transform:scaleX(-1)}62.5%,66%{transform:scaleX(-1) translateY(-7px)}75%{transform:scale(1.04,.96)}}
@keyframes doveWing{0%,38.9%,56.5%,100%{transform:none}
  39%,42%,45%,48%,51%,54%{transform:rotate(-60deg)}40.5%,43.5%,46.5%,49.5%,52.5%{transform:rotate(14deg)}55.5%{transform:rotate(-30deg)}}
@keyframes wavesHide{0%,29%,62%,100%{opacity:1}31%,60%{opacity:0}}
@keyframes wave{0%,100%{opacity:.18}40%{opacity:1}}
@keyframes moonGlow{50%{transform:scale(1.025)}}
/* 点一下：猫头鹰转一圈，乌鸦蹦高，小鸽子连跳，点月亮或字三只一起蹦 */
.logo .gag.go-owl{animation:gagSpin .9s cubic-bezier(.3,.6,.3,1)}
.logo .gag.go-crow{animation:gagJump .8s ease-out}
.logo .gag.go-dove{animation:gagHop .8s ease-out}
.logo .gag.go-all{animation:gagJump .7s ease-out}
.logo .gag.go-all[data-gag="crow"]{animation-delay:.1s}
.logo .gag.go-all[data-gag="dove"]{animation-delay:.2s}
.logo .word.go-all{animation:wordBoing .7s ease-out}
.logo .gag.go-owl{transform-origin:50% 60%}
@keyframes gagSpin{0%{transform:none}18%{transform:translateY(-14px) scale(.95,1.06)}70%{transform:translateY(-14px) rotate(360deg)}86%{transform:scale(1.08,.92) rotate(360deg)}100%{transform:rotate(360deg)}}
@keyframes gagJump{0%,100%{transform:none}18%{transform:scale(1.12,.84)}45%{transform:translateY(-26px) scale(.92,1.1) rotate(-6deg)}72%{transform:scale(1.12,.88)}86%{transform:scale(.97,1.03)}}
@keyframes gagHop{0%,100%{transform:none}22%{transform:translateY(-15px) rotate(-8deg)}42%{transform:scale(1.1,.9)}62%{transform:translateY(-9px) rotate(8deg)}80%{transform:scale(1.06,.94)}}
@keyframes wordBoing{0%,100%{transform:none}25%{transform:scale(1.06,.92)}50%{transform:scale(.97,1.05)}75%{transform:scale(1.02,.98)}}

/* 子页面空白处点一下：两圈透明水纹漾开 */
.ripple{position:fixed;z-index:9;width:260px;height:260px;margin:-130px 0 0 -130px;pointer-events:none}
.ripple::before,.ripple::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;
  border:1.8px solid rgba(255,255,255,.75);box-shadow:0 0 10px rgba(255,255,255,.35),inset 0 0 14px rgba(255,255,255,.22);
  animation:ripple 1.8s cubic-bezier(.22,.5,.3,1) forwards}
.ripple::after{animation-delay:.28s;inset:16%;border-width:1.3px}
.ripple.on-light::before,.ripple.on-light::after{border-color:rgba(122,90,64,.4);box-shadow:0 0 8px rgba(122,90,64,.12),inset 0 0 12px rgba(122,90,64,.1)}
@keyframes ripple{0%{transform:scale(.12);opacity:.95}45%{opacity:.6}100%{transform:scale(1);opacity:0}}
.home-head h1{font-family:var(--serif);font-size:30px;letter-spacing:.12em;margin:0 0 8px;font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.home-head p{margin:0;font-size:14px;opacity:.75;line-height:1.6}
.shelf-title{position:relative;max-width:520px;margin:0 auto 12px;font-size:13px;letter-spacing:.3em;opacity:.6}
.shelf{position:relative;max-width:520px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.book{position:relative;display:block;aspect-ratio:3/4;border-radius:10px 16px 16px 10px;overflow:hidden;text-align:left;
  box-shadow:0 18px 40px rgba(0,0,0,.5),inset 6px 0 0 rgba(0,0,0,.18);transform-origin:left center;
  animation:bookIn .8s cubic-bezier(.2,.8,.2,1) both,float 6s ease-in-out .8s infinite}
.book:nth-child(2){animation-delay:.12s,.9s}
@keyframes bookIn{from{opacity:0;transform:translateY(30px) rotateY(-14deg)}}
@keyframes float{50%{transform:translateY(-6px)}}
.book-cover{position:absolute;inset:0}
.book-cover img{width:100%;height:100%;object-fit:cover;display:block;animation:coverPan 18s ease-in-out infinite alternate}
@keyframes coverPan{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.12) translateY(-3%)}}
.book::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(20,10,5,.78) 100%)}
.book-shine{position:absolute;inset:-40%;z-index:1;background:linear-gradient(115deg,transparent 42%,rgba(255,240,210,.32) 50%,transparent 58%);animation:shine 5.5s ease-in-out 1.2s infinite}
@keyframes shine{0%{transform:translateX(-60%)}35%,100%{transform:translateX(60%)}}
.book-tag{position:absolute;z-index:2;left:12px;bottom:34px;padding:6px 14px 6px 12px;border-radius:4px 18px 18px 4px;
  background:var(--rust);color:#fff6e8;font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:.12em;box-shadow:0 4px 12px rgba(0,0,0,.35);
  outline:1.2px dashed rgba(255,236,210,.7);outline-offset:-4px}
.book-meta{position:absolute;z-index:2;left:14px;bottom:12px;font-size:12px;color:rgba(255,246,232,.85)}
.book:active{transform:scale(.97)}
.book.opening{animation:bookOpen .55s cubic-bezier(.5,0,.3,1) forwards;z-index:5}
@keyframes bookOpen{to{transform:perspective(900px) rotateY(-70deg) scale(1.15);opacity:0}}
.plank{position:relative;max-width:540px;height:16px;margin:-4px auto 0;border-radius:3px;background:linear-gradient(180deg,#8a5a34,#5e3a20 70%,#3e2614);box-shadow:0 10px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,220,170,.35)}
.candle-glow{position:fixed;width:340px;height:340px;left:-120px;top:-110px;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(255,184,92,.30),rgba(255,150,60,0) 65%);animation:flicker 3.2s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:.85;transform:scale(1)}23%{opacity:1;transform:scale(1.03)}41%{opacity:.75}67%{opacity:.95;transform:scale(.98)}}
.book-soon{display:flex;align-items:center;justify-content:center;border:1.5px dashed rgba(246,236,216,.3);box-shadow:none;background:rgba(255,255,255,.03)}
.book-soon::after{display:none}
.soon-text{font-size:13px;text-align:center;line-height:1.8;opacity:.55}
.install-tip{position:relative;max-width:520px;margin:28px auto 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.07);font-size:13px;line-height:1.7;color:rgba(246,236,216,.85)}
.install-tip b{color:#fff}

/* ---------- 故事页 ---------- */
#story{background:var(--cream) var(--grain)}
.story-hero{position:relative;height:min(62vw,340px);overflow:hidden;background:#2a1a10}
.story-banner{position:absolute;inset:-4%;background-size:cover;background-position:0% 50%;animation:bannerPan 40s ease-in-out infinite alternate}
@keyframes bannerPan{from{background-position:0% 40%;transform:scale(1.05)}to{background-position:100% 60%;transform:scale(1.12)}}
.story-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 30%,rgba(246,236,216,.35) 62%,rgba(246,236,216,.92) 88%,var(--cream) 100%)}
.story-hero .deckle{position:absolute;left:0;right:0;bottom:-1px;height:18px;z-index:2;color:var(--cream)}
.sprig{display:block;width:150px;height:26px;margin:4px auto 16px;opacity:.85}
.back{position:absolute;z-index:3;top:calc(var(--safe-t) + 10px);left:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,12,8,.45);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.story-hero-text{position:absolute;z-index:2;left:20px;right:20px;bottom:6px}
.story-title{margin:0;font-family:var(--serif);font-size:34px;letter-spacing:.14em;color:var(--ink)}
.story-sub{font-size:13px;color:var(--ink2);margin-top:4px}
.story-body{padding:8px 20px calc(var(--safe-b) + 30px);max-width:640px;margin:0 auto}
.story-intro{font-size:15px;line-height:1.85;color:#5a4030;margin:10px 0 18px}
.story-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:26px;background:var(--rust);color:#fff8ec;font-size:17px;font-weight:600;
  box-shadow:0 8px 20px rgba(176,74,38,.35);transition:transform .15s;outline:1.2px dashed rgba(255,236,210,.6);outline-offset:-5px}
.btn-primary:active{transform:scale(.97)}
.btn-primary svg{fill:currentColor;stroke:none}
.btn-ghost{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:22px;border:1.5px solid rgba(122,90,64,.35);color:var(--ink2);font-size:14px}
.btn-ghost svg{width:20px;height:20px}
.btn-ghost.done{border-color:rgba(93,106,57,.5);color:var(--moss)}
.scene-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.scene{display:flex;gap:14px;align-items:center;padding:10px;border-radius:18px 14px 20px 13px/14px 19px 13px 18px;background:rgba(255,251,242,.82) var(--grain);
  border:1.3px solid rgba(110,75,45,.26);box-shadow:0 3px 0 rgba(110,75,45,.08),0 6px 16px rgba(90,60,30,.08);
  opacity:0;animation:sceneIn .6s cubic-bezier(.2,.8,.2,1) forwards;transition:transform .15s}
.scene:nth-child(odd){--tilt:-1.6deg}.scene:nth-child(even){--tilt:1.4deg}
.scene:active{transform:scale(.98)}
@keyframes sceneIn{from{opacity:0;transform:translateY(22px) rotate(var(--tilt,0))}to{opacity:1;transform:none}}
.scene-thumb{position:relative;flex:none;width:74px;height:74px;border-radius:14px 11px 15px 10px/11px 15px 10px 14px;overflow:hidden;background:#d8c6a4;box-shadow:inset 0 0 0 1.5px rgba(63,42,27,.35)}
.scene-thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(63,42,27,.35),inset 0 0 12px rgba(63,42,27,.25)}
.scene-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 6s ease-out}
.scene:hover .scene-thumb img{transform:scale(1.12)}
.scene-thumb .bar{position:absolute;left:0;bottom:0;height:4px;background:var(--amber)}
.scene-text{flex:1;min-width:0}
.scene-label{font-size:12px;color:var(--rust);letter-spacing:.1em}
.scene-title{font-family:var(--serif);font-size:18px;font-weight:700;margin:2px 0 3px;color:var(--ink)}
.scene-desc{font-size:12.5px;color:var(--ink2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.scene-dur{flex:none;align-self:flex-start;font-size:12px;color:var(--ink2);padding-top:2px;text-align:right;min-width:40px}
.scene-dur .ok{display:block;margin-top:6px;color:var(--moss);font-size:16px}
.scene.current{box-shadow:0 0 0 2px var(--amber),0 4px 14px rgba(90,60,30,.15)}
.story-foot{margin-top:26px;text-align:center;font-size:11.5px;color:rgba(122,90,64,.7)}
.story-foot .sep{margin:0 .9em;opacity:.6}

/* ---------- 播放页 ---------- */
#player{background:#120c08;overflow:hidden;color:#fff8ec}
.stage{position:absolute;inset:0;overflow:hidden;background:center/cover no-repeat}
.stage-inner{position:absolute;left:0;top:0;width:941px;height:1672px;transform-origin:0 0;opacity:0;transition:opacity .9s ease}
.stage-inner.ready{opacity:1}
.stage-inner img{position:absolute;transform-origin:0 0;will-change:transform;user-select:none;-webkit-user-drag:none;pointer-events:none}
.stage-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage-vignette{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,6,3,.55) 0%,rgba(10,6,3,0) 18%,rgba(10,6,3,0) 55%,rgba(10,6,3,.82) 100%),radial-gradient(130% 90% at 50% 45%,transparent 60%,rgba(10,6,3,.45) 100%)}
.stage-loading{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);display:flex;gap:8px;transition:opacity .4s}
.stage-loading span{width:11px;height:11px;border-radius:50%;background:#a97c50;animation:dot 1s ease-in-out infinite;box-shadow:0 0 0 1.5px rgba(255,248,236,.5)}
.stage-loading span:nth-child(2){background:#2f2c36}.stage-loading span:nth-child(3){background:#f6f2e8}
.stage-loading span:nth-child(2){animation-delay:.15s}.stage-loading span:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-8px);opacity:.4}}
.stage-inner.ready ~ .stage-loading{opacity:0}
.p-top{position:absolute;left:0;right:0;top:0;padding-top:var(--safe-t);height:calc(var(--safe-t) + 60px);display:flex;align-items:center;justify-content:center}
.p-top .back{top:calc(var(--safe-t) + 10px)}
.p-title{text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.p-title small{display:block;font-size:12px;letter-spacing:.2em;opacity:.8}
.p-title b{font-family:var(--serif);font-size:19px;letter-spacing:.1em}
.p-timer{position:absolute;right:12px;top:calc(var(--safe-t) + 10px);height:40px;padding:0 12px;border-radius:20px;display:flex;align-items:center;gap:5px;
  background:rgba(20,12,8,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px}
.p-timer svg{width:18px;height:18px}
.p-timer.on{background:rgba(217,150,58,.85);color:#2a1606}
.p-bottom{position:absolute;left:0;right:0;bottom:0;padding:0 22px calc(var(--safe-b) + 22px);max-width:560px;margin:0 auto}
.p-progress input{width:100%;-webkit-appearance:none;appearance:none;height:28px;background:transparent;margin:0}
.p-progress input::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:repeating-linear-gradient(90deg,#e0543a 0 7px,transparent 7px 11px) 0 0/var(--p,0%) 100% no-repeat,
             repeating-linear-gradient(90deg,rgba(255,248,236,.4) 0 3px,transparent 3px 7px)}
.p-progress input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border:0;background:var(--snowdrop) center/contain no-repeat;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.p-progress input::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,248,236,.28)}
.p-progress input::-moz-range-progress{height:4px;border-radius:2px;background:var(--amber)}
.p-progress input::-moz-range-thumb{width:26px;height:26px;border:0;background:var(--snowdrop) center/contain no-repeat}
.p-times{display:flex;justify-content:space-between;font-size:12px;opacity:.8;margin-top:-2px;font-variant-numeric:tabular-nums}
.p-controls{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.p-controls button{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;transition:transform .15s,background .2s}
.p-controls button:active{transform:scale(.9);background:rgba(255,255,255,.12)}
.p-controls svg{width:28px;height:28px}
.p-controls svg text{font-size:7px;fill:currentColor;stroke:none;text-anchor:middle;font-family:var(--sans);font-weight:700}
[data-prev] svg path:last-child,[data-next] svg path:last-child{fill:currentColor}
.p-play{width:76px!important;height:76px!important;background:#fff8ec!important;color:#2a1606;box-shadow:0 6px 24px rgba(0,0,0,.45)}
.p-play svg{width:34px;height:34px}
.p-play .i-play{fill:currentColor;stroke:none;margin-left:4px}
.p-play .i-pause{stroke-width:3.4}
.p-play .i-pause,#player.playing .p-play .i-play{display:none}
#player.playing .p-play .i-pause{display:block}
.toast{position:absolute;left:50%;top:calc(var(--safe-t) + 72px);transform:translateX(-50%);padding:9px 16px;border-radius:18px;background:rgba(20,12,8,.75);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;white-space:nowrap;animation:toast 2.4s ease both}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-6px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.scene-switch{animation:sceneSwitch .7s ease both}
@keyframes sceneSwitch{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}

@media (min-width:700px){
  .shelf{grid-template-columns:1fr 1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .logo *{animation:none!important}
  .ripple{display:none}
}
#story > .story-hero .back{position:fixed}
.p-top,.p-bottom{z-index:6}
.toast{z-index:7}