:root{--gold: #c9a227;--gold-bright: #f2d472;--wood: #2a1a0d;--wine: #6e1f1f;--ink: #4a2f18}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{font-family:EB Garamond,Georgia,serif;background:radial-gradient(ellipse at center,#1a1108,#000 85%);color:#f4e6c6;overflow:hidden}.stage{position:fixed;top:0;right:0;bottom:0;left:0;isolation:isolate;transform-style:preserve-3d;perspective:1000px}.embers{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(2px 2px at 20% 80%,rgba(255,170,60,.4),transparent),radial-gradient(2px 2px at 70% 60%,rgba(255,140,40,.3),transparent);animation:flicker 4s infinite alternate}@keyframes flicker{0%{opacity:.6}to{opacity:1}}.frame-wrap{position:absolute;top:0;right:0;bottom:0;left:0;transform:translateZ(-10px);transform-style:preserve-3d}.frame-box{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform:scale(1.01)}.frame-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;width:100%;height:100%;object-fit:fill;pointer-events:none;transform:translateZ(10px) scale(.99)}.video-hole{position:absolute;z-index:1;background:#000;overflow:hidden}.yt-player{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.yt-player iframe{display:block;border:0}.idle{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;background:radial-gradient(ellipse at center,#1a1006,#000);color:var(--gold-bright)}.idle-crest{font-size:56px;filter:drop-shadow(0 0 12px rgba(242,212,114,.5))}.idle h2{font-family:Cinzel Decorative,serif;margin:0;font-size:clamp(20px,3vw,38px)}.idle p{margin:0;font-style:italic;opacity:.8;font-size:clamp(13px,1.5vw,18px)}.idle-flame{margin-top:10px;letter-spacing:8px;color:var(--gold);animation:flicker 2s infinite alternate}.paused-badge{position:absolute;top:16px;left:16px;background:#140c06d9;border:1px solid var(--gold);color:var(--gold-bright);font-family:Cinzel,serif;font-size:15px;letter-spacing:1px;padding:7px 13px;border-radius:6px;z-index:5}.scroll-panel{position:absolute;top:8px;right:12px;width:300px;z-index:40;transform:translateZ(20px);transition:height .7s cubic-bezier(.22,1,.36,1),opacity .5s ease;overflow:hidden}.scroll-panel.full{height:calc(100vh - 60px);opacity:1}.scroll-panel.mini{height:0;opacity:0;pointer-events:none}.scroll-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-image:url(/pergamino.png);background-size:100% 100%;background-repeat:no-repeat;filter:drop-shadow(0 8px 30px rgba(0,0,0,.7));pointer-events:none}.scroll-content{position:relative;z-index:1;height:100%;padding:64px 40px 60px;overflow-y:auto;color:var(--ink);transition:opacity .4s ease;scrollbar-width:thin;scrollbar-color:rgba(120,70,30,.5) transparent}.scroll-panel.mini .scroll-content{opacity:0}.scroll-content::-webkit-scrollbar{width:6px}.scroll-content::-webkit-scrollbar-thumb{background:#78461e80;border-radius:3px}.scroll-top{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px}.scroll-brand{font-family:Cinzel Decorative,serif;font-size:19px;color:#5a3210;margin:0;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.3)}.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.dot.on{background:#4e7a3a;box-shadow:0 0 6px #4e7a3a}.dot.off{background:#b07a2a}.np{background:linear-gradient(180deg,#6e1f1fe6,#4a1414e6);border:1px solid var(--gold);border-radius:8px;padding:11px;margin-bottom:16px;display:flex;flex-direction:column;gap:3px}.np-label{font-family:Cinzel,serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-bright)}.np-title{font-weight:600;font-size:16px;color:#fff}.np-by{font-style:italic;font-size:13px;color:#f0d9b0}.q-head{font-family:Cinzel,serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#6b4a1c;border-bottom:1px solid rgba(120,80,40,.4);padding-bottom:6px;margin-bottom:10px;text-align:center}.q-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.q-empty{font-style:italic;opacity:.6;font-size:14px;text-align:center}.q-item{display:flex;gap:10px;align-items:center}.q-num{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--wood);color:var(--gold-bright);font-family:Cinzel,serif;font-size:13px;display:grid;place-items:center}.q-info{min-width:0}.q-song{display:block;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#3a2912}.q-by{display:block;font-size:12px;font-style:italic;color:#7a5a28}@media (max-width: 640px){.scroll-panel{width:64vw;right:10px}}