:root{--bg:#0b0d14;--acc:#fff;--heart:#ffb347}
#app{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}
.bg{position:absolute;inset:-10%;background:center/cover;filter:blur(46px) saturate(1.5) brightness(.65);transform:scale(1.15) translateZ(0);opacity:0;transition:opacity .9s ease;will-change:opacity}.bg.on{opacity:1}
.shade{position:absolute;inset:0;background:radial-gradient(80% 50% at 50% 0,rgba(120,90,255,.25),transparent),linear-gradient(transparent 50%,rgba(0,0,0,.45))}
.top{position:relative;z-index:5;padding:calc(12px + env(safe-area-inset-top)) 16px 6px;display:grid;gap:10px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;letter-spacing:-.03em}.brand svg{color:#ffb347;font-size:22px}.brand small{margin-left:auto;font-size:12px;font-weight:600;opacity:.6;letter-spacing:0}
.stage{position:relative;flex:1;min-height:0;touch-action:pan-y;perspective:1200px}
.cc{position:absolute;left:50%;top:14px;bottom:86px;width:min(72vw,300px);margin-left:calc(min(72vw,300px)/-2);transform-origin:50% 120%;will-change:transform}
.card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.9,.2,1)}
.cc.flip .card{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:30px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.2) inset}
.front img{width:100%;height:100%;object-fit:cover}
.front::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.55));pointer-events:none}
.cap{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;padding:14px 16px;border-radius:22px;display:flex;align-items:center;gap:10px}
.cap div{flex:1;min-width:0}.cap h2{font-size:21px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cap p{font-size:13px;opacity:.75;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kind{position:absolute;top:14px;left:14px;z-index:2;padding:5px 11px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.fav{position:absolute;top:10px;right:10px;z-index:3}
.back{transform:rotateY(180deg);padding:24px 20px 22px;display:flex;flex-direction:column;justify-content:flex-start;gap:16px;overflow:hidden;background:rgba(20,18,40,.55)}
.back .blur{position:absolute;inset:-20%;background:center/cover;filter:blur(30px) saturate(1.6) brightness(.55);z-index:-1}
.back h2{font-size:24px;letter-spacing:-.02em;padding-right:44px}.back .blurb{font-size:13px;line-height:1.45;opacity:.8;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.back dl{display:grid;grid-template-columns:auto 1fr;gap:11px 14px;font-size:14px;padding:14px 0;border-block:1px solid rgba(255,255,255,.14)}.back dt{opacity:.55}.back dd{font-weight:600;text-align:right}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}.tags span{padding:5px 10px;border-radius:99px;font-size:12px;background:rgba(255,255,255,.14)}
.back .e{display:flex;align-items:center;justify-content:space-between;font-size:13px}.back .e b{opacity:.55;font-weight:400}
.hint{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;justify-content:center;z-index:5;pointer-events:none}
.scrub{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;width:min(86vw,360px)}
.scrub span{font-size:12px;font-weight:700;min-width:62px;text-align:center;font-variant-numeric:tabular-nums;opacity:.85}
.scrub input{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:rgba(255,255,255,.25)}
.scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.scrub input::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.top>*{animation:rise .6s both}.top>*:nth-child(2){animation-delay:.06s}.top>*:nth-child(3){animation-delay:.12s}