.hp-panel{--hp-ink: #1f3a5f;--hp-ink-2: #4a5d73;--hp-line: rgba(31, 58, 95, .1);--hp-line-strong: rgba(31, 58, 95, .18);--hp-surface: rgba(255, 255, 255, .5);--hp-track: rgba(31, 58, 95, .1);--acc: #2f8f8b;--acc-2: #4aaaa5;--acc-soft: rgba(86, 182, 178, .16);--acc-ring: #4aaaa5;--tab-from: #67c2bd;--tab-to: #4aaaa5;position:relative;width:100%;max-width:452px;border-radius:24px;padding:16px 20px 14px;background:radial-gradient(150% 100% at 16% 0%,rgba(255,255,255,.94),transparent 52%),linear-gradient(180deg,#fffdf7,#f6edd5);border:1.5px solid rgba(31,58,95,.13);box-shadow:0 44px 82px -36px #102a4375,0 14px 26px -18px #102a4347,0 1px #ffffffd9 inset;color:var(--hp-ink);transform:translate3d(var(--hp-px, 0px),var(--hp-py, 0px),0);animation:hp-float 11s ease-in-out infinite}html.dark .hp-panel{--hp-ink: #faf7f2;--hp-ink-2: #d8d0c4;--hp-line: rgba(255, 255, 255, .08);--hp-line-strong: rgba(255, 255, 255, .14);--hp-surface: rgba(255, 255, 255, .04);--hp-track: rgba(255, 255, 255, .1);background:linear-gradient(180deg,#2a2e32,#1f2225);border-color:#ffffff17;box-shadow:0 44px 82px -36px #0000009e,0 1px #ffffff0d inset}@keyframes hp-float{0%,to{transform:translate3d(var(--hp-px, 0px),var(--hp-py, 0px),0)}50%{transform:translate3d(var(--hp-px, 0px),calc(var(--hp-py, 0px) - 7px),0)}}.hp-panel.acc-teal{--acc: #2f8f8b;--acc-2: #4aaaa5;--acc-soft: rgba(86, 182, 178, .16);--acc-ring: #4aaaa5;--tab-from: #67c2bd;--tab-to: #4aaaa5}.hp-panel.acc-sky{--acc: #3f6bb0;--acc-2: #5b8fd6;--acc-soft: rgba(91, 143, 214, .16);--acc-ring: #5b8fd6;--tab-from: #7faae3;--tab-to: #5b8fd6}html.dark .hp-panel.acc-teal{--acc: #74cfca}html.dark .hp-panel.acc-sky{--acc: #9cc0f0}.hp-tab{position:absolute;top:-10px;left:30px;width:54px;height:13px;border-radius:7px 7px 0 0;background:linear-gradient(180deg,var(--tab-from),var(--tab-to));box-shadow:0 -2px 6px -2px #102a4338;transition:background .5s ease;z-index:-1}.hp-sheen{position:absolute;inset:0;border-radius:24px;overflow:hidden;pointer-events:none}.hp-sheen:before{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translate(0) skew(-12deg);will-change:transform;animation:hp-sheen 7s ease-in-out infinite}html.dark .hp-sheen:before{background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent)}@keyframes hp-sheen{0%,14%{transform:translate(0) skew(-12deg)}64%,to{transform:translate(578.95%) skew(-12deg)}}.hp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.hp-subjects{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:#1f3a5f0d;border:1px solid var(--hp-line)}html.dark .hp-subjects{background:#ffffff0d}.hp-subj{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.01em;color:var(--hp-ink-2);opacity:.7;transition:background .4s ease,color .4s ease,opacity .4s ease}.hp-subj-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}.hp-subj.is-on{background:var(--acc-soft);color:var(--acc);opacity:1}.hp-subj.is-on .hp-subj-dot{background:var(--acc-2);opacity:1}.hp-streak{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:linear-gradient(180deg,#fffdf6,#fdf2da);border:1px solid rgba(196,120,50,.28);box-shadow:0 8px 18px -12px #965a1473;font-size:12px;font-weight:800;white-space:nowrap;color:#a85b1d;animation:hp-streak 4.4s ease-in-out infinite}.hp-streak svg{color:#e07a30;fill:#e07a3040}html.dark .hp-streak{background:linear-gradient(180deg,#e07a3029,#e07a3014);border-color:#e07a3059;box-shadow:none;color:#f0a05c}@keyframes hp-streak{0%,88%,to{transform:translateY(0) scale(1)}93%{transform:translateY(-2px) scale(1.05)}}.hp-stage{animation:hp-stage-in .5s ease both}@keyframes hp-stage-in{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.hp-eyebrow{margin-top:11px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hp-ink-2);opacity:.78}.hp-title{margin:4px 0 0;min-height:2.24em;font-size:20px;font-weight:800;line-height:1.12;letter-spacing:-.01em;text-wrap:balance;color:var(--hp-ink)}.hp-marg{display:block;margin-top:3px;font-size:12px;font-style:italic;color:#1f3a5f80}html.dark .hp-marg{color:#faf7f273}.hp-snap{margin-top:11px;display:flex;align-items:center;gap:14px;padding:11px 13px;border-radius:16px;background:var(--hp-surface);border:1px solid var(--hp-line)}.hp-ringwrap{position:relative;width:76px;height:76px;flex:0 0 76px}.hp-ring{display:block;transform:rotate(-90deg)}.hp-ring-base{fill:none;stroke:#102a431a;stroke-width:7}html.dark .hp-ring-base{stroke:#ffffff1f}.hp-ring-val{fill:none;stroke-width:7;stroke-linecap:round}.hp-pct{position:absolute;inset:0;display:grid;place-items:center;font-size:19px;font-weight:800;color:var(--hp-ink);font-variant-numeric:tabular-nums}.hp-pop{position:absolute;top:-9px;right:-10px;z-index:2;display:inline-flex;align-items:center;gap:2px;padding:2px 7px 2px 6px;border-radius:999px;background:var(--acc-2);color:#fff;font-size:10.5px;font-weight:800;box-shadow:0 8px 16px -8px #2d7d7ab3;opacity:0}.hp-panel.is-live .hp-pop{animation:hp-pop-in .55s cubic-bezier(.34,1.56,.64,1) 1s both}@keyframes hp-pop-in{0%{opacity:0;transform:translateY(7px) scale(.6)}to{opacity:1;transform:none}}.hp-snaptxt{flex:1;min-width:0}.hp-snaphead{display:flex;flex-direction:column;gap:1px;margin-bottom:9px}.hp-snaphead small{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);transition:color .5s ease}.hp-snaphead b{font-size:15px;font-weight:700;color:var(--hp-ink)}.hp-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}.hp-bars li{display:grid;grid-template-columns:58px 1fr 32px;align-items:center;gap:9px;font-size:10.5px;font-weight:700;color:var(--hp-ink-2)}.hp-bars li.is-teal{--bar: linear-gradient(90deg, #4aaaa5, #7fcdc8)}.hp-bars li.is-sky{--bar: linear-gradient(90deg, #5b8fd6, #8fb6ea)}.hp-bars li.is-coral{--bar: linear-gradient(90deg, #d27d98, #e7b3c2)}.hp-track{height:6px;border-radius:6px;background:var(--hp-track);overflow:hidden}.hp-track i{display:block;height:100%;width:var(--w);border-radius:6px;background:var(--bar);transform:scaleX(0);transform-origin:left center}.hp-panel.is-live .hp-track i{animation:hp-bar-grow 1s cubic-bezier(.2,.8,.2,1) var(--bd, 0s) both;will-change:transform}@keyframes hp-bar-grow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.hp-bars b{text-align:right;color:var(--hp-ink);font-variant-numeric:tabular-nums}.hp-bars li:nth-child(1) .hp-track i{--bd: .15s}.hp-bars li:nth-child(2) .hp-track i{--bd: .3s}.hp-bars li:nth-child(3) .hp-track i{--bd: .45s}.hp-rule{display:flex;align-items:center;gap:11px;margin:11px 2px 9px}.hp-rule-l{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hp-ink-2);white-space:nowrap}.hp-rule-line{flex:1;height:0;border-top:1.5px dashed var(--hp-line-strong)}.hp-badge{flex:0 0 auto;font-size:10px;font-weight:800;border-radius:999px;padding:3px 9px}.hp-badge.is-restant{color:#c0506a;background:#d7607a24;border:1px solid rgba(215,96,122,.4)}.hp-badge.is-nou{color:#3f7d5a;background:#4a9e7624;border:1px solid rgba(74,158,118,.36)}html.dark .hp-badge.is-restant{color:#eac0cb}html.dark .hp-badge.is-nou{color:#a8dcc0}.hp-queue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}.hp-queue li{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:12px;background:var(--hp-surface);border:1px solid var(--hp-line);opacity:0}.hp-queue li.is-restant{--q-stroke: #d27d98;--q-fg: #c0506a;--q-bg: rgba(215, 96, 122, .13);--q-bd: rgba(215, 96, 122, .36)}.hp-queue li.is-nou{--q-stroke: #4a9e76;--q-fg: #3f7d5a;--q-bg: rgba(74, 158, 118, .13);--q-bd: rgba(74, 158, 118, .34)}html.dark .hp-queue li.is-restant{--q-fg: #eac0cb}html.dark .hp-queue li.is-nou{--q-fg: #a8dcc0}.hp-panel.is-live .hp-queue li{animation:hp-q-enter .5s ease var(--qd, 0s) both}@keyframes hp-q-enter{0%{opacity:0;transform:translate(-7px)}to{opacity:1;transform:none}}.hp-queue li:nth-child(1){--qd: .25s}.hp-queue li:nth-child(2){--qd: .35s}.hp-queue li:nth-child(3){--qd: .45s}.hp-qring{position:relative;width:24px;height:24px;flex:0 0 24px}.hp-qring svg{width:24px;height:24px;transform:rotate(-90deg)}.hp-qring .b{fill:none;stroke:#1f3a5f24;stroke-width:3}html.dark .hp-qring .b{stroke:#ffffff29}.hp-qring .v{fill:none;stroke:var(--q-stroke);stroke-width:3;stroke-linecap:round;stroke-dashoffset:50.27}.hp-panel.is-live .hp-qring .v{animation:hp-qfill .9s ease var(--qd, 0s) both}@keyframes hp-qfill{0%{stroke-dashoffset:50.27}to{stroke-dashoffset:var(--qoff)}}.hp-qname{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:13px;font-weight:700;color:var(--hp-ink)}.hp-qname span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hp-qname em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--hp-ink-2);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hp-qdue{flex:0 0 auto;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--q-fg);background:var(--q-bg);border:1px solid var(--q-bd);border-radius:999px;padding:2px 8px}.hp-stats{display:flex;align-items:center;margin-top:11px;padding-top:11px;border-top:1px solid var(--hp-line)}.hp-stats span{position:relative;flex:1;display:flex;flex-direction:column;gap:1px;text-align:center;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hp-ink-2)}.hp-stats span+span:before{content:"";position:absolute;left:0;top:10%;bottom:10%;width:1px;background:var(--hp-line)}.hp-stats b{font-size:19px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--hp-ink);font-variant-numeric:tabular-nums}.hp-stats .is-up b{color:var(--acc);transition:color .5s ease}.hp-panel.is-paused,.hp-panel.is-paused .hp-streak,.hp-panel.is-paused .hp-sheen:before{animation-play-state:paused}@media (prefers-reduced-motion: reduce){.hp-panel,.hp-streak,.hp-sheen:before,.hp-stage,.hp-panel.is-live .hp-track i,.hp-panel.is-live .hp-qring .v,.hp-panel.is-live .hp-queue li,.hp-panel.is-live .hp-pop{animation:none!important}.hp-sheen{display:none}.hp-track i{width:var(--w);transform:none}.hp-qring .v{stroke-dashoffset:var(--qoff)}.hp-queue li,.hp-pop{opacity:1;transform:none}}@media (max-width: 760px){.hp-panel{padding:18px 16px 16px}.hp-title{font-size:21px}.hp-snap{gap:13px;padding:13px}.hp-streak{padding:5px 9px;font-size:11px}}