*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:#000;overflow:hidden;color:#eee;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;touch-action:none;user-select:none}
canvas{display:block;position:fixed;inset:0}
#sub{position:fixed;left:6%;right:6%;top:calc(var(--fb) - 3.2em);text-align:center;font-size:clamp(14px,2.2vw,22px);text-shadow:0 2px 6px #000,0 0 2px #000;pointer-events:none;font-weight:500;line-height:1.3}
@media (orientation:portrait){#sub{top:calc(var(--fb) + 14px)}}
#top{position:fixed;top:10px;left:12px;right:12px;display:flex;gap:10px;align-items:center;font:13px Georgia,serif;letter-spacing:.08em;color:#c9b99f;transition:opacity .6s}
#top #ep{flex:1}#epb{background:rgba(255,255,255,.1);color:#eee;border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:6px 12px;font-size:13px}
#eps{display:none;position:absolute;right:0;top:36px;background:rgba(10,10,10,.92);border:1px solid #333;border-radius:10px;padding:6px;z-index:5}#eps.open{display:block}
#eps button{display:block;width:100%;text-align:left;background:none;border:0;color:#ddd;padding:9px 12px;font:14px Georgia,serif}#eps button.on{color:#f3b86a}
#ctl{position:fixed;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .6s}
#prog{width:min(560px,86vw);height:14px;display:flex;align-items:center;cursor:pointer}#prog::before{content:'';position:absolute}#prog{background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)) center/100% 3px no-repeat}#progIn{height:3px;background:#f3b86a;width:0}
#bar{display:flex;gap:10px}#bar button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(20,20,20,.6);color:#eee;font-size:17px}
#play .pl,#play .re,#snd .of{display:none}#play.paused .pa{display:none}#play.paused .pl{display:inline}#play.ended .pl,#play.ended .pa{display:none}#play.ended .re{display:inline}#snd.off .on{display:none}#snd.off .of{display:inline}
body.idle #ctl,body.idle #top{opacity:0}
#title{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 60% 40%,rgba(120,60,20,.55),#000 70%);z-index:10;transition:opacity 1s}#title.gone{opacity:0;pointer-events:none}
.tt{text-align:center;padding:20px}.k{letter-spacing:.35em;font-size:12px;color:#b8a890}h1{font:italic clamp(64px,14vw,140px) Georgia,serif;color:#f1e3c8;text-shadow:0 0 40px rgba(255,160,80,.4)}.d{font:15px Georgia,serif;color:#cdbca0;margin:6px 0 26px}
#start{font:600 20px system-ui;padding:16px 44px;border-radius:40px;border:0;background:#f3b86a;color:#2a1608;box-shadow:0 0 30px rgba(243,184,106,.45)}.h{margin-top:18px;font-size:12px;color:#8d826f}