.hl{margin:0 0 22px}.hl-media{aspect-ratio:16/7;border:1px solid var(--line-2);background:radial-gradient(circle at 1px 1px,#ffffff12 1px,#0000 1.5px) 0 0/18px 18px,radial-gradient(80% 70% at 50% 40%,#ffffff0d,#0000 70%),linear-gradient(#0b0b0d,#050505);border-radius:18px;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff14}.hl-media canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.hl figcaption{gap:4px;margin-top:14px;display:grid}.hl figcaption b{font-size:var(--t-m);letter-spacing:-.01em;font-weight:600}.hl figcaption span{font-size:var(--t-m);color:var(--fg-3);line-height:1.55}.pm{gap:10px;width:min(78%,360px);display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pm-vol{border:1px solid var(--line-2);text-align:center;background:#ffffff0a;border-radius:16px;padding:14px 16px 12px}.pm-pct{font-size:var(--t-l);letter-spacing:-.05em;font-weight:600;line-height:1}.pm-pct small{font-size:var(--t-m);color:var(--fg-3);margin-left:2px}.pm-track{opacity:.85;background:linear-gradient(90deg,#fff 0% 30%,#e7a43a 62%,#ff5a5a 100%);border-radius:99px;height:6px;margin:14px 4px 8px;position:relative}.pm-knob{background:#fff;border-radius:50%;width:16px;height:16px;position:absolute;top:50%;left:56%;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #ffffff26}.pm-scale{font-size:var(--t-s);color:var(--fg-4);justify-content:space-between;display:flex}.pm-red{color:#ff7a7a}.pm-guard{min-height:46px;font-size:var(--t-s);transition:border-color .4s var(--ease), background .4s var(--ease);background:#3ee08f12;border:1px solid #3ee08f59;border-radius:14px;align-items:center;gap:10px;padding:8px 10px 8px 12px;display:flex}.pm-guard svg{width:16px;height:16px;fill:var(--ok);transition:fill .4s var(--ease);flex:none}.pm-gt{min-width:0;color:var(--fg-2);flex:1}.pm-db{font-family:var(--mono);color:var(--ok);font-variant-numeric:tabular-nums}.pm-btn{color:#000;font-size:var(--t-s);transition:transform .2s var(--ease);background:#fff;border-radius:99px;padding:5px 12px;font-weight:600;display:none}.pm-btn.is-tap{transform:scale(.92)}.pm-guard.is-off{background:#ff5a5a12;border-color:#ff5a5a66}.pm-guard.is-off svg{fill:#ff7a7a}.pm-guard.is-off .pm-db{display:none}.pm-guard.is-off .pm-btn{display:block}.pm-cur{opacity:0;width:20px;height:20px;transition:transform .8s cubic-bezier(.65, 0, .35, 1), opacity .3s var(--ease);pointer-events:none;z-index:2;position:absolute;top:0;left:0;transform:translate(70%,120%)}.pm-cur svg{fill:#fff;stroke:#000;stroke-width:1.4px;stroke-linejoin:round;width:100%;height:100%;transition:transform .15s var(--ease)}.pm-cur.is-on{opacity:1}.pm-cur.is-tap svg{transform:scale(.82)}.gw{justify-content:center;align-items:center;gap:clamp(20px,5vw,56px);display:flex;position:absolute;inset:0}.gw-halo{aspect-ratio:1;background:radial-gradient(closest-side, color-mix(in srgb, var(--c,#fff) 55%, transparent), transparent 75%);width:62%;transition:background .9s var(--ease);filter:blur(10px);position:absolute;top:50%;left:36%;transform:translate(-50%,-50%)}.gw-pop{aspect-ratio:3/4;background:#08080ae0;border:1px solid #ffffff29;border-radius:16px;flex-direction:column;gap:9px;width:22%;padding:14px;display:flex;position:relative;box-shadow:0 30px 60px -20px #000000e6}.gw-l{background:#ffffff24;border-radius:6px;height:9px;display:block}.gw-l.w60{width:60%}.gw-l.w80{width:80%}.gw-c{background:#ffffff0f;border:1px solid #ffffff14;border-radius:10px;flex:1;display:block}.gw-side{gap:14px;display:grid;position:relative}.gw-name{font-family:var(--mono);font-size:var(--t-s);color:var(--fg-2)}.gw-dots{grid-template-columns:repeat(5,18px);gap:10px;display:grid}.gw-dots i{width:18px;height:18px;transition:transform .4s var(--spring), box-shadow .3s var(--ease);border-radius:50%;box-shadow:inset 0 0 0 1px #fff3}.gw-dots i.is-on{transform:scale(1.18);box-shadow:0 0 0 2px #000,0 0 0 3.5px #fff}.tp{width:min(80%,420px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tp-now{border:1px solid var(--line-2);background:#ffffff0a;border-radius:16px;align-items:center;gap:14px;padding:14px;display:flex}.tp-art{background:radial-gradient(circle at 30% 30%,#ffffff80,#ffffff0f 70%);border-radius:10px;flex:none;width:46px;height:46px}.tp-t{flex:1;min-width:0;line-height:1.35;display:grid}.tp-t b{font-size:var(--t-s);font-weight:600}.tp-t small{font-size:var(--t-s);color:var(--fg-4)}.tp-t.is-in{animation:tpIn .55s var(--ease) both}@keyframes tpIn{0%{opacity:0;filter:blur(4px);transform:translateY(10px)}}.tp-chip{justify-items:end;display:grid;position:relative}.tp-x{color:#000;font-family:var(--mono);font-size:var(--t-s);background:#fff;border-radius:99px;padding:5px 11px;font-weight:600}.tp-ok{font-family:var(--mono);font-size:var(--t-s);color:var(--ok);opacity:0;white-space:nowrap;margin-top:6px;position:absolute;top:100%;right:0}.tp-chip.is-kept .tp-x{animation:tpPulse .7s var(--ease)}.tp-chip.is-kept .tp-ok{animation:tpOk 1.9s var(--ease) both}@keyframes tpPulse{30%{box-shadow:0 0 0 6px #ffffff2e}}@keyframes tpOk{0%{opacity:0;transform:translateY(-4px)}20%,75%{opacity:1;transform:none}to{opacity:0}}.tp-bar{background:#ffffff1a;border-radius:99px;height:3px;margin:14px 4px 10px;overflow:hidden}.tp-bar i{background:#fffc;width:0;height:100%;transition:width 2.5s linear;display:block}.tp-foot{font-family:var(--mono);font-size:var(--t-s);color:var(--fg-4);justify-content:space-between;display:flex}.sq{width:min(80%,420px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sq-head{font-family:var(--mono);font-size:var(--t-s);color:var(--fg-4);justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.sq-ban{color:#ff8a8a;border:1px solid #ff5a5a66;border-radius:99px;padding:3px 10px}.sq-list{gap:6px;height:196px;margin:0;padding:0;list-style:none;display:grid;overflow:hidden}.sq-list li{border:1px solid var(--line);height:44px;animation:sqIn .45s var(--ease) both;transition:opacity .4s var(--ease), transform .45s var(--ease), background .3s var(--ease), border-color .3s var(--ease), margin .45s var(--ease);background:#ffffff05;border-radius:12px;align-items:center;gap:12px;padding:0 14px;display:flex}@keyframes sqIn{0%{opacity:0;transform:translateY(12px)}}.sq-t{white-space:nowrap;flex:1;align-items:baseline;gap:10px;min-width:0;display:flex;overflow:hidden}.sq-t b{font-size:var(--t-s);font-weight:600}.sq-t small{font-size:var(--t-s);color:var(--fg-4)}.sq-tag{font-family:var(--mono);font-size:var(--t-s);color:#000;opacity:0;transition:opacity .3s var(--ease), transform .4s var(--spring);background:#fff;border-radius:99px;padding:2px 9px;transform:scale(.8)}.sq-list li.is-now{border-color:var(--line-2);background:#ffffff12}.sq-list li.is-skip .sq-t b,.sq-list li.is-skip .sq-t small{color:var(--fg-4);-webkit-text-decoration:line-through #fff9;text-decoration:line-through #fff9}.sq-list li.is-skip .sq-tag{opacity:1;transform:none}.sq-list li.is-out{opacity:0;margin-top:-50px;transform:translateY(-14px)}@media (max-width:640px){.hl-media{aspect-ratio:4/3}.gw{gap:18px}.gw-pop{border-radius:12px;gap:7px;width:32%;padding:10px}.gw-l{height:7px}.gw-dots{grid-template-columns:repeat(3,16px);gap:8px}.gw-dots i{width:16px;height:16px}.gw-halo{width:80%;left:30%}.pm,.tp,.sq{width:88%}}
