body.has-player{padding-bottom:104px}

.po-hero{position:relative;padding:150px 0 150px;background:var(--green-dark);color:var(--cream);overflow:hidden}
.po-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 10%,rgba(143,29,44,.5),transparent 48%),radial-gradient(circle at 8% 90%,rgba(40,98,80,.75),transparent 55%)}
.po-hero .container{position:relative;z-index:2}
.po-hero .section-kicker{color:#f0b8c0;font-size:14px}
.po-hero h1{margin:0 0 14px;font-size:clamp(36px,5.6vw,68px);font-weight:700;line-height:1.35}
.po-lead{max-width:560px;margin:0 0 48px;color:rgba(246,241,232,.75);font-size:18px}
.po-feature{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:44px;max-width:900px;padding:28px 44px 28px 28px;border:1px solid rgba(246,241,232,.18);border-radius:28px;background:rgba(246,241,232,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.po-feature-cover{position:relative;width:240px;aspect-ratio:1;margin-inline-end:40px}
.po-feature-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.po-feature h2{margin:8px 0 0;font-size:clamp(24px,3vw,36px);font-weight:700;line-height:1.5}
.po-feature p{margin:8px 0 18px;color:rgba(246,241,232,.78);font-size:16px}
.po-feature .pcard-meta{color:rgba(246,241,232,.65)}
.po-feature .acard-cat{padding:0 14px;border-radius:999px;background:var(--red);color:#fff;font-size:13px;font-weight:600;line-height:30px;box-shadow:0 8px 18px rgba(0,0,0,.25)}
.po-feature .hero-primary{border:0;cursor:pointer}
.po-feature .pcard-disc{animation:discSpin 6s linear infinite;transform:translateX(-34%)}

.po-wave{position:absolute;inset:auto 0 0;z-index:1;height:110px;display:flex;align-items:flex-end;justify-content:center;gap:5px;padding:0 14px;opacity:.55;-webkit-mask:linear-gradient(transparent,#000 70%);mask:linear-gradient(transparent,#000 70%)}
.po-wave i{flex:1;max-width:14px;height:var(--h,40%);border-radius:8px 8px 0 0;background:linear-gradient(180deg,#ffb3bd,var(--red));transform-origin:bottom;animation:wave 1.6s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
body.is-playing .po-wave i{animation-duration:.6s}
@keyframes wave{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

.po-grid{grid-template-columns:repeat(5,1fr);gap:40px 34px}
.pcard{display:flex;flex-direction:column;animation:mpIn .6s var(--ease) both}
.pcard-cover{position:relative;aspect-ratio:1}
.pcard-disc{position:absolute;inset:5%;z-index:0;border-radius:50%;background:radial-gradient(circle,var(--red) 0 13%,#0d1f1a 14% 18%,transparent 19%),repeating-radial-gradient(circle,#13261f 0 2px,#0b1914 3px 5px);box-shadow:0 8px 20px rgba(0,0,0,.3);transition:transform .6s var(--ease)}
.pcard-art{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:18px;background:linear-gradient(135deg,var(--green),#286250);box-shadow:0 12px 30px rgba(16,45,38,.18);cursor:pointer}
.pcard-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pcard:hover .pcard-art img{transform:scale(1.07)}
.pcard-art::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(10,35,29,.5));pointer-events:none}
.pcard:hover .pcard-disc,.pcard.playing .pcard-disc{transform:translateX(-14%)}
.pcard.playing .pcard-disc{animation:discSpin 4s linear infinite}
@keyframes discSpin{to{rotate:360deg}}
.pcard-play{position:absolute;z-index:3;inset:0;margin:auto;width:54px;height:54px;border:0;border-radius:50%;background:var(--red);box-shadow:0 0 0 8px rgba(143,29,44,.28);opacity:0;transform:scale(.7);transition:opacity .3s,transform .4s var(--ease)}
.pcard-play::before{content:"";position:absolute;inset:0;margin:auto;width:15px;height:18px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%);transform:translateX(2px)}
.pcard:hover .pcard-play,.pcard-play:focus-visible{opacity:1;transform:none}
.pcard.playing .pcard-play::before{width:14px;clip-path:polygon(0 0,32% 0,32% 100%,0 100%,0 0,68% 0,100% 0,100% 100%,68% 100%,68% 0);transform:none}
.pcard-eq{position:absolute;z-index:2;inset-inline-start:12px;bottom:12px;height:20px;display:none;align-items:flex-end;gap:3px}
.pcard.playing .pcard-eq{display:flex}
.pcard-eq i{width:4px;height:100%;border-radius:2px;background:#fff;transform-origin:bottom;animation:wave .7s ease-in-out infinite alternate}
.pcard-eq i:nth-child(2){animation-delay:.2s}.pcard-eq i:nth-child(3){animation-delay:.4s}.pcard-eq i:nth-child(4){animation-delay:.1s}
.pcard-body{display:flex;flex-direction:column;flex:1;margin-top:16px}
.pcard-cat{align-self:flex-start;color:var(--red);font-size:12.5px;font-weight:700}
.pcard-title{margin:4px 0 2px;font-size:16.5px;font-weight:700;line-height:1.7;transition:color .25s}
.pcard:hover .pcard-title,.pcard.playing .pcard-title{color:var(--red)}
.pcard-meta{display:flex;align-items:center;gap:8px;color:var(--gray);font-size:12.5px}
.pcard-meta i{width:3px;height:3px;border-radius:50%;background:var(--red)}
.pcard-desc{margin:8px 0 0;color:var(--gray);font-size:13.5px;line-height:1.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.pbar{position:fixed;inset:auto 0 0;z-index:900;padding:12px 0;background:rgba(16,45,38,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(246,241,232,.14);color:var(--cream);animation:pbUp .5s var(--ease)}
.pbar[hidden]{display:none}
@keyframes pbUp{from{transform:translateY(100%)}to{transform:none}}
.pbar-in{width:min(var(--container),calc(100% - 40px));margin-inline:auto;display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:24px}
.pbar-info{display:flex;align-items:center;gap:14px;min-width:0}
.pbar-info img{width:56px;height:56px;flex-shrink:0;border-radius:12px;object-fit:cover;background:var(--green)}
.pbar-info div{display:flex;flex-direction:column;min-width:0}
.pbar-info strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar-info span{color:rgba(246,241,232,.6);font-size:12.5px}
.pbar-main{display:flex;flex-direction:column;align-items:center;gap:4px}
.pbar-btns{display:flex;align-items:center;gap:14px}
.pb-btn{min-width:38px;height:38px;padding:0 8px;border:0;border-radius:10px;background:transparent;color:#fff;font-size:17px;transition:background .2s}
.pb-btn:hover{background:rgba(255,255,255,.16)}
.pb-txt{font-size:13px;font-weight:700}
.pb-play{width:48px;height:48px;border:0;border-radius:50%;background:var(--red);color:#fff;font-size:17px;box-shadow:0 6px 18px rgba(143,29,44,.5);transition:transform .25s,background .25s}
.pb-play:hover{background:var(--red-light);transform:scale(1.08)}
.pbar-seekrow{width:100%;display:flex;align-items:center;gap:12px;font-size:12.5px;font-variant-numeric:tabular-nums;color:rgba(246,241,232,.75)}
.pb-range{-webkit-appearance:none;appearance:none;flex:1;height:5px;border-radius:5px;outline:0;cursor:pointer;background:linear-gradient(90deg,var(--red-light) var(--p,0%),rgba(255,255,255,.25) var(--p,0%))}
.pb-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(169,42,59,.5)}
.pb-range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff}
.pbar-side{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.pb-vol{flex:none;width:90px}

@media(max-width:1180px){.po-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){
.po-grid{grid-template-columns:repeat(3,1fr);gap:34px 24px}
.po-hero{padding:120px 0 120px}
.po-feature{grid-template-columns:1fr;justify-items:center;text-align:center;padding:28px}
.po-feature-cover{margin-inline-end:0;width:200px}
.po-feature-body{align-items:center}
.pbar-in{grid-template-columns:1fr auto;gap:12px}
.pbar-main{grid-column:1/-1;order:3}
.pbar-side .pb-vol,.pbar-side #pbMute,.pbar-side #pbRate{display:none}
.pbar-btns{position:absolute;inset-inline-end:62px;top:14px}
}
@media(max-width:560px){.po-grid{grid-template-columns:repeat(2,1fr);gap:28px 16px}.pcard-desc{display:none}body.has-player{padding-bottom:130px}}
@media(hover:none){.pcard-play{opacity:1;transform:none;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.po-wave i,.pcard-eq i,.pcard.playing .pcard-disc,.po-feature .pcard-disc{animation:none}.pcard,.pbar{animation:none}}