/* Original debranded animation from supplied front-page exploration. */

.hf{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:20px 28px;background:var(--sunk)}
.hf-call{list-style:none;margin:0;padding:0;display:grid;gap:14px;align-self:center}
.hf-call li{display:flex;gap:10px;align-items:baseline;font-size:12px;color:var(--ink3);transition:color var(--t-base);opacity:.45}
.hf-call b{font-weight:500;border:1px solid currentColor;border-radius:99px;padding:1px 6px}
.hf-call .c1{animation:hfC1 12s infinite}.hf-call .c2{animation:hfC2 12s infinite}.hf-call .c3{animation:hfC3 12s infinite}
@keyframes hfC1{0%,4%{opacity:.45;color:var(--ink3)}7%,32%{opacity:1;color:var(--red)}35%,100%{opacity:.45;color:var(--ink3)}}
@keyframes hfC2{0%,34%{opacity:.45;color:var(--ink3)}37%,60%{opacity:1;color:var(--red)}63%,100%{opacity:.45;color:var(--ink3)}}
@keyframes hfC3{0%,61%{opacity:.45;color:var(--ink3)}64%,94%{opacity:1;color:var(--red)}97%,100%{opacity:.45;color:var(--ink3)}}
.hp{position:relative;width:236px;height:430px;border-radius:30px;border:7px solid #0b0c0d;background:#17181a;color:#e9e6df;padding:16px 14px;overflow:hidden;font-size:12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.hp-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#9b978e}
.hf-src{position:relative;display:inline-flex;gap:6px;align-items:center;border:1px solid #3a3b3e;border-radius:99px;padding:4px 10px}
.hf-src b{font-weight:600;color:#f0c27a;width:62px}
.hf-src .sb{position:absolute;left:52px;opacity:0;animation:hfSb 12s infinite}
.hf-src .sa{animation:hfSa 12s infinite}
@keyframes hfSa{0%,27%{opacity:1}29%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes hfSb{0%,27%{opacity:0}29%,96%{opacity:1}99%,100%{opacity:0}}
.hp-menu{position:absolute;left:14px;top:46px;z-index:3;list-style:none;margin:0;padding:6px;width:150px;background:#26272a;border:1px solid #3a3b3e;border-radius:10px;opacity:0;transform:translateY(-6px);animation:hfMenu 12s var(--ease) infinite}
.hp-menu li{position:relative;z-index:1;padding:7px 8px;font-size:12px}
.hp-menu .hl{position:absolute;left:6px;right:6px;top:6px;height:31px;border-radius:6px;background:rgba(240,194,122,.18);animation:hfHl 12s var(--ease) infinite}
@keyframes hfMenu{0%,7%{opacity:0;transform:translateY(-6px)}10%,27%{opacity:1;transform:none}31%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes hfHl{0%,15%{transform:none}20%,100%{transform:translateY(31px)}}
.sheet .hp-h{margin:16px 0 8px;font-size:13px;font-weight:600;color:#e9e6df;max-width:none}
.hp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hp-grid i{aspect-ratio:1;border-radius:6px;background:linear-gradient(135deg,#3b3f47,#24262b)}
.hp-grid i:nth-child(2){background:linear-gradient(135deg,#6b4a2c,#2b2420)}
.hp-grid i:nth-child(3){background:linear-gradient(135deg,#2c4a4f,#1e2426)}
.hp-grid i:nth-child(5){background:linear-gradient(135deg,#4a3046,#221d24)}
.hp-player{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:12px 14px 14px;background:#202124;border-top:1px solid #333}
.hf-trk{display:grid;font-size:11px;color:#9b978e}.hf-trk b{color:#e9e6df;font-size:12px}
.hf-knob{grid-row:1/3;grid-column:2;width:52px;height:52px}
.hf-kr{fill:#2c2d31;stroke:#f0c27a;stroke-width:2}
.hf-kp{stroke:#f0c27a;stroke-width:3;stroke-linecap:round}
.hf-kd{transform-origin:30px 30px;transform:rotate(-60deg);animation:hfKnob 12s var(--ease) infinite}
@keyframes hfKnob{0%,36%{transform:rotate(-60deg)}56%,96%{transform:rotate(40deg)}100%{transform:rotate(-60deg)}}
.hf-db{position:relative;height:16px;font-family:var(--mono);font-size:11px}
.hf-db b{position:absolute;left:0;font-weight:500;color:#f0c27a}
.hf-db .d1{animation:hfSa2 12s infinite}.hf-db .d2{opacity:0;animation:hfSb2 12s infinite}
@keyframes hfSa2{0%,52%{opacity:1}55%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes hfSb2{0%,52%{opacity:0}55%,96%{opacity:1}99%,100%{opacity:0}}
.hp-sp{position:absolute;left:0;right:0;bottom:0;z-index:4;background:#26272a;border-radius:18px 18px 0 0;padding:6px 16px 18px;transform:translateY(105%);animation:hfSp 12s var(--ease) infinite}
.hp-sp .hf-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #37383c;color:#9b978e}
.hp-sp .hf-row b{color:#e9e6df;font-weight:600}
.hf-save{display:block;margin-top:12px;text-align:center;padding:9px;border-radius:99px;background:#f0c27a;color:#17181a;font-weight:700;animation:hfPress 12s infinite}
.hf-toast{position:absolute;left:16px;right:16px;top:-40px;text-align:center;padding:7px;border-radius:8px;background:#e9e6df;color:#17181a;font-weight:600;opacity:0;animation:hfToast 12s infinite}
@keyframes hfSp{0%,61%{transform:translateY(105%)}66%,93%{transform:none}97%,100%{transform:translateY(105%)}}
@keyframes hfPress{0%,74%{transform:none}76%{transform:scale(.94)}79%,100%{transform:none}}
@keyframes hfToast{0%,77%{opacity:0;transform:translateY(6px)}80%,92%{opacity:1;transform:none}95%,100%{opacity:0}}
.hf-note{position:absolute;left:14px;bottom:10px;font-size:10px}