.sfp{display:inline-flex;align-items:center;gap:6px;width:130px;height:30px;
  vertical-align:middle;box-sizing:border-box;padding:0 6px;
  border:1px solid #6a6a6a;border-radius:4px;
  background:linear-gradient(#fdfdfd,#dcdcdc);
  font:11px/1 Arial,Helvetica,sans-serif;color:#222;user-select:none}
.sfp-btn{flex:none;width:18px;height:18px;padding:0;margin:0;cursor:pointer;
  border:1px solid #5a5a5a;border-radius:3px;
  background:linear-gradient(#f6f6f6,#c8c8c8);
  display:flex;align-items:center;justify-content:center;position:relative}
/* ponytail: 30px strip is below the 44px touch minimum; invisible pseudo-element
   grows the tap target on phones without changing the visual size */
.sfp-btn::after{content:"";position:absolute;top:-13px;bottom:-13px;left:-13px;right:-13px}
.sfp-btn:focus-visible{outline:2px solid #0a6cff;outline-offset:1px}
.sfp-btn svg{width:9px;height:9px;fill:#222;pointer-events:none}
.sfp-bar{flex:1;height:6px;border:1px solid #8a8a8a;border-radius:3px;
  background:#efefef;overflow:hidden;cursor:pointer;position:relative}
.sfp-fill{height:100%;width:0;background:linear-gradient(#7ab4ff,#2f6fd0)}
.sfp-time{flex:none;font-variant-numeric:tabular-nums;font-size:10px;color:#444}
@media(prefers-color-scheme:dark){
  .sfp{border-color:#555;background:linear-gradient(#3a3a3a,#2a2a2a);color:#eee}
  .sfp-btn{border-color:#666;background:linear-gradient(#4a4a4a,#333)}
  .sfp-btn svg{fill:#eee}
  .sfp-bar{background:#1e1e1e;border-color:#555}
  .sfp-time{color:#bbb}}