@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0b0b0d;color:#f6f4f3;font-family:'DM Sans',system-ui,sans-serif}button,select,input{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}.showcase{min-height:100dvh;background:radial-gradient(ellipse 55% 35% at 50% -5%,#292124 0%,transparent 100%),#0b0b0d;overflow:hidden}.site-header{max-width:1450px;margin:auto;padding:24px clamp(18px,4vw,50px);display:flex;justify-content:space-between;align-items:center;gap:12px}.logo{display:flex;align-items:center;gap:5px;font-family:Outfit,sans-serif;font-weight:500;font-size:16px}.logo b{color:#ff5066}.logo .lite{font-weight:400;color:#c4b8bc}.flame{font-size:24px;margin-right:7px}.back{border:1px solid #ffffff30;border-radius:24px;padding:10px 17px;font-size:12px;color:#e3dfe0}.intro{position:relative;text-align:center;padding:clamp(16px,2vw,32px) 18px 0;max-width:820px;margin:auto;z-index:2}.eyebrow{font-size:10px;letter-spacing:3px;color:#f27383;font-weight:800}.intro h1{font-family:Outfit,sans-serif;font-weight:700;font-size:clamp(34px,5vw,60px);letter-spacing:-2.2px;margin:12px 0 7px}.intro h1 span{color:#ff526a}.intro-desc{font-size:14px;color:#b3aaae;margin:0 0 22px}.music-inline{display:flex;align-items:center;gap:12px;margin:0 auto;max-width:420px;padding:9px 15px;border:1px solid #ffffff28;border-radius:60px;background:#1d1a1df2;box-shadow:0 8px 24px #0004}.music-play{width:37px;height:37px;flex:none;border:0;border-radius:50%;background:#ff4d65;color:#fff;font-size:15px}.music-label{text-align:left;min-width:0;flex:1}.music-label span{display:block;font-size:9px;letter-spacing:1.4px;color:#e1a7b1;font-weight:800}.music-label strong{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px;margin-top:3px}.wave{height:18px;display:flex;align-items:center;gap:3px}.wave i{display:block;width:3px;height:8px;border-radius:3px;background:#fc7385;animation:wave .7s infinite alternate}.wave i:nth-child(2){height:15px;animation-delay:.2s}.wave i:nth-child(3){height:11px;animation-delay:.35s}.wave i:nth-child(4){height:17px;animation-delay:.1s}.wave i:nth-child(5){height:6px;animation-delay:.25s}.volume{display:flex;align-items:center;gap:7px;color:#f38b9a}.volume input{width:65px;accent-color:#ff536a}.tip-text{margin:22px auto 0;max-width:620px;min-height:112px}.tip-eyebrow{color:#e8a2ae;font-size:10px;letter-spacing:2px;font-weight:800}.tip-text h2{font-size:clamp(15px,2.2vw,21px);font-weight:500;line-height:1.3;margin:8px 0}.tip-text p{color:#c5bfc1;font-size:13px;line-height:1.55;margin:0 auto;max-width:570px;white-space:pre-line}.language{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:10px;color:#9f9298}.language select,.meta select{border:0;background:transparent;color:#eee;font-size:11px;cursor:pointer}.language option,.meta option{background:#181519}.carousel-section{position:relative;margin-top:8px}.carousel-window{width:100%;height:clamp(290px,48dvh,560px);overflow:hidden;position:relative;isolation:isolate}.slide-rail{height:100%;width:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.rail-item{position:absolute;width:clamp(230px,31vw,420px);height:calc(100% - 22px);display:grid;place-items:center;overflow:hidden;border-radius:16px;background:#201b20;box-shadow:0 16px 38px #000b;transition:transform .7s cubic-bezier(.22,.75,.2,1),opacity .7s ease,filter .7s ease;will-change:transform}.rail-item img{display:block;width:100%;height:100%;object-fit:contain!important;object-position:center!important}.rail-center{z-index:3;transform:translateX(0) scale(1);opacity:1;background:#161316}.rail-left{z-index:2;transform:translateX(calc(-1 * clamp(190px,31vw,420px))) scale(.86);opacity:.8;filter:brightness(.8)}.rail-right{z-index:2;transform:translateX(clamp(190px,31vw,420px)) scale(.86);opacity:.8;filter:brightness(.8)}.slide-rail.go-next .rail-center{transform:translateX(calc(-1 * clamp(190px,31vw,420px))) scale(.86);opacity:.8;filter:brightness(.8)}.slide-rail.go-next .rail-right{transform:translateX(0) scale(1);opacity:1;filter:none;z-index:4}.slide-rail.go-next .rail-left{transform:translateX(calc(-2 * clamp(190px,31vw,420px))) scale(.7);opacity:0}.slide-rail.go-prev .rail-center{transform:translateX(clamp(190px,31vw,420px)) scale(.86);opacity:.8;filter:brightness(.8)}.slide-rail.go-prev .rail-left{transform:translateX(0) scale(1);opacity:1;filter:none;z-index:4}.slide-rail.go-prev .rail-right{transform:translateX(calc(2 * clamp(190px,31vw,420px))) scale(.7);opacity:0}.image-loading{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:11px;background:#100e10e8;border-radius:20px;padding:8px 12px;white-space:nowrap}.image-loading[hidden]{display:none}.carousel-actions{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:15px;margin-top:12px}.carousel-actions button{background:#1b191c;border:1px solid #ffffff2c;color:#eee;width:36px;height:36px;border-radius:50%;font-size:23px;line-height:1}.carousel-actions .center-play{width:44px;height:44px;background:#ff536a;border-color:#ff536a;font-size:16px}.carousel-footer{max-width:680px;margin:14px auto 0;padding:0 16px}.dots{display:flex;justify-content:center;align-items:center;gap:6px;min-height:15px}.dot{display:block;width:4px;height:4px;border-radius:50%;background:#716a6f;transition:.2s}.dot.active{width:7px;height:7px;background:#ff5c73}.meta{display:flex;justify-content:center;align-items:center;gap:12px;color:#8d8389;font-size:11px;margin:8px auto 0}.meta button{border:0;background:transparent;color:#c3b9bd;font-size:15px}.progress-track{width:85px;height:3px;background:#4d4047;border-radius:8px;overflow:hidden}.progress-track span{display:block;width:0;height:100%;background:#ff536a}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}footer{text-align:center;font-size:10px;letter-spacing:2px;color:#7f7379;padding:24px 15px 30px}footer span{color:#ed6174}.empty[hidden]{display:none}.empty{position:fixed;inset:0;background:#09090ae8;z-index:20;display:grid;place-content:center;text-align:center}.empty a{background:#e53b55;padding:12px;border-radius:20px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;transition:.2s;background:#292126;padding:10px 17px;border-radius:9px;z-index:25;pointer-events:none}.toast.visible{opacity:1;transform:translate(-50%,0)}@keyframes wave{to{height:3px}}@media(max-width:650px){.site-header{padding:15px}.logo{font-size:13px}.logo .lite{display:none}.back{font-size:10px;padding:8px 11px}.intro{padding-top:8px}.intro h1{font-size:35px}.intro-desc{font-size:12px}.tip-text{margin-top:17px;min-height:140px}.tip-text p{font-size:12px}.carousel-window{height:min(48dvh,490px);min-height:280px}.rail-item{width:min(69vw,360px);height:calc(100% - 12px)}.rail-left{transform:translateX(-61vw) scale(.8)}.rail-right{transform:translateX(61vw) scale(.8)}.slide-rail.go-next .rail-center{transform:translateX(-61vw) scale(.8)}.slide-rail.go-prev .rail-center{transform:translateX(61vw) scale(.8)}.slide-rail.go-next .rail-left{transform:translateX(-115vw) scale(.7)}.slide-rail.go-prev .rail-right{transform:translateX(115vw) scale(.7)}.music-inline{max-width:340px}.wave{display:none}footer{font-size:8px}}@media(prefers-reduced-motion:reduce){.rail-item{transition-duration:.1s}.wave i{animation:none}}
/* v15: full color original photo, responsive entire artwork */
.carousel-window{height:clamp(380px,72dvh,940px)!important;overflow:hidden!important;display:grid;place-items:center}
.slide-rail{height:100%;width:100%;overflow:hidden!important}
.rail-item{width:var(--photo-width,min(75vw,580px))!important;height:calc(100% - 16px)!important;overflow:visible!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;display:flex;align-items:center;justify-content:center}
.rail-item img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;filter:none!important;mix-blend-mode:normal!important;border-radius:14px;box-shadow:0 10px 38px #000a}
.rail-center{filter:none!important;opacity:1!important}
.rail-left{transform:translateX(calc(-1 * var(--photo-width,580px) * .9)) scale(.78)!important;opacity:.55!important;filter:none!important}
.rail-right{transform:translateX(calc(var(--photo-width,580px) * .9)) scale(.78)!important;opacity:.55!important;filter:none!important}
.slide-rail.go-next .rail-center{transform:translateX(calc(-1 * var(--photo-width,580px) * .9)) scale(.78)!important;opacity:.55!important}
.slide-rail.go-next .rail-right{transform:translateX(0) scale(1)!important;opacity:1!important;z-index:5!important}
.slide-rail.go-next .rail-left{transform:translateX(calc(-2 * var(--photo-width,580px))) scale(.7)!important;opacity:0!important}
.slide-rail.go-prev .rail-center{transform:translateX(calc(var(--photo-width,580px) * .9)) scale(.78)!important;opacity:.55!important}
.slide-rail.go-prev .rail-left{transform:translateX(0) scale(1)!important;opacity:1!important;z-index:5!important}
.slide-rail.go-prev .rail-right{transform:translateX(calc(2 * var(--photo-width,580px))) scale(.7)!important;opacity:0!important}
.music-skip{border:1px solid #ffffff28;color:#f6e9ee;background:#2d252b;border-radius:50%;width:32px;height:32px;flex:none;cursor:pointer}
.music-inline{max-width:510px;gap:9px}
.autoplay-status{color:#ffb7bf;font-size:11px;min-height:16px;margin:5px 0 0}
@media(max-width:650px){.carousel-window{height:min(69dvh,800px)!important;min-height:390px!important}.rail-item{height:calc(100% - 10px)!important}.rail-left{transform:translateX(-88vw) scale(.76)!important}.rail-right{transform:translateX(88vw) scale(.76)!important}.slide-rail.go-next .rail-center{transform:translateX(-88vw) scale(.76)!important}.slide-rail.go-prev .rail-center{transform:translateX(88vw) scale(.76)!important}.music-inline{max-width:100%}.volume input{width:48px}}
/* BFP official seal centered above the Bagabag eyebrow */
.bfp-logo-header{display:flex;justify-content:center;align-items:center;margin:0 auto 16px}
.bfp-header-logo{display:block;width:110px;height:110px;max-width:100%;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(0,0,0,.28))}
@media(max-width:650px){.bfp-logo-header{margin-bottom:12px}.bfp-header-logo{width:85px;height:85px}}
